n8n-editor-ui 1.89.0 → 1.90.0

package/dist/assets/{WorkflowsView-B_70hdtG.js → WorkflowsView-D-hAQD_u.js}

@@ -1,11 +1,11 @@
-import { P as ProjectCardBadge } from "./ProjectCardBadge-Ca29o2Nu.js";
-import { d as defineComponent, W as useRoute, b as useRouter, gk as useFoldersStore, r as ref, q as computed, c as useI18n, ad as ProjectTypes, V as VIEWS, h as resolveComponent, i as createElementBlock, g as openBlock, j as createVNode, w as withCtx, n as normalizeClass, k as createBaseVNode, f as createCommentVNode, e as createBlock, m as unref, gl as ResourceType, J as withModifiers, l as createTextVNode, t as toDisplayString, cU as _sfc_main$4, _ as _export_sfc, a4 as useProjectsStore, aW as createSlots, a as useToast, p as useSettingsStore, L as useUIStore, u as useUsersStore, U as useWorkflowsStore, a9 as getResourcePermissions, fa as dateformat, aC as withDirectives, aD as vShow, ah as WORKFLOW_SHARE_MODAL_KEY, ai as useTelemetry, ap as DUPLICATE_MODAL_KEY, ak as useMessage, al as MODAL_CONFIRM, gm as PROJECT_MOVE_RESOURCE_MODAL, gn as FOLDER_NAME_ILLEGAL_CHARACTERS_REGEX, go as ILLEGAL_FOLDER_CHARACTERS, gp as FOLDER_NAME_ONLY_DOTS_REGEX, gq as FOLDER_NAME_MAX_LENGTH, a3 as useSourceControlStore, aw as usePostHog, E as useTagsStore, dc as useUsageStore, gr as useInsightsStore, a6 as useDocumentTitle, K as useDebounce, ac as EnterpriseEditionFeature, gs as EASY_AI_WORKFLOW_EXPERIMENT, I as watch, o as onMounted, C as createEventBus, y as onBeforeUnmount, A as debounce, gt as PROJECT_ROOT, d9 as N8nInputLabel, af as _sfc_main$5, gu as N8nSelect, F as Fragment, D as renderList, gv as _sfc_main$6, cZ as N8nHeading, b9 as N8nText, gw as N8nCard, bE as N8nIcon, gx as DEFAULT_WORKFLOW_PAGE_SIZE, df as COMMUNITY_PLUS_ENROLLMENT_MODAL } from "./index-B-Y7sDIj.js";
-import { R as ResourcesListLayout } from "./ResourcesListLayout-CjpS9ho7.js";
-import { W as WorkflowActivator } from "./WorkflowActivator-E1mdIOaC.js";
-import { u as useOverview, P as ProjectHeader } from "./ProjectHeader-Dq3fVC-9.js";
-import { g as getEasyAiWorkflowJson } from "./easyAiWorkflowUtils-CCJdF1g3.js";
-import { I as InsightsSummary } from "./InsightsSummary-BzdlA4Dr.js";
-import "./useWorkflowActivate-CX21vkKl.js";
+import { P as ProjectCardBadge } from "./ProjectCardBadge-DCaP7hKC.js";
+import { d as defineComponent, W as useRoute, b as useRouter, gO as useFoldersStore, r as ref, q as computed, c as useI18n, ad as ProjectTypes, V as VIEWS, h as resolveComponent, i as createElementBlock, g as openBlock, j as createVNode, w as withCtx, n as normalizeClass, k as createBaseVNode, f as createCommentVNode, e as createBlock, m as unref, gP as ResourceType, J as withModifiers, l as createTextVNode, t as toDisplayString, cV as _sfc_main$4, _ as _export_sfc, a4 as useProjectsStore, aW as createSlots, a as useToast, p as useSettingsStore, L as useUIStore, u as useUsersStore, U as useWorkflowsStore, a9 as getResourcePermissions, fC as dateformat, aC as withDirectives, aD as vShow, ah as WORKFLOW_SHARE_MODAL_KEY, ai as useTelemetry, ap as DUPLICATE_MODAL_KEY, ak as useMessage, al as MODAL_CONFIRM, gQ as PROJECT_MOVE_RESOURCE_MODAL, gR as FOLDER_NAME_ILLEGAL_CHARACTERS_REGEX, gS as ILLEGAL_FOLDER_CHARACTERS, gT as FOLDER_NAME_ONLY_DOTS_REGEX, gU as FOLDER_NAME_MAX_LENGTH, a3 as useSourceControlStore, aw as usePostHog, E as useTagsStore, dd as useUsageStore, gV as useInsightsStore, a6 as useDocumentTitle, K as useDebounce, ac as EnterpriseEditionFeature, gW as EASY_AI_WORKFLOW_EXPERIMENT, I as watch, o as onMounted, C as createEventBus, y as onBeforeUnmount, A as debounce, gX as PROJECT_ROOT, da as N8nInputLabel, af as _sfc_main$5, d$ as N8nSelect, F as Fragment, D as renderList, d_ as _sfc_main$6, c_ as N8nHeading, bd as N8nText, gY as N8nCard, bD as N8nIcon, gZ as Draggable, g_ as DEFAULT_WORKFLOW_PAGE_SIZE, dg as COMMUNITY_PLUS_ENROLLMENT_MODAL } from "./index-CZWHLhkg.js";
+import { R as ResourcesListLayout } from "./ResourcesListLayout-FV3K-wCE.js";
+import { W as WorkflowActivator } from "./WorkflowActivator-DAF5odet.js";
+import { u as useOverview, P as ProjectHeader } from "./ProjectHeader-DALMab_q.js";
+import { g as getEasyAiWorkflowJson } from "./easyAiWorkflowUtils-CDbznryH.js";
+import { I as InsightsSummary } from "./InsightsSummary-UVWGYFlb.js";
+import "./useWorkflowActivate-B-_DuLXg.js";
 const FOLDER_LIST_ITEM_ACTIONS = {
   OPEN: "open",
   CREATE: "create",
@@ -304,13 +304,16 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "FolderBreadcrumbs",
   props: {
     actions: {},
-    breadcrumbs: {}
+    breadcrumbs: {},
+    hiddenItemsTrigger: { default: "click" }
   },
-  emits: ["itemSelected", "action"],
+  emits: ["itemSelected", "action", "itemDrop", "projectDrop"],
   setup(__props, { emit: __emit }) {
+    const props = __props;
     const emit = __emit;
     const i18n = useI18n();
     const projectsStore = useProjectsStore();
+    const foldersStore = useFoldersStore();
     const currentProject = computed(() => projectsStore.currentProject);
     const projectName = computed(() => {
       if (currentProject.value?.type === ProjectTypes.Personal) {
@@ -318,35 +321,72 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
       return currentProject.value?.name;
     });
+    const isDragging = computed(() => {
+      return foldersStore.draggedElement !== null;
+    });
     const onItemSelect = (item) => {
       emit("itemSelected", item);
     };
     const onAction = (action) => {
       emit("action", action);
     };
+    const onProjectMouseUp = () => {
+      if (!isDragging.value || !currentProject.value?.name) {
+        return;
+      }
+      emit("projectDrop", currentProject.value.id, currentProject.value.name);
+    };
+    const onProjectHover = () => {
+      if (!isDragging.value || !currentProject.value?.name) {
+        return;
+      }
+      foldersStore.activeDropTarget = {
+        type: "project",
+        id: currentProject.value?.id,
+        name: currentProject.value?.name
+      };
+    };
+    const onItemHover = (item) => {
+      if (!isDragging.value) {
+        return;
+      }
+      foldersStore.activeDropTarget = {
+        type: "folder",
+        id: item.id,
+        name: item.label
+      };
+    };
     return (_ctx, _cache) => {
       const _component_N8nText = resolveComponent("N8nText");
       const _component_n8n_link = resolveComponent("n8n-link");
       const _component_n8n_breadcrumbs = resolveComponent("n8n-breadcrumbs");
       const _component_n8n_action_toggle = resolveComponent("n8n-action-toggle");
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(_ctx.$style.container)
+        class: normalizeClass({ [_ctx.$style.container]: true, [_ctx.$style["dragging"]]: isDragging.value }),
+        "data-test-id": "folder-breadcrumbs"
       }, [
         _ctx.breadcrumbs.visibleItems ? (openBlock(), createBlock(_component_n8n_breadcrumbs, {
           key: 0,
+          "drag-active": isDragging.value,
+          "onUpdate:dragActive": _cache[1] || (_cache[1] = ($event) => isDragging.value = $event),
           items: _ctx.breadcrumbs.visibleItems,
           "highlight-last-item": false,
           "path-truncated": _ctx.breadcrumbs.visibleItems[0].parentFolder,
           "hidden-items": _ctx.breadcrumbs.hiddenItems,
+          "hidden-items-trigger": props.hiddenItemsTrigger,
           "data-test-id": "folder-list-breadcrumbs",
-          onItemSelected: onItemSelect
+          onItemSelected: onItemSelect,
+          onItemHover,
+          onItemDrop: _cache[2] || (_cache[2] = ($event) => emit("itemDrop", $event))
         }, createSlots({ _: 2 }, [
           currentProject.value ? {
             name: "prepend",
             fn: withCtx(() => [
               createBaseVNode("div", {
-                class: normalizeClass(_ctx.$style["home-project"]),
-                "data-test-id": "home-project"
+                class: normalizeClass({ [_ctx.$style["home-project"]]: true, [_ctx.$style.dragging]: isDragging.value }),
+                "data-test-id": "home-project",
+                onMouseenter: onProjectHover,
+                onMouseup: _cache[0] || (_cache[0] = ($event) => isDragging.value ? onProjectMouseUp() : null)
               }, [
                 createVNode(_component_n8n_link, {
                   to: `/projects/${currentProject.value.id}`
@@ -364,11 +404,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 1
                 }, 8, ["to"])
-              ], 2)
+              ], 34)
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["items", "path-truncated", "hidden-items"])) : createCommentVNode("", true),
+        ]), 1032, ["drag-active", "items", "path-truncated", "hidden-items", "hidden-items-trigger"])) : createCommentVNode("", true),
         _ctx.breadcrumbs.visibleItems ? (openBlock(), createBlock(_component_n8n_action_toggle, {
           key: 1,
           actions: _ctx.actions,
@@ -381,11 +421,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container = "_container_4mxjz_123";
+const container = "_container_n9y3q_123";
+const dragging$1 = "_dragging_n9y3q_138";
 const style0$2 = {
   container,
-  "action-toggle": "_action-toggle_4mxjz_128",
-  "home-project": "_home-project_4mxjz_132"
+  "action-toggle": "_action-toggle_n9y3q_128",
+  "home-project": "_home-project_n9y3q_132",
+  dragging: dragging$1
 };
 const cssModules$2 = {
   "$style": style0$2
@@ -791,8 +833,18 @@ const cssModules$1 = {
   "$style": style0$1
 };
 const WorkflowCard = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1]]);
+function isDropTarget(target) {
+  return target.type === "folder" || target.type === "project";
+}
+function isValidResourceType(value) {
+  return ["folder", "workflow", "project"].includes(value);
+}
 function useFolders() {
   const i18n = useI18n();
+  const foldersStore = useFoldersStore();
+  const isDragging = computed(() => {
+    return foldersStore.draggedElement !== null;
+  });
   function validateFolderName(folderName) {
     if (FOLDER_NAME_ILLEGAL_CHARACTERS_REGEX.test(folderName)) {
       return i18n.baseText("folders.invalidName.invalidCharacters.message", {
@@ -819,8 +871,84 @@ function useFolders() {
     }
     return true;
   }
+  function onDragStart(el) {
+    const eventTarget = el.closest("[data-target]");
+    if (!eventTarget) return;
+    const dragTarget = getDragAndDropTarget(eventTarget);
+    if (!dragTarget) return;
+    if (dragTarget.type === "folder" || dragTarget.type === "workflow") {
+      foldersStore.draggedElement = {
+        type: dragTarget.type,
+        id: dragTarget.id,
+        name: dragTarget.name
+      };
+    }
+  }
+  function onDragEnd() {
+    foldersStore.draggedElement = null;
+    foldersStore.activeDropTarget = null;
+  }
+  function onDragEnter(event) {
+    const eventTarget = event.target;
+    if (!eventTarget || !isDragging.value) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const dragTarget = getDragAndDropTarget(eventTarget);
+    if (!dragTarget || dragTarget.type !== "folder") return;
+    foldersStore.activeDropTarget = {
+      type: dragTarget.type,
+      id: dragTarget.id,
+      name: dragTarget.name
+    };
+  }
+  function resetDropTarget() {
+    foldersStore.activeDropTarget = null;
+  }
+  function getDragAndDropTarget(el) {
+    const dragTarget = el.closest("[data-target]");
+    if (!dragTarget) return null;
+    const targetResource = dragTarget.dataset.target;
+    const targetId = dragTarget.dataset.resourceid;
+    const targetName = dragTarget.dataset.resourcename;
+    if (!targetResource || !targetId || !targetName || !isValidResourceType(targetResource))
+      return null;
+    return {
+      type: targetResource,
+      id: targetId,
+      name: targetName
+    };
+  }
+  function handleDrop(event) {
+    const eventTarget = event.target;
+    if (!eventTarget || !isDragging.value) return {};
+    event.preventDefault();
+    const draggedResourceId = foldersStore.draggedElement?.id;
+    const draggedResourceType = foldersStore.draggedElement?.type;
+    const draggedResourceName = foldersStore.draggedElement?.name;
+    if (!draggedResourceId || !draggedResourceType || !draggedResourceName) return {};
+    onDragEnd();
+    const dropTarget = getDragAndDropTarget(eventTarget);
+    if (!dropTarget || !isDropTarget(dropTarget)) return {};
+    return {
+      draggedResource: {
+        type: draggedResourceType,
+        id: draggedResourceId,
+        name: draggedResourceName
+      },
+      dropTarget: {
+        type: dropTarget.type,
+        id: dropTarget.id,
+        name: dropTarget.name
+      }
+    };
+  }
   return {
-    validateFolderName
+    validateFolderName,
+    onDragStart,
+    onDragEnd,
+    onDragEnter,
+    resetDropTarget,
+    handleDrop
   };
 }
 const _hoisted_1 = { key: 0 };
@@ -950,6 +1078,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const currentFolder = computed(() => {
       return currentFolderId.value ? foldersStore.breadcrumbsCache[currentFolderId.value] : null;
     });
+    const isDragging = computed(() => {
+      return foldersStore.draggedElement !== null;
+    });
+    const isDragNDropEnabled = computed(() => {
+      return !readOnlyEnv.value && hasPermissionToUpdateFolders.value;
+    });
     const hasPermissionToCreateFolders = computed(() => {
       if (!currentProject.value) return false;
       return getResourcePermissions(currentProject.value.scopes).folder.create === true;
@@ -1365,6 +1499,76 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return { workflowCount: 0, subFolderCount: 0 };
       }
     };
+    const onFolderCardDrop = async (event) => {
+      const { draggedResource, dropTarget } = folderHelpers.handleDrop(event);
+      if (!draggedResource || !dropTarget) return;
+      await moveResourceOnDrop(draggedResource, dropTarget);
+    };
+    const onBreadCrumbsItemDrop = async (item) => {
+      if (!foldersStore.draggedElement) return;
+      await moveResourceOnDrop(
+        {
+          id: foldersStore.draggedElement.id,
+          type: foldersStore.draggedElement.type,
+          name: foldersStore.draggedElement.name
+        },
+        {
+          id: item.id,
+          type: "folder",
+          name: item.label
+        }
+      );
+      folderHelpers.onDragEnd();
+    };
+    const moveFolderToProjectRoot = async (id, name) => {
+      if (!foldersStore.draggedElement) return;
+      await moveResourceOnDrop(
+        {
+          id: foldersStore.draggedElement.id,
+          type: foldersStore.draggedElement.type,
+          name: foldersStore.draggedElement.name
+        },
+        {
+          id,
+          type: "project",
+          name
+        }
+      );
+      folderHelpers.onDragEnd();
+    };
+    const moveResourceOnDrop = async (draggedResource, dropTarget) => {
+      if (draggedResource.type === "folder") {
+        await moveFolder({
+          folder: { id: draggedResource.id, name: draggedResource.name },
+          newParent: { id: dropTarget.id, name: dropTarget.name, type: dropTarget.type },
+          options: { skipFetch: true, skipNavigation: true }
+        });
+        workflowsAndFolders.value = workflowsAndFolders.value.filter(
+          (folder) => folder.id !== draggedResource.id
+        );
+        const targetFolder = getFolderListItem(dropTarget.id);
+        if (targetFolder) {
+          targetFolder.subFolderCount += 1;
+        }
+      } else if (draggedResource.type === "workflow") {
+        await onWorkflowMoved({
+          workflow: {
+            id: draggedResource.id,
+            name: draggedResource.name,
+            oldParentId: currentFolderId.value ?? ""
+          },
+          newParent: { id: dropTarget.id, name: dropTarget.name, type: dropTarget.type },
+          options: { skipFetch: true }
+        });
+        workflowsAndFolders.value = workflowsAndFolders.value.filter(
+          (workflow) => workflow.id !== draggedResource.id
+        );
+        const targetFolder = getFolderListItem(dropTarget.id);
+        if (targetFolder) {
+          targetFolder.workflowCount += 1;
+        }
+      }
+    };
     const visibleBreadcrumbsItems = computed(() => {
       if (!currentFolder.value) return [];
       const items = [];
@@ -1659,7 +1863,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             folderId: payload.newParent.type === "project" ? void 0 : payload.newParent.id
           }
         }).href;
-        if (isCurrentFolder) {
+        if (isCurrentFolder && !payload.options?.skipNavigation) {
           void router.push(newFolderURL);
         } else {
           toast.showToast({
@@ -1675,7 +1879,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             },
             type: "success"
           });
-          await fetchWorkflows();
+          if (!payload.options?.skipFetch) {
+            await fetchWorkflows();
+          }
         }
       } catch (error) {
         toast.showError(error, i18n.baseText("folders.move.error.title"));
@@ -1712,7 +1918,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           parentFolderId: payload.newParent.type === "project" ? "0" : payload.newParent.id,
           versionId: workflowResource?.versionId
         });
-        await fetchWorkflows();
+        if (!payload.options?.skipFetch) {
+          await fetchWorkflows();
+        }
         toast.showToast({
           title: i18n.baseText("folders.move.workflow.success.title"),
           message: i18n.baseText("folders.move.workflow.success.message", {
@@ -1756,7 +1964,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(ResourcesListLayout, {
         filters: filters.value,
         "onUpdate:filters": [
-          _cache[2] || (_cache[2] = ($event) => filters.value = $event),
+          _cache[3] || (_cache[3] = ($event) => filters.value = $event),
           onFiltersUpdated
         ],
         "resource-key": "workflows",
@@ -1776,7 +1984,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "onUpdate:search": onSearchUpdated,
         "onUpdate:currentPage": setCurrentPage,
         "onUpdate:pageSize": setPageSize,
-        onSort: onSortUpdated
+        onSort: onSortUpdated,
+        onMouseleave: unref(folderHelpers).resetDropTarget
       }, createSlots({
         header: withCtx(() => [
           createVNode(ProjectHeader, { onCreateFolder: createFolderInCurrent }, {
@@ -1845,36 +2054,111 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createVNode(_component_FolderBreadcrumbs, {
               breadcrumbs: mainBreadcrumbs.value,
               actions: mainBreadcrumbsActions.value,
+              "hidden-items-trigger": isDragging.value ? "hover" : "click",
               onItemSelected: onBreadcrumbItemClick,
-              onAction: onBreadCrumbsAction
-            }, null, 8, ["breadcrumbs", "actions"])
+              onAction: onBreadCrumbsAction,
+              onItemDrop: onBreadCrumbsItemDrop,
+              onProjectDrop: moveFolderToProjectRoot
+            }, null, 8, ["breadcrumbs", "actions", "hidden-items-trigger"])
           ], 2)) : createCommentVNode("", true)
         ]),
         item: withCtx(({ item: data, index }) => [
-          data.resourceType === "folder" ? (openBlock(), createBlock(_component_FolderCard, {
+          data.resourceType === "folder" ? (openBlock(), createBlock(Draggable, {
             key: `folder-${index}`,
-            data,
-            actions: folderCardActions.value,
-            "read-only": readOnlyEnv.value || !hasPermissionToDeleteFolders.value && !hasPermissionToCreateFolders.value,
-            "personal-project": unref(projectsStore).personalProject,
-            "show-ownership-badge": showCardsBadge.value,
-            class: "mb-2xs",
-            onAction: onFolderCardAction
-          }, null, 8, ["data", "actions", "read-only", "personal-project", "show-ownership-badge"])) : (openBlock(), createBlock(WorkflowCard, {
+            disabled: !isDragNDropEnabled.value,
+            type: "move",
+            "target-data-key": "folder",
+            onDragstart: unref(folderHelpers).onDragStart,
+            onDragend: unref(folderHelpers).onDragEnd
+          }, {
+            preview: withCtx(() => [
+              createVNode(unref(N8nCard), null, {
+                default: withCtx(() => [
+                  createVNode(unref(N8nText), {
+                    tag: "h2",
+                    bold: ""
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(data.name), 1)
+                    ]),
+                    _: 2
+                  }, 1024)
+                ]),
+                _: 2
+              }, 1024)
+            ]),
+            default: withCtx(() => [
+              createVNode(_component_FolderCard, {
+                data,
+                actions: folderCardActions.value,
+                "read-only": readOnlyEnv.value || !hasPermissionToDeleteFolders.value && !hasPermissionToCreateFolders.value,
+                "personal-project": unref(projectsStore).personalProject,
+                "data-resourceid": data.id,
+                "data-resourcename": data.name,
+                class: normalizeClass([{
+                  ["mb-2xs"]: true,
+                  [_ctx.$style["drag-active"]]: isDragging.value,
+                  [_ctx.$style.dragging]: unref(foldersStore).draggedElement?.type === "folder" && unref(foldersStore).draggedElement?.id === data.id,
+                  [_ctx.$style["drop-active"]]: unref(foldersStore).activeDropTarget?.id === data.id
+                }, "mb-2xs"]),
+                "show-ownership-badge": showCardsBadge.value,
+                "data-target": "folder",
+                onAction: onFolderCardAction,
+                onMouseenter: unref(folderHelpers).onDragEnter,
+                onMouseup: onFolderCardDrop
+              }, null, 8, ["data", "actions", "read-only", "personal-project", "data-resourceid", "data-resourcename", "class", "show-ownership-badge", "onMouseenter"])
+            ]),
+            _: 2
+          }, 1032, ["disabled", "onDragstart", "onDragend"])) : (openBlock(), createBlock(Draggable, {
             key: `workflow-${index}`,
-            "data-test-id": "resources-list-item-workflow",
-            class: "mb-2xs",
-            data,
-            "workflow-list-event-bus": unref(workflowListEventBus),
-            "read-only": readOnlyEnv.value,
-            "show-ownership-badge": showCardsBadge.value,
-            "onClick:tag": onClickTag,
-            "onWorkflow:deleted": onWorkflowDeleted,
-            "onWorkflow:moved": fetchWorkflows,
-            "onWorkflow:duplicated": fetchWorkflows,
-            "onWorkflow:activeToggle": onWorkflowActiveToggle,
-            "onAction:moveToFolder": moveWorkflowToFolder
-          }, null, 8, ["data", "workflow-list-event-bus", "read-only", "show-ownership-badge"]))
+            disabled: !isDragNDropEnabled.value,
+            type: "move",
+            "target-data-key": "workflow",
+            onDragstart: unref(folderHelpers).onDragStart,
+            onDragend: unref(folderHelpers).onDragEnd
+          }, {
+            preview: withCtx(() => [
+              createVNode(unref(N8nCard), null, {
+                default: withCtx(() => [
+                  createVNode(unref(N8nText), {
+                    tag: "h2",
+                    bold: ""
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(data.name), 1)
+                    ]),
+                    _: 2
+                  }, 1024)
+                ]),
+                _: 2
+              }, 1024)
+            ]),
+            default: withCtx(() => [
+              createVNode(WorkflowCard, {
+                "data-test-id": "resources-list-item-workflow",
+                class: normalizeClass({
+                  ["mb-2xs"]: true,
+                  [_ctx.$style["drag-active"]]: isDragging.value,
+                  [_ctx.$style.dragging]: unref(foldersStore).draggedElement?.type === "workflow" && unref(foldersStore).draggedElement?.id === data.id
+                }),
+                data,
+                "workflow-list-event-bus": unref(workflowListEventBus),
+                "read-only": readOnlyEnv.value,
+                "data-resourceid": data.id,
+                "data-resourcename": data.name,
+                "show-ownership-badge": showCardsBadge.value,
+                "data-target": "workflow",
+                "onClick:tag": onClickTag,
+                "onWorkflow:deleted": onWorkflowDeleted,
+                "onWorkflow:moved": fetchWorkflows,
+                "onWorkflow:duplicated": fetchWorkflows,
+                "onWorkflow:activeToggle": onWorkflowActiveToggle,
+                "onAction:moveToFolder": moveWorkflowToFolder,
+                onMouseenter: _cache[1] || (_cache[1] = ($event) => isDragging.value ? unref(folderHelpers).resetDropTarget() : {})
+              }, null, 8, ["class", "data", "workflow-list-event-bus", "read-only", "data-resourceid", "data-resourcename", "show-ownership-badge"])
+            ]),
+            _: 2
+          }, 1032, ["disabled", "onDragstart", "onDragend"]))
         ]),
         empty: withCtx(() => [
           createBaseVNode("div", _hoisted_5, [
@@ -1933,7 +2217,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               class: normalizeClass(_ctx.$style.emptyStateCard),
               hoverable: "",
               "data-test-id": "easy-ai-workflow-card",
-              onClick: _cache[1] || (_cache[1] = ($event) => openAIWorkflow("empty"))
+              onClick: _cache[2] || (_cache[2] = ($event) => openAIWorkflow("empty"))
             }, {
               default: withCtx(() => [
                 createVNode(unref(N8nIcon), {
@@ -2053,23 +2337,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["filters", "resources", "shareable", "disabled", "resources-refreshing", "custom-page-size", "total-items", "has-empty-state"]);
+      ]), 1032, ["filters", "resources", "shareable", "disabled", "resources-refreshing", "custom-page-size", "total-items", "has-empty-state", "onMouseleave"]);
     };
   }
 });
-const actionsContainer = "_actionsContainer_f2oet_123";
-const emptyStateCard = "_emptyStateCard_f2oet_139";
-const emptyStateCardIcon = "_emptyStateCardIcon_f2oet_152";
+const actionsContainer = "_actionsContainer_10ayo_123";
+const emptyStateCard = "_emptyStateCard_10ayo_139";
+const emptyStateCardIcon = "_emptyStateCardIcon_10ayo_152";
+const dragging = "_dragging_10ayo_187";
 const style0 = {
   actionsContainer,
-  "easy-ai-workflow-callout": "_easy-ai-workflow-callout_f2oet_128",
-  "callout-trailing-content": "_callout-trailing-content_f2oet_133",
+  "easy-ai-workflow-callout": "_easy-ai-workflow-callout_10ayo_128",
+  "callout-trailing-content": "_callout-trailing-content_10ayo_133",
   emptyStateCard,
   emptyStateCardIcon,
-  "add-folder-button": "_add-folder-button_f2oet_161",
-  "breadcrumbs-container": "_breadcrumbs-container_f2oet_166",
-  "breadcrumbs-loading": "_breadcrumbs-loading_f2oet_172",
-  "empty-folder-container": "_empty-folder-container_f2oet_178"
+  "add-folder-button": "_add-folder-button_10ayo_161",
+  "breadcrumbs-container": "_breadcrumbs-container_10ayo_166",
+  "breadcrumbs-loading": "_breadcrumbs-loading_10ayo_172",
+  "empty-folder-container": "_empty-folder-container_10ayo_178",
+  "drag-active": "_drag-active_10ayo_182",
+  dragging,
+  "drop-active": "_drop-active_10ayo_194"
 };
 const cssModules = {
   "$style": style0

package/dist/assets/{chartjs.utils-3n4f3zmI.js → chartjs.utils-DoypjRBD.js}

@@ -1,5 +1,5 @@
-import { gg as useCssVar, i2 as merge } from "./index-B-Y7sDIj.js";
-import { s as smartDecimal } from "./InsightsSummary-BzdlA4Dr.js";
+import { gK as useCssVar, ic as merge } from "./index-CZWHLhkg.js";
+import { s as smartDecimal } from "./InsightsSummary-UVWGYFlb.js";
 const generateLinearGradient = (ctx, height) => {
   const gradient = ctx.createLinearGradient(0, 0, 0, height);
   gradient.addColorStop(0, "rgba(255, 111,92, 1)");

package/dist/assets/{dateFormatter-C1XlsLk2.js → dateFormatter-BPEQYXYl.js}

@@ -1,4 +1,4 @@
-import { fa as dateformat } from "./index-B-Y7sDIj.js";
+import { fC as dateformat } from "./index-CZWHLhkg.js";
 const convertToDisplayDateComponents = (fullDate) => {
   const mask = `d mmm${new Date(fullDate).getFullYear() === (/* @__PURE__ */ new Date()).getFullYear() ? "" : ", yyyy"}#HH:MM:ss`;
   const formattedDate = dateformat(fullDate, mask);

package/dist/assets/{easyAiWorkflowUtils-CCJdF1g3.js → easyAiWorkflowUtils-CDbznryH.js}

@@ -1,4 +1,4 @@
-import { bu as NodeConnectionTypes } from "./index-B-Y7sDIj.js";
+import { bl as NodeConnectionTypes } from "./index-CZWHLhkg.js";
 const getEasyAiWorkflowJson = () => {
   return {
     name: "Demo: My first AI Agent in n8n",

package/dist/assets/{global-link-actions-B6woWi9D.js → global-link-actions-By-BzwKw.js}

@@ -1,4 +1,4 @@
-import { C as createEventBus } from "./index-B-Y7sDIj.js";
+import { C as createEventBus } from "./index-CZWHLhkg.js";
 const globalLinkActionsEventBus = createEventBus();
 export {
   globalLinkActionsEventBus as g

package/dist/assets/{import-curl-BlRUX0EU.js → import-curl-Cu66geT8.js}

@@ -1,4 +1,4 @@
-import { C as createEventBus } from "./index-B-Y7sDIj.js";
+import { C as createEventBus } from "./index-CZWHLhkg.js";
 const importCurlEventBus = createEventBus();
 export {
   importCurlEventBus as i

package/dist/assets/{index-BHGYFXFB.js → index-BhqWgx7T.js}

@@ -1,4 +1,4 @@
-import { f$ as Chart$1, d as defineComponent, g0 as shallowRef, as as h, g1 as LineController, g2 as version, r as ref, o as onMounted, y as onBeforeUnmount, I as watch, d4 as toRaw, g3 as isProxy, g4 as BarController } from "./index-B-Y7sDIj.js";
+import { gu as Chart$1, d as defineComponent, gv as shallowRef, as as h, gw as LineController, gx as version, r as ref, o as onMounted, y as onBeforeUnmount, I as watch, d5 as toRaw, gy as isProxy, gz as BarController } from "./index-CZWHLhkg.js";
 const CommonProps = {
   data: {
     type: Object,