feat(editor): Add support for unplugin-icons and auto-importing components (no-changelog) (#10055)

2024-11-09 22:24:05 -08:00 · 2024-07-23 13:30:29 +03:00 · 2024-07-23 13:30:29 +03:00 · f2ad1222b1
parent 0fd2c5e106
commit f2ad1222b1
20 changed files with 257 additions and 83 deletions
--- a/packages/@n8n/chat/package.json
+++ b/packages/@n8n/chat/package.json
@ -46,7 +46,7 @@
    "@iconify-json/mdi": "^1.1.54",
    "@n8n/storybook": "workspace:*",
    "@types/markdown-it": "^12.2.3",
-    "unplugin-icons": "^0.17.0",
+    "unplugin-icons": "^0.19.0",
    "vite-plugin-dts": "^3.9.1"
  },
  "files": [
--- a/packages/design-system/.gitignore
+++ b/packages/design-system/.gitignore
@ -1,2 +1,5 @@
 storybook-static
 **/*.stories.js
+
+# Auto-generated
+src/components.d.ts
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@ -31,7 +31,9 @@
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.38",
    "sass": "^1.64.1",
-    "tailwindcss": "^3.4.3"
+    "tailwindcss": "^3.4.3",
+    "unplugin-icons": "^0.19.0",
+    "unplugin-vue-components": "^0.27.2"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
--- a/packages/design-system/vite.config.mts
+++ b/packages/design-system/vite.config.mts
@ -3,6 +3,9 @@ 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';

 export const vitestConfig = defineVitestConfig({
 	test: {
@ -30,7 +33,22 @@ export const vitestConfig = defineVitestConfig({

 export default mergeConfig(
 	defineConfig({
-		plugins: [vue()],
+		plugins: [
+			vue(),
+			icons({
+				compiler: 'vue3',
+				autoInstall: true,
+			}),
+			components({
+				dirs: [],
+				dts: false,
+				resolvers: [
+					iconsResolver({
+						prefix: 'icon'
+					})
+				]
+			}),
+		],
 		resolve: {
 			alias: {
 				'@': resolve(__dirname, 'src'),
--- a/packages/editor-ui/.gitignore
+++ b/packages/editor-ui/.gitignore
@ -22,3 +22,6 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
+
+# Auto-generated files
+src/components.d.ts
--- a/packages/editor-ui/package.json
+++ b/packages/editor-ui/package.json
@ -77,6 +77,7 @@
  },
  "devDependencies": {
    "@faker-js/faker": "^8.0.2",
+    "@iconify/json": "^2.2.228",
    "@pinia/testing": "^0.1.3",
    "@sentry/vite-plugin": "^2.5.0",
    "@types/dateformat": "^3.0.0",
@ -88,7 +89,8 @@
    "@types/uuid": "^8.3.2",
    "cross-env": "^7.0.3",
    "miragejs": "^0.1.48",
-    "unplugin-icons": "^0.17.0"
+    "unplugin-icons": "^0.19.0",
+    "unplugin-vue-components": "^0.27.2"
  },
  "peerDependencies": {
    "@fortawesome/fontawesome-svg-core": "*",
--- a/packages/editor-ui/src/components/CollectionParameter.vue
+++ b/packages/editor-ui/src/components/CollectionParameter.vue
@ -135,7 +135,7 @@ const getProperties = computed(() => {
 	const returnProperties = [];
 	let tempProperties;
 	for (const name of propertyNames.value) {
-		tempProperties = getOptionProperties(name);
+		tempProperties = getOptionProperties(name) as INodeProperties[];
 		if (tempProperties !== undefined) {
 			returnProperties.push(...tempProperties);
 		}
--- a/packages/editor-ui/src/components/ImportCurlParameter.vue
+++ b/packages/editor-ui/src/components/ImportCurlParameter.vue
@ -3,7 +3,7 @@ import { IMPORT_CURL_MODAL_KEY } from '@/constants';
 import { useUIStore } from '@/stores/ui.store';

 defineProps<{
-	isReadOnly: boolean;
+	isReadOnly?: boolean;
 }>();

 const uiStore = useUIStore();
--- a/packages/editor-ui/src/components/Node/NodeCreation.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreation.vue
@ -18,7 +18,7 @@ type Props = {
 };

 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-const NodeCreator = defineAsyncComponent(
+const LazyNodeCreator = defineAsyncComponent(
 	async () => await import('@/components/Node/NodeCreator/NodeCreator.vue'),
 );

@ -135,7 +135,7 @@ function nodeTypeSelected(nodeTypes: string[]) {
 			</div>
 		</div>
 		<Suspense>
-			<NodeCreator
+			<LazyNodeCreator
 				:active="createNodeActive"
 				@node-type-selected="nodeTypeSelected"
 				@close-node-creator="closeNodeCreator"
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@ -67,7 +67,7 @@
 				/>
 				<Suspense v-if="!asyncLoadingError">
 					<template #default>
-						<CollectionParameter
+						<LazyCollectionParameter
 							v-if="parameter.type === 'collection'"
 							:parameter="parameter"
 							:values="getParameterValue(parameter.name)"
@ -76,7 +76,7 @@
 							:is-read-only="isReadOnly"
 							@value-changed="valueChanged"
 						/>
-						<FixedCollectionParameter
+						<LazyFixedCollectionParameter
 							v-else-if="parameter.type === 'fixedCollection'"
 							:parameter="parameter"
 							:values="getParameterValue(parameter.name)"
@ -192,10 +192,10 @@ import {
 import { get, set } from 'lodash-es';
 import { useRouter } from 'vue-router';

-const FixedCollectionParameter = defineAsyncComponent(
+const LazyFixedCollectionParameter = defineAsyncComponent(
 	async () => await import('./FixedCollectionParameter.vue'),
 );
-const CollectionParameter = defineAsyncComponent(
+const LazyCollectionParameter = defineAsyncComponent(
 	async () => await import('./CollectionParameter.vue'),
 );

@ -205,7 +205,7 @@ type Props = {
 	path?: string;
 	hideDelete?: boolean;
 	indent?: boolean;
-	isReadOnly: boolean;
+	isReadOnly?: boolean;
 	hiddenIssuesInputs?: string[];
 	entryIndex?: number;
 };
@ -227,7 +227,7 @@ const workflowHelpers = useWorkflowHelpers({ router });

 onErrorCaptured((e, component) => {
 	if (
-		!['FixedCollectionParameter', 'CollectionParameter'].includes(
+		!['LazyFixedCollectionParameter', 'LazyCollectionParameter'].includes(
 			component?.$options.name as string,
 		)
 	) {
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@ -50,7 +50,7 @@
 				data-test-id="run-data-pane-header"
 				@click.stop
 			>
-				<RunDataSearch
+				<LazyRunDataSearch
 					v-if="showIOSearch"
 					v-model="search"
 					:class="$style.search"
@ -380,7 +380,7 @@
 			</div>

 			<Suspense v-else-if="hasNodeRun && displayMode === 'table' && node">
-				<RunDataTable
+				<LazyRunDataTable
 					:node="node"
 					:input-data="inputDataPage"
 					:mapping-enabled="mappingEnabled"
@ -397,7 +397,7 @@
 			</Suspense>

 			<Suspense v-else-if="hasNodeRun && displayMode === 'json' && node">
-				<RunDataJson
+				<LazyRunDataJson
 					:pane-type="paneType"
 					:edit-mode="editMode"
 					:push-ref="pushRef"
@ -412,11 +412,11 @@
 			</Suspense>

 			<Suspense v-else-if="hasNodeRun && isPaneTypeOutput && displayMode === 'html'">
-				<RunDataHtml :input-html="inputHtml" />
+				<LazyRunDataHtml :input-html="inputHtml" />
 			</Suspense>

 			<Suspense v-else-if="hasNodeRun && isSchemaView">
-				<RunDataSchema
+				<LazyRunDataSchema
 					:nodes="nodes"
 					:mapping-enabled="mappingEnabled"
 					:node="node"
@ -628,15 +628,19 @@ import { useSourceControlStore } from '@/stores/sourceControl.store';
 import { useRootStore } from '@/stores/root.store';
 import RunDataPinButton from '@/components/RunDataPinButton.vue';

-const RunDataTable = defineAsyncComponent(
+const LazyRunDataTable = defineAsyncComponent(
 	async () => await import('@/components/RunDataTable.vue'),
 );
-const RunDataJson = defineAsyncComponent(async () => await import('@/components/RunDataJson.vue'));
-const RunDataSchema = defineAsyncComponent(
+const LazyRunDataJson = defineAsyncComponent(
+	async () => await import('@/components/RunDataJson.vue'),
+);
+const LazyRunDataSchema = defineAsyncComponent(
 	async () => await import('@/components/RunDataSchema.vue'),
 );
-const RunDataHtml = defineAsyncComponent(async () => await import('@/components/RunDataHtml.vue'));
-const RunDataSearch = defineAsyncComponent(
+const LazyRunDataHtml = defineAsyncComponent(
+	async () => await import('@/components/RunDataHtml.vue'),
+);
+const LazyRunDataSearch = defineAsyncComponent(
 	async () => await import('@/components/RunDataSearch.vue'),
 );

@ -650,11 +654,11 @@ export default defineComponent({
 		BinaryDataDisplay,
 		NodeErrorView,
 		JsonEditor,
-		RunDataTable,
-		RunDataJson,
-		RunDataSchema,
-		RunDataHtml,
-		RunDataSearch,
+		LazyRunDataTable,
+		LazyRunDataJson,
+		LazyRunDataSchema,
+		LazyRunDataHtml,
+		LazyRunDataSearch,
 		RunDataPinButton,
 	},
 	props: {
--- a/packages/editor-ui/src/components/RunDataJson.vue
+++ b/packages/editor-ui/src/components/RunDataJson.vue
@ -1,7 +1,7 @@
 <template>
 	<div :class="[$style.jsonDisplay, { [$style.highlight]: highlight }]">
 		<Suspense>
-			<RunDataJsonActions
+			<LazyRunDataJsonActions
 				v-if="!editMode.enabled"
 				:node="node"
 				:push-ref="pushRef"
@ -93,7 +93,7 @@ import { nonExistingJsonPath } from '@/constants';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import TextWithHighlights from './TextWithHighlights.vue';

-const RunDataJsonActions = defineAsyncComponent(
+const LazyRunDataJsonActions = defineAsyncComponent(
 	async () => await import('@/components/RunDataJsonActions.vue'),
 );

@ -102,7 +102,7 @@ export default defineComponent({
 	components: {
 		VueJsonPretty,
 		Draggable,
-		RunDataJsonActions,
+		LazyRunDataJsonActions,
 		MappingPill,
 		TextWithHighlights,
 	},
--- a/packages/editor-ui/src/components/WorkflowLMChat/WorkflowLMChat.vue
+++ b/packages/editor-ui/src/components/WorkflowLMChat/WorkflowLMChat.vue
@ -54,7 +54,7 @@
 						locale.baseText('chat.window.logs')
 					}}</n8n-text>
 					<div :class="$style.logs">
-						<RunDataAi :key="messages.length" :node="node" hide-title slim />
+						<LazyRunDataAi :key="messages.length" :node="node" hide-title slim />
 					</div>
 				</div>
 			</div>
@ -137,7 +137,7 @@ import { get, last } from 'lodash-es';
 import { isEmpty } from '@/utils/typesUtils';
 import { chatEventBus } from '@n8n/chat/event-buses';

-const RunDataAi = defineAsyncComponent(
+const LazyRunDataAi = defineAsyncComponent(
 	async () => await import('@/components/RunDataAi/RunDataAi.vue'),
 );

--- a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
+++ b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
@ -162,7 +162,7 @@ import type { Scope } from '@n8n/permissions';
 export type IResource = {
 	id: string;
 	name: string;
-	value: string;
+	value?: string;
 	key?: string;
 	updatedAt?: string;
 	createdAt?: string;
--- a/packages/editor-ui/src/views/NodeView.v2.vue
+++ b/packages/editor-ui/src/views/NodeView.v2.vue
@ -92,11 +92,11 @@ import { createEventBus } from 'n8n-design-system';
 import type { PinDataSource } from '@/composables/usePinnedData';
 import { useClipboard } from '@/composables/useClipboard';

-const NodeCreation = defineAsyncComponent(
+const LazyNodeCreation = defineAsyncComponent(
 	async () => await import('@/components/Node/NodeCreation.vue'),
 );

-const NodeDetailsView = defineAsyncComponent(
+const LazyNodeDetailsView = defineAsyncComponent(
 	async () => await import('@/components/NodeDetailsView.vue'),
 );

@ -1533,7 +1533,7 @@ onBeforeUnmount(() => {
 			/>
 		</div>
 		<Suspense>
-			<NodeCreation
+			<LazyNodeCreation
 				v-if="!isCanvasReadOnly"
 				:create-node-active="uiStore.isCreateNodeActive"
 				:node-view-scale="viewportTransform.zoom"
@ -1542,7 +1542,7 @@ onBeforeUnmount(() => {
 			/>
 		</Suspense>
 		<Suspense>
-			<NodeDetailsView
+			<LazyNodeDetailsView
 				:workflow-object="editableWorkflowObject"
 				:read-only="isCanvasReadOnly"
 				:is-production-execution-preview="isProductionExecutionPreview"
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@ -102,11 +102,11 @@
 			/>
 			<Suspense>
 				<div :class="$style.setupCredentialsButtonWrapper">
-					<SetupWorkflowCredentialsButton />
+					<LazySetupWorkflowCredentialsButton />
 				</div>
 			</Suspense>
 			<Suspense>
-				<NodeCreation
+				<LazyNodeCreation
 					v-if="!isReadOnlyRoute && !readOnlyEnv"
 					:create-node-active="createNodeActive"
 					:node-view-scale="nodeViewScale"
@ -115,7 +115,7 @@
 				/>
 			</Suspense>
 			<Suspense>
-				<CanvasControls />
+				<LazyCanvasControls />
 			</Suspense>
 			<Suspense>
 				<ContextMenu @action="onContextMenuAction" />
@ -390,13 +390,13 @@ interface AddNodeOptions {
 	name?: string;
 }

-const NodeCreation = defineAsyncComponent(
+const LazyNodeCreation = defineAsyncComponent(
 	async () => await import('@/components/Node/NodeCreation.vue'),
 );
-const CanvasControls = defineAsyncComponent(
+const LazyCanvasControls = defineAsyncComponent(
 	async () => await import('@/components/CanvasControls.vue'),
 );
-const SetupWorkflowCredentialsButton = defineAsyncComponent(
+const LazySetupWorkflowCredentialsButton = defineAsyncComponent(
 	async () =>
 		await import('@/components/SetupWorkflowCredentialsButton/SetupWorkflowCredentialsButton.vue'),
 );
@ -409,10 +409,10 @@ export default defineComponent({
 		Sticky,
 		CanvasAddButton,
 		KeyboardShortcutTooltip,
-		NodeCreation,
-		CanvasControls,
+		LazyNodeCreation,
+		LazyCanvasControls,
 		ContextMenu,
-		SetupWorkflowCredentialsButton,
+		LazySetupWorkflowCredentialsButton,
 	},
 	async beforeRouteLeave(to, from, next) {
 		if (
--- a/packages/editor-ui/src/views/VariablesView.vue
+++ b/packages/editor-ui/src/views/VariablesView.vue
@ -121,7 +121,7 @@ function resetNewVariablesList() {
 const resourceToEnvironmentVariable = (data: IResource): EnvironmentVariable => ({
 	id: data.id,
 	key: data.name,
-	value: 'value' in data ? data.value : '',
+	value: 'value' in data ? data.value ?? '' : '',
 });

 const environmentVariableToResource = (data: EnvironmentVariable): IResource => ({
--- a/packages/editor-ui/src/views/WorkflowsView.vue
+++ b/packages/editor-ui/src/views/WorkflowsView.vue
@ -147,7 +147,7 @@

 <script lang="ts">
 import { defineComponent } from 'vue';
-import ResourcesListLayout from '@/components/layouts/ResourcesListLayout.vue';
+import ResourcesListLayout, { type IResource } from '@/components/layouts/ResourcesListLayout.vue';
 import WorkflowCard from '@/components/WorkflowCard.vue';
 import { EnterpriseEditionFeature, VIEWS } from '@/constants';
 import type { ITag, IUser, IWorkflowDb } from '@/Interface';
@ -213,8 +213,8 @@ const WorkflowsView = defineComponent({
 		currentUser(): IUser {
 			return this.usersStore.currentUser || ({} as IUser);
 		},
-		allWorkflows(): IWorkflowDb[] {
-			return this.workflowsStore.allWorkflows;
+		allWorkflows(): IResource[] {
+			return this.workflowsStore.allWorkflows as IResource[];
 		},
 		isShareable(): boolean {
 			return this.settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.Sharing];
--- a/packages/editor-ui/vite.config.mts
+++ b/packages/editor-ui/vite.config.mts
@ -6,6 +6,8 @@ import { sentryVitePlugin } from '@sentry/vite-plugin';
 import packageJSON from './package.json';
 import { vitestConfig } from '../design-system/vite.config.mts';
 import icons from 'unplugin-icons/vite';
+import iconsResolver from 'unplugin-icons/resolver'
+import components from 'unplugin-vue-components/vite';

 const vendorChunks = ['vue', 'vue-router'];
 const n8nChunks = ['n8n-workflow', 'n8n-design-system', '@n8n/chat'];
@ -74,6 +76,14 @@ const plugins = [
 		compiler: 'vue3',
 		autoInstall: true,
 	}),
+	components({
+		dts: './src/components.d.ts',
+		resolvers: [
+			iconsResolver({
+				prefix: 'icon'
+			})
+		]
+	}),
 	vue(),
 ];

--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -186,8 +186,8 @@ importers:
        specifier: ^12.2.3
        version: 12.2.3
      unplugin-icons:
-        specifier: ^0.17.0
-        version: 0.17.4(@vue/compiler-sfc@3.4.21)(vue-template-compiler@2.7.14)
+        specifier: ^0.19.0
+        version: 0.19.0(@vue/compiler-sfc@3.4.21)(vue-template-compiler@2.7.14)
      vite-plugin-dts:
        specifier: ^3.9.1
        version: 3.9.1(@types/node@18.16.16)(rollup@4.18.0)(typescript@5.5.2)(vite@5.2.12(@types/node@18.16.16)(sass@1.64.1)(terser@5.16.1))
@ -1066,6 +1066,12 @@ importers:
      tailwindcss:
        specifier: ^3.4.3
        version: 3.4.3
+      unplugin-icons:
+        specifier: ^0.19.0
+        version: 0.19.0(@vue/compiler-sfc@3.4.21)(vue-template-compiler@2.7.14)
+      unplugin-vue-components:
+        specifier: ^0.27.2
+        version: 0.27.3(@babel/parser@7.24.6)(rollup@4.18.0)(vue@3.4.21(typescript@5.5.2))

  packages/editor-ui:
    dependencies:
@ -1259,6 +1265,9 @@ importers:
      '@faker-js/faker':
        specifier: ^8.0.2
        version: 8.0.2
+      '@iconify/json':
+        specifier: ^2.2.228
+        version: 2.2.230
      '@pinia/testing':
        specifier: ^0.1.3
        version: 0.1.3(pinia@2.1.6(typescript@5.5.2)(vue@3.4.21(typescript@5.5.2)))(vue@3.4.21(typescript@5.5.2))
@ -1293,8 +1302,11 @@ importers:
        specifier: ^0.1.48
        version: 0.1.48
      unplugin-icons:
-        specifier: ^0.17.0
-        version: 0.17.4(@vue/compiler-sfc@3.4.21)(vue-template-compiler@2.7.14)
+        specifier: ^0.19.0
+        version: 0.19.0(@vue/compiler-sfc@3.4.21)(vue-template-compiler@2.7.14)
+      unplugin-vue-components:
+        specifier: ^0.27.2
+        version: 0.27.3(@babel/parser@7.24.6)(rollup@4.18.0)(vue@3.4.21(typescript@5.5.2))

  packages/node-dev:
    dependencies:
@ -1704,8 +1716,11 @@ packages:
  '@antfu/install-pkg@0.1.1':
    resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==}

-  '@antfu/utils@0.7.6':
-    resolution: {integrity: sha512-pvFiLP2BeOKA/ZOS6jxx4XhKzdVLHDhGlFEaZ2flWWYf2xOqVniqpk38I04DFRyz+L0ASggl7SkItTc+ZLju4w==}
+  '@antfu/install-pkg@0.3.3':
+    resolution: {integrity: sha512-nHHsk3NXQ6xkCfiRRC8Nfrg8pU5kkr3P3Y9s9dKqiuRmBD0Yap7fymNDjGFKeWhZQHqqbCS5CfeMy9wtExM24w==}
+
+  '@antfu/utils@0.7.10':
+    resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==}

  '@anthropic-ai/sdk@0.21.1':
    resolution: {integrity: sha512-fqdt74RTdplnaFOYhwNjjK/Ec09Dqv9ekYr7PuC6GdhV1RWkziqbpJBewn42CYYqCr92JeX6g+IXVgXmq9l7XQ==}
@ -3308,11 +3323,14 @@ packages:
  '@iconify-json/mdi@1.1.63':
    resolution: {integrity: sha512-b07dRM5LYdwJqd/lm+1+JDNDNSWHvpZ7ujb73oJxx3lmK1J0giDS0BSc4yia0hixNV0Z2q/4GyxAu/A8XqDnbg==}

+  '@iconify/json@2.2.230':
+    resolution: {integrity: sha512-SbwqcrYfHMnH7Na3S5RNNUdZvX0cLqgkONVMzI8BOfgVCQSY3tXHyHqeu2VkVoxJX9OcHMmfjeavpno7/y3Mfw==}
+
  '@iconify/types@2.0.0':
    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}

-  '@iconify/utils@2.1.11':
-    resolution: {integrity: sha512-M/w3PkN8zQYXi8N6qK/KhnYMfEbbb6Sk8RZVn8g+Pmmu5ybw177RpsaGwpziyHeUsu4etrexYSWq3rwnIqzYCg==}
+  '@iconify/utils@2.1.25':
+    resolution: {integrity: sha512-Y+iGko8uv/Fz5bQLLJyNSZGOdMW0G7cnlEX1CiNcKsRXX9cq/y/vwxrIAtLCZhKHr3m0VJmsjVPsvnM4uX8YLg==}

  '@intlify/core-base@9.2.2':
    resolution: {integrity: sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==}
@ -3467,6 +3485,10 @@ packages:
  '@js-sdsl/ordered-map@4.4.2':
    resolution: {integrity: sha512-iUKgm52T8HOE/makSxjqoWhe95ZJA1/G1sYsGev2JDKUSS14KAgg1LHb+Ba+IPow0xflbnSkOsZcO08C7w1gYw==}

+  '@jsdevtools/ez-spawn@3.0.4':
+    resolution: {integrity: sha512-f5DRIOZf7wxogefH03RjMPMdBF7ADTWUMoOs9kaJo06EfwF+aFhMZMDZxHg/Xe12hptN9xoZjGso2fdjapBRIA==}
+    engines: {node: '>=10'}
+
  '@jsdevtools/ono@7.1.3':
    resolution: {integrity: sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==}

@ -5902,6 +5924,11 @@ packages:
    engines: {node: '>=0.4.0'}
    hasBin: true

+  acorn@8.12.1:
+    resolution: {integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
  address@1.2.2:
    resolution: {integrity: sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==}
    engines: {node: '>= 10.0.0'}
@ -6753,6 +6780,9 @@ packages:
    engines: {node: ^14.13.0 || >=16.0.0}
    hasBin: true

+  confbox@0.1.7:
+    resolution: {integrity: sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==}
+
  config-chain@1.1.13:
    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}

@ -9627,10 +9657,6 @@ packages:
      enquirer:
        optional: true

-  local-pkg@0.4.3:
-    resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
-    engines: {node: '>=14'}
-
  local-pkg@0.5.0:
    resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
    engines: {node: '>=14'}
@ -9798,6 +9824,9 @@ packages:
    resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==}
    engines: {node: '>=12'}

+  magic-string@0.30.10:
+    resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
+
  magic-string@0.30.8:
    resolution: {integrity: sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==}
    engines: {node: '>=12'}
@ -9990,6 +10019,10 @@ packages:
    resolution: {integrity: sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==}
    engines: {node: '>=16 || 14 >=14.17'}

+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
  minimist@1.2.8:
    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}

@ -10072,6 +10105,9 @@ packages:
  mlly@1.4.2:
    resolution: {integrity: sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==}

+  mlly@1.7.1:
+    resolution: {integrity: sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==}
+
  mobx-react-lite@3.4.3:
    resolution: {integrity: sha512-NkJREyFTSUXR772Qaai51BnE1voWx56LOL80xG7qkZr6vo8vEaLF3sz1JNUVh+rxmUzxYaqOhfuxTfqUh0FXUg==}
    peerDependencies:
@ -10708,6 +10744,9 @@ packages:
  pathe@1.1.1:
    resolution: {integrity: sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==}

+  pathe@1.1.2:
+    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
+
  pathval@1.1.1:
    resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}

@ -10853,6 +10892,9 @@ packages:
  pkg-types@1.0.3:
    resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}

+  pkg-types@1.1.3:
+    resolution: {integrity: sha512-+JrgthZG6m3ckicaOB74TwQ+tBWsFl3qVQg7mN8ulwSOElJ7gBhKzj2VkCPnZ4NlF6kEquYU+RIYNVAvzd54UA==}
+
  plimit-lit@1.4.1:
    resolution: {integrity: sha512-bK14ePAod0XWhXwjT6XvYfjcQ9PbCUkZXnDCAKRMZTJCaDIV9VFya1S/I+3WSbpdR8uBhCDh8TS4lQ/JQvhNFA==}

@ -12539,6 +12581,9 @@ packages:
  ufo@1.3.2:
    resolution: {integrity: sha512-o+ORpgGwaYQXgqGDwd+hkS4PuZ3QnmqMMxRuajK/a38L6fTpcE5GPIfrf+L/KemFzfUpeUQc1rRS1iDBozvnFA==}

+  ufo@1.5.4:
+    resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
+
  uglify-js@3.17.4:
    resolution: {integrity: sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==}
    engines: {node: '>=0.8.0'}
@ -12623,8 +12668,8 @@ packages:
    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
    engines: {node: '>= 0.8'}

-  unplugin-icons@0.17.4:
-    resolution: {integrity: sha512-PHLxjBx3ZV8RUBvfMafFl8uWH88jHeZgOijcRpkwgne7y2Ovx7WI0Ltzzw3fjZQ7dGaDhB8udyKVdm9N2S6BIw==}
+  unplugin-icons@0.19.0:
+    resolution: {integrity: sha512-u5g/gIZPZEj1wUGEQxe9nzftOSqmblhusc+sL3cawIRoIt/xWpE6XYcPOfAeFTYNjSbRrX/3QiX89PFiazgU1w==}
    peerDependencies:
      '@svgr/core': '>=7.0.0'
      '@svgx/core': ^1.0.1
@ -12643,9 +12688,26 @@ packages:
      vue-template-es2015-compiler:
        optional: true

+  unplugin-vue-components@0.27.3:
+    resolution: {integrity: sha512-5wg7lbdg5ZcrAQNzyYK+6gcg/DG8K6rO+f5YeuvqGHs/PhpapBvpA4O/0ex/pFthE5WgRk43iWuRZEMLVsdz4Q==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/parser': ^7.15.8
+      '@nuxt/kit': ^3.2.2
+      vue: 2 || 3
+    peerDependenciesMeta:
+      '@babel/parser':
+        optional: true
+      '@nuxt/kit':
+        optional: true
+
  unplugin@1.0.1:
    resolution: {integrity: sha512-aqrHaVBWW1JVKBHmGo33T5TxeL0qWzfvjWokObHA9bYmN7eNDkwOxmLjhioHl9878qDFMAaT51XNroRyuz7WxA==}

+  unplugin@1.11.0:
+    resolution: {integrity: sha512-3r7VWZ/webh0SGgJScpWl2/MRCZK5d3ZYFcNaeci/GQ7Teop7zf0Nl2pUuz7G21BwPd9pcUPOC5KmJ2L3WgC5g==}
+    engines: {node: '>=14.0.0'}
+
  unplugin@1.5.1:
    resolution: {integrity: sha512-0QkvG13z6RD+1L1FoibQqnvTwVBXvS4XSPwAyinVgoOCl2jAgwzdUKmEj05o4Lt8xwQI85Hb6mSyYkcAGwZPew==}

@ -12859,8 +12921,8 @@ packages:
  vue-component-type-helpers@2.0.19:
    resolution: {integrity: sha512-cN3f1aTxxKo4lzNeQAkVopswuImUrb5Iurll9Gaw5cqpnbTAxtEMM1mgi6ou4X79OCyqYv1U1mzBHJkzmiK82w==}

-  vue-component-type-helpers@2.0.26:
-    resolution: {integrity: sha512-sO9qQ8oC520SW6kqlls0iqDak53gsTVSrYylajgjmkt1c0vcgjsGSy1KzlDrbEx8pm02IEYhlUkU5hCYf8rwtg==}
+  vue-component-type-helpers@2.0.28:
+    resolution: {integrity: sha512-hoK0UsKXrXDY9zdpdk+drqOqYHpPhbmfQUJ2mFYK57+l73mQxcYyCteQsolllwGaxhWihT077+OA/FR5ZPTceg==}

  vue-demi@0.14.5:
    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
@ -13310,7 +13372,11 @@ snapshots:
      execa: 5.1.1
      find-up: 5.0.0

-  '@antfu/utils@0.7.6': {}
+  '@antfu/install-pkg@0.3.3':
+    dependencies:
+      '@jsdevtools/ez-spawn': 3.0.4
+
+  '@antfu/utils@0.7.10': {}

  '@anthropic-ai/sdk@0.21.1(encoding@0.1.13)':
    dependencies:
@ -15896,16 +15962,22 @@ snapshots:
    dependencies:
      '@iconify/types': 2.0.0

+  '@iconify/json@2.2.230':
+    dependencies:
+      '@iconify/types': 2.0.0
+      pathe: 1.1.2
+
  '@iconify/types@2.0.0': {}

-  '@iconify/utils@2.1.11':
+  '@iconify/utils@2.1.25':
    dependencies:
      '@antfu/install-pkg': 0.1.1
-      '@antfu/utils': 0.7.6
+      '@antfu/utils': 0.7.10
      '@iconify/types': 2.0.0
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@8.1.1)
      kolorist: 1.8.0
-      local-pkg: 0.4.3
+      local-pkg: 0.5.0
+      mlly: 1.7.1
    transitivePeerDependencies:
      - supports-color

@ -16167,6 +16239,13 @@ snapshots:

  '@js-sdsl/ordered-map@4.4.2': {}

+  '@jsdevtools/ez-spawn@3.0.4':
+    dependencies:
+      call-me-maybe: 1.0.1
+      cross-spawn: 7.0.3
+      string-argv: 0.3.1
+      type-detect: 4.0.8
+
  '@jsdevtools/ono@7.1.3': {}

  '@jsplumb/browser-ui@5.13.2':
@ -18330,7 +18409,7 @@ snapshots:
      ts-dedent: 2.2.0
      type-fest: 2.19.0
      vue: 3.4.21(typescript@5.5.2)
-      vue-component-type-helpers: 2.0.26
+      vue-component-type-helpers: 2.0.28
    transitivePeerDependencies:
      - encoding
      - prettier
@ -19417,6 +19496,8 @@ snapshots:

  acorn@8.11.2: {}

+  acorn@8.12.1: {}
+
  address@1.2.2: {}

  adm-zip@0.5.10: {}
@ -20408,6 +20489,8 @@ snapshots:
      tree-kill: 1.2.2
      yargs: 17.7.2

+  confbox@0.1.7: {}
+
  config-chain@1.1.13:
    dependencies:
      ini: 1.3.8
@ -23866,8 +23949,6 @@ snapshots:
    optionalDependencies:
      enquirer: 2.3.6

-  local-pkg@0.4.3: {}
-
  local-pkg@0.5.0:
    dependencies:
      mlly: 1.4.2
@ -24015,6 +24096,10 @@ snapshots:
    dependencies:
      '@jridgewell/sourcemap-codec': 1.4.15

+  magic-string@0.30.10:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.15
+
  magic-string@0.30.8:
    dependencies:
      '@jridgewell/sourcemap-codec': 1.4.15
@ -24223,6 +24308,10 @@ snapshots:
    dependencies:
      brace-expansion: 2.0.1

+  minimatch@9.0.5:
+    dependencies:
+      brace-expansion: 2.0.1
+
  minimist@1.2.8: {}

  minipass-collect@1.0.2:
@ -24314,6 +24403,13 @@ snapshots:
      pkg-types: 1.0.3
      ufo: 1.3.2

+  mlly@1.7.1:
+    dependencies:
+      acorn: 8.12.1
+      pathe: 1.1.2
+      pkg-types: 1.1.3
+      ufo: 1.5.4
+
  mobx-react-lite@3.4.3(mobx@6.12.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
    dependencies:
      mobx: 6.12.0
@ -25011,6 +25107,8 @@ snapshots:

  pathe@1.1.1: {}

+  pathe@1.1.2: {}
+
  pathval@1.1.1: {}

  pause-stream@0.0.11:
@ -25159,6 +25257,12 @@ snapshots:
      mlly: 1.4.2
      pathe: 1.1.1

+  pkg-types@1.1.3:
+    dependencies:
+      confbox: 0.1.7
+      mlly: 1.7.1
+      pathe: 1.1.2
+
  plimit-lit@1.4.1:
    dependencies:
      queue-lit: 1.5.0
@ -27173,6 +27277,8 @@ snapshots:

  ufo@1.3.2: {}

+  ufo@1.5.4: {}
+
  uglify-js@3.17.4:
    optional: true

@ -27249,21 +27355,40 @@ snapshots:

  unpipe@1.0.0: {}

-  unplugin-icons@0.17.4(@vue/compiler-sfc@3.4.21)(vue-template-compiler@2.7.14):
+  unplugin-icons@0.19.0(@vue/compiler-sfc@3.4.21)(vue-template-compiler@2.7.14):
    dependencies:
-      '@antfu/install-pkg': 0.1.1
-      '@antfu/utils': 0.7.6
-      '@iconify/utils': 2.1.11
-      debug: 4.3.4(supports-color@8.1.1)
+      '@antfu/install-pkg': 0.3.3
+      '@antfu/utils': 0.7.10
+      '@iconify/utils': 2.1.25
+      debug: 4.3.5(supports-color@8.1.1)
      kolorist: 1.8.0
      local-pkg: 0.5.0
-      unplugin: 1.5.1
+      unplugin: 1.11.0
    optionalDependencies:
      '@vue/compiler-sfc': 3.4.21
      vue-template-compiler: 2.7.14
    transitivePeerDependencies:
      - supports-color

+  unplugin-vue-components@0.27.3(@babel/parser@7.24.6)(rollup@4.18.0)(vue@3.4.21(typescript@5.5.2)):
+    dependencies:
+      '@antfu/utils': 0.7.10
+      '@rollup/pluginutils': 5.1.0(rollup@4.18.0)
+      chokidar: 3.5.2
+      debug: 4.3.5(supports-color@8.1.1)
+      fast-glob: 3.3.2
+      local-pkg: 0.5.0
+      magic-string: 0.30.10
+      minimatch: 9.0.5
+      mlly: 1.7.1
+      unplugin: 1.11.0
+      vue: 3.4.21(typescript@5.5.2)
+    optionalDependencies:
+      '@babel/parser': 7.24.6
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+
  unplugin@1.0.1:
    dependencies:
      acorn: 8.11.2
@ -27271,6 +27396,13 @@ snapshots:
      webpack-sources: 3.2.3
      webpack-virtual-modules: 0.5.0

+  unplugin@1.11.0:
+    dependencies:
+      acorn: 8.12.1
+      chokidar: 3.5.2
+      webpack-sources: 3.2.3
+      webpack-virtual-modules: 0.6.1
+
  unplugin@1.5.1:
    dependencies:
      acorn: 8.11.2
@ -27487,7 +27619,7 @@ snapshots:

  vue-component-type-helpers@2.0.19: {}

-  vue-component-type-helpers@2.0.26: {}
+  vue-component-type-helpers@2.0.28: {}

  vue-demi@0.14.5(vue@3.4.21(typescript@5.5.2)):
    dependencies: