n8n-editor-ui 1.109.1-exp.0 → 1.109.2

package/dist/assets/{NodeCreator-DPZTIfnb.js → NodeCreator-CbADkgNL.js}

@@ -1,6 +1,114 @@
-import { d as defineComponent, d1 as reactive, o as onMounted, bp as useExternalHooks, W as onBeforeUnmount, c1 as toRefs, h as createElementBlock, g as openBlock, n as normalizeClass, j as createBaseVNode, f as createCommentVNode, i as createVNode, N as N8nIcon, _ as _export_sfc, l as unref, hU as REGULAR_NODE_CREATOR_VIEW, F as Fragment, X as renderSlot, hV as useViewStacks, r as ref, ej as useCommunityNodesStore, ad as useNodeTypesStore, x as computed, u as useUsersStore, e as createBlock, p as N8nText, w as withCtx, k as createTextVNode, t as toDisplayString, hW as _sfc_main$b, a9 as Tooltip, eW as i18n, hX as captureException, hY as useKeyboardNavigation, hb as useActions, d3 as useNodeCreatorStore, bm as useCalloutHelpers, hZ as CUSTOM_API_CALL_KEY, h_ as TRIGGER_NODE_CREATOR_VIEW, h$ as isNodePreviewKey, i0 as OPEN_AI_NODE_TYPE, i1 as OPEN_AI_NODE_MESSAGE_ASSISTANT_TYPE, al as useTelemetry, i2 as getActiveViewCallouts, cc as resolveDirective, i3 as ItemsRenderer, br as createSlots, i4 as withMemo, i5 as CategorizedItemsRenderer, c as useI18n, z as N8nCallout, b2 as withDirectives, cL as InfoTip, B as withModifiers, i6 as CommunityNodeFooter, i7 as HTTP_REQUEST_NODE_TYPE, fo as createStaticVNode, C as N8nLink, i8 as REQUEST_NODE_FORM_URL, i9 as filterAndSearchNodes, ia as getRootSearchCallouts, hz as WEBHOOK_NODE_TYPE, ib as PRE_BUILT_AGENTS_COLLECTION, ic as camelCase, id as shouldShowCommunityNodeDetails, fe as isCommunityPackageName, ie as prepareCommunityNodeDetailsViewStack, hG as getNodeIconSource, ig as transformNodeType, ih as AINodesView, ii as AIView, ij as RegularView, ik as TriggerView, il as flattenCreateElements, im as HITL_SUBCATEGORY, io as getHumanInTheLoopActions, ip as AI_OTHERS_NODE_CREATOR_VIEW, iq as AI_NODE_CREATOR_VIEW, a as useToast, bX as NodeIcon, ir as OfficialIcon, q as N8nButton, d4 as useCredentialsStore, is as removePreviewToken, P as useDebounce, c7 as onUnmounted, a7 as watch, e1 as N8nNotice, c2 as normalizeProps, K as mergeProps, hB as Transition, it as AI_EVALUATION, iu as AI_UNCATEGORIZED_CATEGORY, Q as useUIStore, fc as useAssistantStore, d7 as useBuilderStore, bq as onClickOutside, aa as _sfc_main$c, ap as normalizeStyle, iv as SlideTransition, dB as DRAG_EVENT_DATA_KEY, iw as useActionsGenerator } from "./index-Cz15Tiv9.js";
-const _hoisted_1$5 = ["placeholder", "value"];
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+import { d as defineComponent, h as createElementBlock, g as openBlock, K as mergeProps, j as createBaseVNode, X as renderSlot, f as createCommentVNode, n as normalizeClass, e as createBlock, t as toDisplayString, l as unref, hR as ElTag, w as withCtx, k as createTextVNode, N as N8nIcon, D as useI18n, i as createVNode, _ as _export_sfc, d0 as reactive, o as onMounted, bo as useExternalHooks, W as onBeforeUnmount, c0 as toRefs, d2 as useNodeCreatorStore, h8 as useActions, hS as useViewStacks, hs as useNodeType, ad as useNodeTypesStore, r as ref, x as computed, hT as DEFAULT_SUBCATEGORY, hU as CREDENTIAL_ONLY_NODE_PREFIX, c as useI18n$1, hV as shouldShowCommunityNodeDetails, hW as HITL_SUBCATEGORY, fc as isCommunityPackageName, hX as isNodePreviewKey, hY as removePreviewToken, cb as resolveDirective, bq as createSlots, a9 as Tooltip, b2 as withDirectives, ej as COMMUNITY_NODES_INSTALLATION_DOCS_URL, b3 as vShow, ap as normalizeStyle, bW as NodeIcon, B as withModifiers, dA as DRAG_EVENT_DATA_KEY, al as useTelemetry, hZ as camelCase, h_ as N8nNodeIcon, hw as WEBHOOK_NODE_TYPE, h$ as getNewNodePosition, i0 as DEFAULT_NODE_SIZE, u as useUsersStore, p as N8nText, q as N8nButton, i1 as useKeyboardNavigation, a1 as useWorkflowsStore, a7 as watch, c1 as normalizeProps, c2 as guardReactiveProps, F as Fragment, A as renderList, c6 as onUnmounted, dD as N8nLoading, i2 as REGULAR_NODE_CREATOR_VIEW, ei as useCommunityNodesStore, i3 as _sfc_main$o, eV as i18n, i4 as captureException, i5 as useCalloutHelpers, i6 as CUSTOM_API_CALL_KEY, i7 as TRIGGER_NODE_CREATOR_VIEW, i8 as OPEN_AI_NODE_TYPE, i9 as OPEN_AI_NODE_MESSAGE_ASSISTANT_TYPE, ia as getActiveViewCallouts, ib as withMemo, z as N8nCallout, cK as InfoTip, ic as CommunityNodeFooter, id as HTTP_REQUEST_NODE_TYPE, fm as createStaticVNode, C as N8nLink, ie as REQUEST_NODE_FORM_URL, ig as filterAndSearchNodes, ih as getRootSearchCallouts, ii as PRE_BUILT_AGENTS_COLLECTION, ij as prepareCommunityNodeDetailsViewStack, hD as getNodeIconSource, ik as transformNodeType, il as AINodesView, im as AIView, io as RegularView, ip as TriggerView, iq as flattenCreateElements, ir as getHumanInTheLoopActions, is as AI_OTHERS_NODE_CREATOR_VIEW, it as AI_NODE_CREATOR_VIEW, a as useToast, d3 as useCredentialsStore, P as useDebounce, e0 as N8nNotice, hy as Transition, iu as AI_EVALUATION, iv as AI_UNCATEGORIZED_CATEGORY, Q as useUIStore, fa as useAssistantStore, d6 as useBuilderStore, bp as onClickOutside, aa as _sfc_main$p, iw as SlideTransition, ix as useActionsGenerator } from "./index-CeNA_ukL.js";
+const _hoisted_1$b = ["textContent"];
+const _hoisted_2$4 = ["textContent"];
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  __name: "NodeCreatorNode",
+  props: {
+    active: { type: Boolean },
+    isAi: { type: Boolean },
+    isTrigger: { type: Boolean },
+    description: {},
+    tag: {},
+    title: {},
+    showActionArrow: { type: Boolean },
+    isOfficial: { type: Boolean }
+  },
+  emits: ["tooltipClick"],
+  setup(__props) {
+    const { t } = useI18n();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        class: {
+          [_ctx.$style.creatorNode]: true,
+          [_ctx.$style.hasAction]: !_ctx.showActionArrow
+        }
+      }, _ctx.$attrs), [
+        createBaseVNode("div", {
+          class: normalizeClass(_ctx.$style.nodeIcon)
+        }, [
+          renderSlot(_ctx.$slots, "icon", {}, void 0, true)
+        ], 2),
+        createBaseVNode("div", null, [
+          createBaseVNode("div", {
+            class: normalizeClass(_ctx.$style.details)
+          }, [
+            createBaseVNode("span", {
+              class: normalizeClass(_ctx.$style.name),
+              "data-test-id": "node-creator-item-name",
+              textContent: toDisplayString(_ctx.title)
+            }, null, 10, _hoisted_1$b),
+            _ctx.tag ? (openBlock(), createBlock(unref(ElTag), {
+              key: 0,
+              class: normalizeClass(_ctx.$style.tag),
+              size: "small",
+              round: "",
+              type: _ctx.tag.type ?? "success"
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(_ctx.tag.text), 1)
+              ]),
+              _: 1
+            }, 8, ["class", "type"])) : createCommentVNode("", true),
+            _ctx.isTrigger ? (openBlock(), createBlock(unref(N8nIcon), {
+              key: 1,
+              icon: "bolt-filled",
+              size: "xsmall",
+              title: unref(t)("nodeCreator.nodeItem.triggerIconTitle"),
+              class: normalizeClass(_ctx.$style.triggerIcon)
+            }, null, 8, ["title", "class"])) : createCommentVNode("", true),
+            renderSlot(_ctx.$slots, "extraDetails", {}, void 0, true)
+          ], 2),
+          _ctx.description ? (openBlock(), createElementBlock("p", {
+            key: 0,
+            "data-test-id": "node-creator-item-description",
+            class: normalizeClass(_ctx.$style.description),
+            textContent: toDisplayString(_ctx.description)
+          }, null, 10, _hoisted_2$4)) : createCommentVNode("", true)
+        ]),
+        renderSlot(_ctx.$slots, "dragContent", {}, void 0, true),
+        _ctx.showActionArrow ? (openBlock(), createElementBlock("button", {
+          key: 0,
+          class: normalizeClass(_ctx.$style.panelIcon)
+        }, [
+          createVNode(unref(N8nIcon), {
+            icon: "arrow-right",
+            size: "large"
+          })
+        ], 2)) : createCommentVNode("", true)
+      ], 16);
+    };
+  }
+});
+const creatorNode = "_creatorNode_190ig_123";
+const hasAction = "_hasAction_190ig_130";
+const panelIcon = "_panelIcon_190ig_134";
+const tag = "_tag_190ig_138";
+const tooltipIcon$1 = "_tooltipIcon_190ig_161";
+const details = "_details_190ig_167";
+const nodeIcon$5 = "_nodeIcon_190ig_173";
+const name$1 = "_name_190ig_178";
+const description$1 = "_description_190ig_184";
+const aiIcon = "_aiIcon_190ig_192";
+const triggerIcon$1 = "_triggerIcon_190ig_196";
+const style0$l = {
+  creatorNode,
+  hasAction,
+  panelIcon,
+  tag,
+  tooltipIcon: tooltipIcon$1,
+  details,
+  nodeIcon: nodeIcon$5,
+  name: name$1,
+  description: description$1,
+  aiIcon,
+  triggerIcon: triggerIcon$1
+};
+const cssModules$l = {
+  "$style": style0$l
+};
+const NodeCreatorNode = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__cssModules", cssModules$l], ["__scopeId", "data-v-878aee66"]]);
+const _hoisted_1$a = ["placeholder", "value"];
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "SearchBar",
   props: {
     placeholder: { default: "" },
@@ -61,7 +169,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             "data-test-id": "node-creator-search-bar",
             tabindex: "0",
             onInput
-          }, null, 42, _hoisted_1$5)
+          }, null, 42, _hoisted_1$a)
         ], 2),
         _ctx.modelValue.length > 0 ? (openBlock(), createElementBlock("div", {
           key: 0,
@@ -79,24 +187,1115 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
 });
 const searchContainer = "_searchContainer_w19t7_123";
 const prefix = "_prefix_w19t7_139";
-const active$1 = "_active_w19t7_144";
+const active$3 = "_active_w19t7_144";
 const text = "_text_w19t7_148";
 const suffix = "_suffix_w19t7_164";
 const clear = "_clear_w19t7_170";
 const clickable = "_clickable_w19t7_183";
-const style0$8 = {
+const style0$k = {
   searchContainer,
   prefix,
-  active: active$1,
+  active: active$3,
   text,
   suffix,
   clear,
   clickable
 };
+const cssModules$k = {
+  "$style": style0$k
+};
+const SearchBar = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__cssModules", cssModules$k]]);
+const _hoisted_1$9 = {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em"
+};
+function render$1(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$9, _cache[0] || (_cache[0] = [
+    createBaseVNode("path", {
+      fill: "currentColor",
+      d: "m23 12l-2.44-2.78l.34-3.68l-3.61-.82l-1.89-3.18L12 3L8.6 1.54L6.71 4.72l-3.61.81l.34 3.68L1 12l2.44 2.78l-.34 3.69l3.61.82l1.89 3.18L12 21l3.4 1.46l1.89-3.18l3.61-.82l-.34-3.68zm-13 5l-4-4l1.41-1.41L10 14.17l6.59-6.59L18 9z"
+    }, null, -1)
+  ]));
+}
+const OfficialIcon = { name: "mdi-verified", render: render$1 };
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  __name: "NodeItem",
+  props: {
+    nodeType: {},
+    subcategory: { default: void 0 },
+    active: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const i18n2 = useI18n$1();
+    const telemetry = useTelemetry();
+    const { actions } = useNodeCreatorStore();
+    const { getAddedNodesAndConnections } = useActions();
+    const { activeViewStack } = useViewStacks();
+    const { isSubNodeType } = useNodeType({
+      nodeType: props.nodeType
+    });
+    const nodeTypesStore = useNodeTypesStore();
+    const dragging = ref(false);
+    const draggablePosition = ref({ x: -100, y: -100 });
+    const draggableDataTransfer2 = ref(null);
+    const description2 = computed(() => {
+      if (isCommunityNodePreview.value) {
+        return props.nodeType.description;
+      }
+      if (isSendAndWaitCategory.value) {
+        return "";
+      }
+      if (props.subcategory === DEFAULT_SUBCATEGORY && !props.nodeType.name.startsWith(CREDENTIAL_ONLY_NODE_PREFIX)) {
+        return "";
+      }
+      return i18n2.headerText({
+        key: `headers.${shortNodeType.value}.description`,
+        fallback: props.nodeType.description
+      });
+    });
+    const showActionArrow = computed(() => {
+      if (shouldShowCommunityNodeDetails(isCommunityNode.value, activeViewStack)) {
+        return true;
+      }
+      return hasActions.value && !isSendAndWaitCategory.value;
+    });
+    const isSendAndWaitCategory = computed(() => activeViewStack.subcategory === HITL_SUBCATEGORY);
+    const dataTestId = computed(
+      () => hasActions.value ? "node-creator-action-item" : "node-creator-node-item"
+    );
+    const hasActions = computed(() => {
+      return nodeActions.value.length > 1 && !activeViewStack.hideActions;
+    });
+    const nodeActions = computed(() => {
+      return actions[props.nodeType.name] || [];
+    });
+    const shortNodeType = computed(() => i18n2.shortNodeType(props.nodeType.name) || "");
+    const draggableStyle = computed(() => ({
+      top: `${draggablePosition.value.y}px`,
+      left: `${draggablePosition.value.x}px`
+    }));
+    const isCommunityNode = computed(() => isCommunityPackageName(props.nodeType.name));
+    const isCommunityNodePreview = computed(() => isNodePreviewKey(props.nodeType.name));
+    const displayName = computed(() => {
+      const trimmedDisplayName = props.nodeType.displayName.trimEnd();
+      return i18n2.headerText({
+        key: `headers.${shortNodeType.value}.displayName`,
+        fallback: hasActions.value ? trimmedDisplayName.replace("Trigger", "") : trimmedDisplayName
+      });
+    });
+    const isTrigger = computed(() => {
+      return props.nodeType.group.includes("trigger") && !hasActions.value;
+    });
+    const communityNodeType = computed(() => {
+      return nodeTypesStore.communityNodeType(removePreviewToken(props.nodeType.name));
+    });
+    const isOfficial = computed(() => {
+      return communityNodeType.value?.isOfficialNode ?? false;
+    });
+    const author = computed(() => {
+      return communityNodeType.value?.displayName ?? displayName.value;
+    });
+    const tag2 = computed(() => {
+      if (props.nodeType.tag) {
+        return { text: props.nodeType.tag };
+      }
+      if (description2.value.toLowerCase().includes("deprecated")) {
+        return { text: i18n2.baseText("nodeCreator.nodeItem.deprecated"), type: "info" };
+      }
+      return void 0;
+    });
+    function onDragStart(event) {
+      if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = "copy";
+        event.dataTransfer.dropEffect = "copy";
+        event.dataTransfer.setDragImage(draggableDataTransfer2.value, 0, 0);
+        event.dataTransfer.setData(
+          DRAG_EVENT_DATA_KEY,
+          JSON.stringify(getAddedNodesAndConnections([{ type: props.nodeType.name }]))
+        );
+      }
+      dragging.value = true;
+    }
+    function onDragEnd() {
+      dragging.value = false;
+      setTimeout(() => {
+        draggablePosition.value = { x: -100, y: -100 };
+      }, 300);
+    }
+    function onCommunityNodeTooltipClick(event) {
+      if (event.target.localName === "a") {
+        telemetry.track("user clicked cnr docs link", { source: "nodes panel node" });
+      }
+    }
+    return (_ctx, _cache) => {
+      const _component_n8n_icon = N8nIcon;
+      const _component_N8nNodeCreatorNode = NodeCreatorNode;
+      const _directive_n8n_html = resolveDirective("n8n-html");
+      return openBlock(), createBlock(_component_N8nNodeCreatorNode, {
+        draggable: !showActionArrow.value,
+        class: normalizeClass(_ctx.$style.nodeItem),
+        description: description2.value,
+        title: displayName.value,
+        "show-action-arrow": showActionArrow.value,
+        "is-trigger": isTrigger.value,
+        "is-official": isOfficial.value,
+        "data-test-id": dataTestId.value,
+        tag: tag2.value,
+        onDragstart: onDragStart,
+        onDragend: onDragEnd
+      }, createSlots({
+        icon: withCtx(() => [
+          unref(isSubNodeType) ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(_ctx.$style.subNodeBackground)
+          }, null, 2)) : createCommentVNode("", true),
+          createVNode(NodeIcon, {
+            class: normalizeClass(_ctx.$style.nodeIcon),
+            "node-type": _ctx.nodeType,
+            "color-default": "var(--color-foreground-xdark)"
+          }, null, 8, ["class", "node-type"])
+        ]),
+        dragContent: withCtx(() => [
+          withDirectives(createBaseVNode("div", {
+            ref_key: "draggableDataTransfer",
+            ref: draggableDataTransfer2,
+            class: normalizeClass(_ctx.$style.draggable),
+            style: normalizeStyle(draggableStyle.value)
+          }, [
+            createVNode(NodeIcon, {
+              "node-type": _ctx.nodeType,
+              size: 40,
+              shrink: false,
+              onClickCapture: _cache[0] || (_cache[0] = withModifiers(() => {
+              }, ["stop"])),
+              "color-default": "var(--color-foreground-xdark)"
+            }, null, 8, ["node-type"])
+          ], 6), [
+            [vShow, dragging.value]
+          ])
+        ]),
+        _: 2
+      }, [
+        isOfficial.value ? {
+          name: "extraDetails",
+          fn: withCtx(() => [
+            createVNode(unref(Tooltip), {
+              placement: "top",
+              "show-after": 500
+            }, {
+              content: withCtx(() => [
+                createTextVNode(toDisplayString(unref(i18n2).baseText("generic.officialNode.tooltip", { interpolate: { author: author.value } })), 1)
+              ]),
+              default: withCtx(() => [
+                createVNode(unref(OfficialIcon), {
+                  class: normalizeClass([_ctx.$style.icon, _ctx.$style.official])
+                }, null, 8, ["class"])
+              ]),
+              _: 1
+            })
+          ]),
+          key: "0"
+        } : isCommunityNode.value && !isCommunityNodePreview.value && !unref(activeViewStack)?.communityNodeDetails ? {
+          name: "extraDetails",
+          fn: withCtx(() => [
+            createVNode(unref(Tooltip), {
+              placement: "top",
+              "show-after": 500
+            }, {
+              content: withCtx(() => [
+                withDirectives(createBaseVNode("p", {
+                  class: normalizeClass(_ctx.$style.communityNodeIcon),
+                  onClick: onCommunityNodeTooltipClick
+                }, null, 2), [
+                  [
+                    _directive_n8n_html,
+                    unref(i18n2).baseText("generic.communityNode.tooltip", {
+                      interpolate: {
+                        packageName: _ctx.nodeType.name.split(".")[0],
+                        docURL: unref(COMMUNITY_NODES_INSTALLATION_DOCS_URL)
+                      }
+                    })
+                  ]
+                ])
+              ]),
+              default: withCtx(() => [
+                createVNode(_component_n8n_icon, {
+                  size: "small",
+                  class: normalizeClass(_ctx.$style.icon),
+                  icon: "box"
+                }, null, 8, ["class"])
+              ]),
+              _: 1
+            })
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["draggable", "class", "description", "title", "show-action-arrow", "is-trigger", "is-official", "data-test-id", "tag"]);
+    };
+  }
+});
+const nodeItem = "_nodeItem_b8za2_123";
+const nodeIcon$4 = "_nodeIcon_b8za2_131";
+const subNodeBackground = "_subNodeBackground_b8za2_135";
+const communityNodeIcon = "_communityNodeIcon_b8za2_145";
+const draggable$1 = "_draggable_b8za2_149";
+const draggableDataTransfer$1 = "_draggableDataTransfer_b8za2_163";
+const icon$1 = "_icon_b8za2_168";
+const official = "_official_b8za2_173";
+const style0$j = {
+  nodeItem,
+  nodeIcon: nodeIcon$4,
+  subNodeBackground,
+  communityNodeIcon,
+  draggable: draggable$1,
+  draggableDataTransfer: draggableDataTransfer$1,
+  icon: icon$1,
+  official
+};
+const cssModules$j = {
+  "$style": style0$j
+};
+const NodeItem = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__cssModules", cssModules$j]]);
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
+  __name: "SubcategoryItem",
+  props: {
+    item: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const i18n2 = useI18n$1();
+    const subcategoryName = computed(() => camelCase(props.item.subcategory || props.item.title));
+    return (_ctx, _cache) => {
+      const _component_n8n_node_icon = N8nNodeIcon;
+      const _component_n8n_node_creator_node = NodeCreatorNode;
+      return openBlock(), createBlock(_component_n8n_node_creator_node, {
+        class: normalizeClass(_ctx.$style.subCategory),
+        title: unref(i18n2).baseText(`nodeCreator.subcategoryNames.${subcategoryName.value}`),
+        "is-trigger": false,
+        description: unref(i18n2).baseText(`nodeCreator.subcategoryDescriptions.${subcategoryName.value}`),
+        "show-action-arrow": true
+      }, {
+        icon: withCtx(() => [
+          createVNode(_component_n8n_node_icon, mergeProps({
+            type: "icon",
+            name: _ctx.item.icon,
+            circle: false,
+            "show-tooltip": false,
+            "use-updated-icons": true
+          }, _ctx.item.iconProps), null, 16, ["name"])
+        ]),
+        _: 1
+      }, 8, ["class", "title", "description"]);
+    };
+  }
+});
+const subCategory = "_subCategory_1x5a1_123";
+const style0$i = {
+  subCategory
+};
+const cssModules$i = {
+  "$style": style0$i
+};
+const SubcategoryItem = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__cssModules", cssModules$i]]);
+const _hoisted_1$8 = ["textContent"];
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  __name: "LabelItem",
+  props: {
+    item: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.label)
+      }, [
+        createBaseVNode("span", {
+          class: normalizeClass(_ctx.$style.name),
+          textContent: toDisplayString(_ctx.item.key)
+        }, null, 10, _hoisted_1$8)
+      ], 2);
+    };
+  }
+});
+const label$1 = "_label_p81gr_123";
+const style0$h = {
+  label: label$1
+};
+const cssModules$h = {
+  "$style": style0$h
+};
+const LabelItem = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__cssModules", cssModules$h]]);
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  __name: "ActionItem",
+  props: {
+    nodeType: {},
+    action: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const telemetry = useTelemetry();
+    const { getActionData, getAddedNodesAndConnections, setAddedNodeActionParameters } = useActions();
+    const { activeViewStack } = useViewStacks();
+    const state = reactive({
+      dragging: false,
+      draggablePosition: {
+        x: -100,
+        y: -100
+      },
+      storeWatcher: null,
+      draggableDataTransfer: null
+    });
+    const draggableStyle = computed(() => ({
+      top: `${state.draggablePosition.y}px`,
+      left: `${state.draggablePosition.x}px`
+    }));
+    const actionData = computed(() => getActionData(props.action));
+    const isTriggerAction = (action2) => action2.name?.toLowerCase().includes("trigger") || action2.name === WEBHOOK_NODE_TYPE;
+    function onDragStart(event) {
+      document.body.addEventListener("dragover", onDragOver);
+      const { pageX: x, pageY: y } = event;
+      if (event.dataTransfer && actionData.value.key) {
+        event.dataTransfer.effectAllowed = "copy";
+        event.dataTransfer.dropEffect = "copy";
+        event.dataTransfer.setDragImage(state.draggableDataTransfer, 0, 0);
+        event.dataTransfer.setData(
+          DRAG_EVENT_DATA_KEY,
+          JSON.stringify(getAddedNodesAndConnections([{ type: actionData.value.key }]))
+        );
+        if (telemetry) {
+          state.storeWatcher = setAddedNodeActionParameters(
+            actionData.value,
+            telemetry,
+            activeViewStack.rootView
+          );
+        }
+        document.body.addEventListener("dragend", onDragEnd);
+      }
+      state.dragging = true;
+      state.draggablePosition = { x, y };
+    }
+    function onDragOver(event) {
+      if (!state.dragging || event.pageX === 0 && event.pageY === 0) {
+        return;
+      }
+      const [x, y] = getNewNodePosition(
+        [],
+        [event.pageX - DEFAULT_NODE_SIZE[0] / 2, event.pageY - DEFAULT_NODE_SIZE[1] / 2]
+      );
+      state.draggablePosition = { x, y };
+    }
+    function onDragEnd() {
+      if (state.storeWatcher) state.storeWatcher();
+      document.body.removeEventListener("dragend", onDragEnd);
+      document.body.removeEventListener("dragover", onDragOver);
+      state.dragging = false;
+      setTimeout(() => {
+        state.draggablePosition = { x: -100, y: -100 };
+      }, 300);
+    }
+    const { draggableDataTransfer: draggableDataTransfer2, dragging } = toRefs(state);
+    return (_ctx, _cache) => {
+      const _component_n8n_node_creator_node = NodeCreatorNode;
+      return openBlock(), createBlock(_component_n8n_node_creator_node, {
+        draggable: "",
+        class: normalizeClass(_ctx.$style.action),
+        title: _ctx.action.displayName,
+        "is-trigger": isTriggerAction(_ctx.action),
+        "data-keyboard-nav": "true",
+        onDragstart: onDragStart,
+        onDragend: onDragEnd
+      }, {
+        dragContent: withCtx(() => [
+          createBaseVNode("div", {
+            ref_key: "draggableDataTransfer",
+            ref: draggableDataTransfer2,
+            class: normalizeClass(_ctx.$style.draggableDataTransfer)
+          }, null, 2),
+          withDirectives(createBaseVNode("div", {
+            class: normalizeClass(_ctx.$style.draggable),
+            style: normalizeStyle(draggableStyle.value)
+          }, [
+            createVNode(NodeIcon, {
+              "node-type": _ctx.nodeType,
+              size: 40,
+              shrink: false,
+              onClickCapture: _cache[0] || (_cache[0] = withModifiers(() => {
+              }, ["stop"]))
+            }, null, 8, ["node-type"])
+          ], 6), [
+            [vShow, unref(dragging)]
+          ])
+        ]),
+        icon: withCtx(() => [
+          createVNode(NodeIcon, { "node-type": _ctx.action }, null, 8, ["node-type"])
+        ]),
+        _: 1
+      }, 8, ["class", "title", "is-trigger"]);
+    };
+  }
+});
+const action$1 = "_action_1owvg_123";
+const nodeIcon$3 = "_nodeIcon_1owvg_135";
+const draggable = "_draggable_1owvg_139";
+const draggableDataTransfer = "_draggableDataTransfer_1owvg_153";
+const style0$g = {
+  action: action$1,
+  nodeIcon: nodeIcon$3,
+  draggable,
+  draggableDataTransfer
+};
+const cssModules$g = {
+  "$style": style0$g
+};
+const ActionItem = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__cssModules", cssModules$g]]);
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  __name: "ViewItem",
+  props: {
+    view: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_n8n_node_icon = N8nNodeIcon;
+      const _component_n8n_node_creator_node = NodeCreatorNode;
+      return openBlock(), createBlock(_component_n8n_node_creator_node, {
+        class: normalizeClass(_ctx.$style.view),
+        title: _ctx.view.title,
+        tag: _ctx.view.tag,
+        "is-trigger": false,
+        description: _ctx.view.description,
+        "show-action-arrow": true
+      }, {
+        icon: withCtx(() => [
+          createVNode(_component_n8n_node_icon, {
+            type: "icon",
+            name: _ctx.view.icon,
+            circle: false,
+            "show-tooltip": false,
+            "use-updated-icons": true
+          }, null, 8, ["name"])
+        ]),
+        _: 1
+      }, 8, ["class", "title", "tag", "description"]);
+    };
+  }
+});
+const view$1 = "_view_17lj9_123";
+const style0$f = {
+  view: view$1
+};
+const cssModules$f = {
+  "$style": style0$f
+};
+const ViewItem = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__cssModules", cssModules$f]]);
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  __name: "LinkItem",
+  props: {
+    link: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_n8n_node_icon = N8nNodeIcon;
+      const _component_n8n_node_creator_node = NodeCreatorNode;
+      return openBlock(), createBlock(_component_n8n_node_creator_node, {
+        class: normalizeClass(_ctx.$style.creatorLink),
+        title: _ctx.link.title,
+        "is-trigger": false,
+        description: _ctx.link.description,
+        tag: _ctx.link.tag,
+        "show-action-arrow": true
+      }, {
+        icon: withCtx(() => [
+          createVNode(_component_n8n_node_icon, {
+            type: "icon",
+            name: _ctx.link.icon,
+            circle: false,
+            "show-tooltip": false,
+            "use-updated-icons": true
+          }, null, 8, ["name"])
+        ]),
+        _: 1
+      }, 8, ["class", "title", "description", "tag"]);
+    };
+  }
+});
+const creatorLink = "_creatorLink_cptk0_123";
+const style0$e = {
+  creatorLink
+};
+const cssModules$e = {
+  "$style": style0$e
+};
+const LinkItem = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__cssModules", cssModules$e]]);
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  __name: "CommunityNodeInstallHint",
+  props: {
+    hint: {}
+  },
+  setup(__props) {
+    const isOwner = computed(() => useUsersStore().isInstanceOwner);
+    return (_ctx, _cache) => {
+      return isOwner.value ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(_ctx.$style.container)
+      }, [
+        createVNode(unref(N8nIcon), {
+          color: "text-light",
+          icon: "info",
+          size: "large"
+        }),
+        createVNode(unref(N8nText), {
+          color: "text-base",
+          size: "medium"
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(_ctx.hint), 1)
+          ]),
+          _: 1
+        })
+      ], 2)) : createCommentVNode("", true);
+    };
+  }
+});
+const container$4 = "_container_1dwo3_123";
+const style0$d = {
+  container: container$4
+};
+const cssModules$d = {
+  "$style": style0$d
+};
+const CommunityNodeInstallHint = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__cssModules", cssModules$d]]);
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  __name: "CommunityNodeItem",
+  props: {
+    isPreview: { type: Boolean }
+  },
+  setup(__props) {
+    const i18n2 = useI18n$1();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        _ctx.isPreview ? (openBlock(), createBlock(CommunityNodeInstallHint, {
+          key: 0,
+          hint: unref(i18n2).baseText("communityNodeItem.node.hint")
+        }, null, 8, ["hint"])) : (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: normalizeClass(_ctx.$style.marginLeft)
+        }, [
+          createVNode(unref(N8nButton), {
+            size: "medium",
+            type: "secondary",
+            icon: "plus",
+            label: unref(i18n2).baseText("communityNodeItem.label"),
+            outline: ""
+          }, null, 8, ["label"])
+        ], 2))
+      ]);
+    };
+  }
+});
+const marginLeft = "_marginLeft_1vvtt_123";
+const style0$c = {
+  marginLeft
+};
+const cssModules$c = {
+  "$style": style0$c
+};
+const CommunityNodeItem = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__cssModules", cssModules$c]]);
+const _hoisted_1$7 = ["textContent"];
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  __name: "CategoryItem",
+  props: {
+    expanded: { type: Boolean, default: true },
+    active: { type: Boolean },
+    count: {},
+    name: {},
+    isTrigger: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const categoryName = computed(() => {
+      const itemsCount = props.count || 0;
+      return itemsCount > 0 ? `${props.name} (${itemsCount})` : props.name;
+    });
+    return (_ctx, _cache) => {
+      const _component_n8n_icon = N8nIcon;
+      return openBlock(), createElementBlock("div", mergeProps({
+        class: _ctx.$style.categoryWrapper
+      }, _ctx.$attrs, {
+        "data-keyboard-nav": "true",
+        "data-test-id": "node-creator-category-item"
+      }), [
+        createBaseVNode("div", {
+          class: normalizeClass({ [_ctx.$style.category]: true, [_ctx.$style.active]: _ctx.active })
+        }, [
+          createBaseVNode("span", {
+            class: normalizeClass(_ctx.$style.name)
+          }, [
+            createBaseVNode("span", {
+              textContent: toDisplayString(categoryName.value)
+            }, null, 8, _hoisted_1$7),
+            _ctx.isTrigger ? (openBlock(), createBlock(_component_n8n_icon, {
+              key: 0,
+              icon: "bolt-filled",
+              size: "xsmall",
+              class: normalizeClass(_ctx.$style.triggerIcon)
+            }, null, 8, ["class"])) : createCommentVNode("", true),
+            renderSlot(_ctx.$slots, "default")
+          ], 2),
+          _ctx.expanded ? (openBlock(), createBlock(_component_n8n_icon, {
+            key: 0,
+            icon: "chevron-down",
+            color: "text-light",
+            size: "large"
+          })) : (openBlock(), createBlock(_component_n8n_icon, {
+            key: 1,
+            icon: "chevron-up",
+            color: "text-light",
+            size: "large"
+          }))
+        ], 2)
+      ], 16);
+    };
+  }
+});
+const triggerIcon = "_triggerIcon_1kyg0_123";
+const category$1 = "_category_1kyg0_128";
+const active$2 = "_active_1kyg0_149";
+const name = "_name_1kyg0_153";
+const style0$b = {
+  triggerIcon,
+  category: category$1,
+  active: active$2,
+  name
+};
+const cssModules$b = {
+  "$style": style0$b
+};
+const CategoryItem = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__cssModules", cssModules$b]]);
+const _hoisted_1$6 = ["data-category-collapsed"];
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  __name: "CategorizedItemsRenderer",
+  props: {
+    elements: { default: () => [] },
+    category: {},
+    disabled: { type: Boolean },
+    activeIndex: {},
+    isTriggerCategory: { type: Boolean },
+    mouseOverTooltip: {},
+    expanded: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const { popViewStack, activeViewStack } = useViewStacks();
+    const { registerKeyHook } = useKeyboardNavigation();
+    const { workflowId } = useWorkflowsStore();
+    const nodeCreatorStore = useNodeCreatorStore();
+    const i18n2 = useI18n$1();
+    const activeItemId = computed(() => useKeyboardNavigation()?.activeItemId);
+    const actionCount = computed(() => props.elements.filter(({ type }) => type === "action").length);
+    const expanded = ref(props.expanded ?? false);
+    const isPreview = computed(
+      () => activeViewStack.communityNodeDetails && !activeViewStack.communityNodeDetails.installed
+    );
+    function toggleExpanded() {
+      setExpanded(!expanded.value);
+    }
+    function setExpanded(isExpanded) {
+      const prev = expanded.value;
+      expanded.value = isExpanded;
+      if (expanded.value && !prev) {
+        nodeCreatorStore.onCategoryExpanded({
+          category_name: props.category,
+          workflow_id: workflowId
+        });
+      }
+    }
+    function arrowRight() {
+      if (expanded.value) return;
+      setExpanded(true);
+    }
+    function arrowLeft() {
+      if (!expanded.value) {
+        popViewStack();
+        return;
+      }
+      setExpanded(false);
+    }
+    watch(
+      () => props.elements,
+      () => {
+        setExpanded(true);
+      }
+    );
+    registerKeyHook(`CategoryRight_${props.category}`, {
+      keyboardKeys: ["ArrowRight"],
+      condition: (type, activeItemId2) => type === "category" && props.category === activeItemId2,
+      handler: arrowRight
+    });
+    registerKeyHook(`CategoryToggle_${props.category}`, {
+      keyboardKeys: ["Enter"],
+      condition: (type, activeItemId2) => type === "category" && props.category === activeItemId2,
+      handler: toggleExpanded
+    });
+    registerKeyHook(`CategoryLeft_${props.category}`, {
+      keyboardKeys: ["ArrowLeft"],
+      condition: (type, activeItemId2) => type === "category" && props.category === activeItemId2,
+      handler: arrowLeft
+    });
+    return (_ctx, _cache) => {
+      const _component_n8n_icon = N8nIcon;
+      const _component_n8n_tooltip = Tooltip;
+      const _directive_n8n_html = resolveDirective("n8n-html");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.categorizedItemsRenderer),
+        "data-category-collapsed": !expanded.value
+      }, [
+        createVNode(CategoryItem, {
+          class: normalizeClass(_ctx.$style.categoryItem),
+          name: _ctx.category,
+          disabled: _ctx.disabled,
+          active: activeItemId.value === _ctx.category,
+          count: actionCount.value,
+          expanded: expanded.value,
+          "is-trigger": _ctx.isTriggerCategory,
+          "data-keyboard-nav-type": "category",
+          "data-keyboard-nav-id": _ctx.category,
+          onClick: toggleExpanded
+        }, {
+          default: withCtx(() => [
+            _ctx.mouseOverTooltip ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass(_ctx.$style.mouseOverTooltip)
+            }, [
+              createVNode(_component_n8n_tooltip, {
+                placement: "top",
+                "popper-class": _ctx.$style.tooltipPopper
+              }, {
+                content: withCtx(() => [
+                  withDirectives(createBaseVNode("div", null, null, 512), [
+                    [_directive_n8n_html, _ctx.mouseOverTooltip]
+                  ])
+                ]),
+                default: withCtx(() => [
+                  createVNode(_component_n8n_icon, {
+                    icon: "circle-help",
+                    size: "small"
+                  })
+                ]),
+                _: 1
+              }, 8, ["popper-class"])
+            ], 2)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["class", "name", "disabled", "active", "count", "expanded", "is-trigger", "data-keyboard-nav-id"]),
+        expanded.value && actionCount.value > 0 && _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(_ctx.$style.contentSlot)
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 2)) : createCommentVNode("", true),
+        isPreview.value && expanded.value ? (openBlock(), createBlock(CommunityNodeInstallHint, {
+          key: 1,
+          hint: unref(i18n2).baseText("communityNodeItem.actions.hint")
+        }, null, 8, ["hint"])) : createCommentVNode("", true),
+        expanded.value ? (openBlock(), createBlock(ItemsRenderer, mergeProps({ key: 2 }, _ctx.$attrs, {
+          elements: _ctx.elements,
+          "is-trigger": _ctx.isTriggerCategory,
+          class: [{ [_ctx.$style.preview]: isPreview.value }]
+        }), {
+          default: withCtx(() => _cache[0] || (_cache[0] = [])),
+          empty: withCtx(() => [
+            renderSlot(_ctx.$slots, "empty", normalizeProps(guardReactiveProps({ elements: _ctx.elements })))
+          ]),
+          _: 3
+        }, 16, ["elements", "is-trigger", "class"])) : createCommentVNode("", true)
+      ], 10, _hoisted_1$6);
+    };
+  }
+});
+const mouseOverTooltip = "_mouseOverTooltip_wk4vn_123";
+const categorizedItemsRenderer = "_categorizedItemsRenderer_wk4vn_131";
+const tooltipPopper = "_tooltipPopper_wk4vn_135";
+const contentSlot = "_contentSlot_wk4vn_139";
+const preview$1 = "_preview_wk4vn_148";
+const style0$a = {
+  mouseOverTooltip,
+  categorizedItemsRenderer,
+  tooltipPopper,
+  contentSlot,
+  preview: preview$1
+};
+const cssModules$a = {
+  "$style": style0$a
+};
+const CategorizedItemsRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__cssModules", cssModules$a]]);
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  __name: "OpenTemplateItem",
+  props: {
+    openTemplate: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_n8n_node_icon = N8nNodeIcon;
+      const _component_NodeIcon = NodeIcon;
+      const _component_N8nNodeCreatorNode = NodeCreatorNode;
+      return openBlock(), createBlock(_component_N8nNodeCreatorNode, {
+        class: normalizeClass({ [_ctx.$style.creatorOpenTemplate]: true, [_ctx.$style.compact]: _ctx.openTemplate.compact }),
+        title: _ctx.openTemplate.title,
+        description: _ctx.openTemplate.description,
+        tag: _ctx.openTemplate.tag,
+        "show-action-arrow": true,
+        "is-trigger": false
+      }, createSlots({ _: 2 }, [
+        _ctx.openTemplate.icon ? {
+          name: "icon",
+          fn: withCtx(() => [
+            createVNode(_component_n8n_node_icon, {
+              type: "icon",
+              name: _ctx.openTemplate.icon,
+              circle: false,
+              "show-tooltip": false,
+              "use-updated-icons": true
+            }, null, 8, ["name"])
+          ]),
+          key: "0"
+        } : void 0,
+        _ctx.openTemplate.nodes ? {
+          name: "extraDetails",
+          fn: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.openTemplate.nodes, (node) => {
+              return openBlock(), createBlock(_component_NodeIcon, {
+                key: node.name,
+                "node-type": node,
+                size: 16,
+                "show-tooltip": true
+              }, null, 8, ["node-type"]);
+            }), 128))
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["class", "title", "description", "tag"]);
+    };
+  }
+});
+const creatorOpenTemplate = "_creatorOpenTemplate_1lmxs_123";
+const compact = "_compact_1lmxs_131";
+const style0$9 = {
+  creatorOpenTemplate,
+  compact
+};
+const cssModules$9 = {
+  "$style": style0$9
+};
+const OpenTemplateItem = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__cssModules", cssModules$9]]);
+const _hoisted_1$5 = { key: 0 };
+const _hoisted_2$3 = ["data-keyboard-nav-type", "data-keyboard-nav-id", "onClick"];
+const LAZY_LOAD_THRESHOLD = 20;
+const LAZY_LOAD_ITEMS_PER_TICK = 5;
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "ItemsRenderer",
+  props: {
+    elements: { default: () => [] },
+    activeIndex: {},
+    disabled: { type: Boolean },
+    lazyRender: { type: Boolean, default: true }
+  },
+  emits: ["selected", "dragstart", "dragend"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const renderedItems2 = ref([]);
+    const renderAnimationRequest = ref(0);
+    const { activeViewStack } = useViewStacks();
+    const activeItemId = computed(() => useKeyboardNavigation()?.activeItemId);
+    const communityNode = computed(() => activeViewStack.mode === "community-node");
+    const isPreview = computed(() => {
+      return communityNode.value && !activeViewStack.communityNodeDetails?.installed;
+    });
+    const highlightActiveItem = computed(() => {
+      if (activeViewStack.communityNodeDetails && !activeViewStack.communityNodeDetails.installed) {
+        return false;
+      }
+      return true;
+    });
+    function renderItems() {
+      if (props.elements.length <= LAZY_LOAD_THRESHOLD || !props.lazyRender) {
+        renderedItems2.value = props.elements;
+        return;
+      }
+      if (renderedItems2.value.length < props.elements.length) {
+        renderedItems2.value.push(
+          ...props.elements.slice(
+            renderedItems2.value.length,
+            renderedItems2.value.length + LAZY_LOAD_ITEMS_PER_TICK
+          )
+        );
+        renderAnimationRequest.value = window.requestAnimationFrame(renderItems);
+      }
+    }
+    function wrappedEmit(event, element, $e) {
+      if (props.disabled) return;
+      switch (event) {
+        case "dragstart":
+        case "dragend":
+        case "selected":
+          emit("selected", element, $e);
+          break;
+        default:
+          emit(event, element, $e);
+      }
+    }
+    function beforeEnter(el) {
+      el.style.height = "0";
+    }
+    function enter(el) {
+      el.style.height = `${el.scrollHeight}px`;
+    }
+    function beforeLeave(el) {
+      el.style.height = `${el.scrollHeight}px`;
+    }
+    function leave(el) {
+      el.style.height = "0";
+    }
+    onMounted(() => {
+      renderItems();
+    });
+    onUnmounted(() => {
+      window.cancelAnimationFrame(renderAnimationRequest.value);
+      renderedItems2.value = [];
+    });
+    watch(
+      () => props.elements,
+      () => {
+        window.cancelAnimationFrame(renderAnimationRequest.value);
+        renderedItems2.value = [];
+        renderItems();
+      }
+    );
+    return (_ctx, _cache) => {
+      const _component_n8n_loading = N8nLoading;
+      return _ctx.elements.length > 0 ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(_ctx.$style.itemsRenderer),
+        name: "accordion",
+        onBeforeEnter: beforeEnter,
+        onEnter: enter,
+        onBeforeLeave: beforeLeave,
+        onLeave: leave
+      }, [
+        renderSlot(_ctx.$slots, "default"),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.elements, (item) => {
+          return openBlock(), createElementBlock("div", {
+            key: item.uuid
+          }, [
+            renderedItems2.value.includes(item) ? (openBlock(), createElementBlock("div", _hoisted_1$5, [
+              item.type === "section" ? (openBlock(), createBlock(CategorizedItemsRenderer, {
+                key: 0,
+                elements: item.children,
+                expanded: "",
+                category: item.title,
+                onSelected: _cache[0] || (_cache[0] = (child) => wrappedEmit("selected", child))
+              }, null, 8, ["elements", "category"])) : (openBlock(), createElementBlock("div", {
+                key: 1,
+                ref_for: true,
+                ref: "iteratorItems",
+                class: normalizeClass({
+                  clickable: !_ctx.disabled,
+                  [_ctx.$style.active]: activeItemId.value === item.uuid && highlightActiveItem.value,
+                  [_ctx.$style.iteratorItem]: !communityNode.value,
+                  [_ctx.$style[item.type]]: true,
+                  [_ctx.$style.preview]: isPreview.value,
+                  // Borderless is only applied to views
+                  [_ctx.$style.borderless]: item.type === "view" && item.properties.borderless === true
+                }),
+                "data-test-id": "item-iterator-item",
+                "data-keyboard-nav-type": item.type !== "label" ? item.type : void 0,
+                "data-keyboard-nav-id": item.uuid,
+                onClick: ($event) => wrappedEmit("selected", item)
+              }, [
+                item.type === "label" ? (openBlock(), createBlock(LabelItem, {
+                  key: 0,
+                  item
+                }, null, 8, ["item"])) : createCommentVNode("", true),
+                item.type === "subcategory" ? (openBlock(), createBlock(SubcategoryItem, {
+                  key: 1,
+                  item: item.properties
+                }, null, 8, ["item"])) : createCommentVNode("", true),
+                communityNode.value ? (openBlock(), createBlock(CommunityNodeItem, {
+                  key: 2,
+                  "is-preview": isPreview.value
+                }, null, 8, ["is-preview"])) : createCommentVNode("", true),
+                item.type === "node" && !communityNode.value ? (openBlock(), createBlock(NodeItem, {
+                  key: 3,
+                  "node-type": item.properties,
+                  active: true,
+                  subcategory: item.subcategory
+                }, null, 8, ["node-type", "subcategory"])) : createCommentVNode("", true),
+                item.type === "action" ? (openBlock(), createBlock(ActionItem, {
+                  key: 4,
+                  "node-type": item.properties,
+                  action: item.properties,
+                  active: true
+                }, null, 8, ["node-type", "action"])) : item.type === "view" ? (openBlock(), createBlock(ViewItem, {
+                  key: 5,
+                  view: item.properties,
+                  class: normalizeClass(_ctx.$style.viewItem)
+                }, null, 8, ["view", "class"])) : item.type === "link" ? (openBlock(), createBlock(LinkItem, {
+                  key: 6,
+                  link: item.properties,
+                  class: normalizeClass(_ctx.$style.linkItem)
+                }, null, 8, ["link", "class"])) : item.type === "openTemplate" ? (openBlock(), createBlock(OpenTemplateItem, {
+                  key: 7,
+                  "open-template": item.properties,
+                  class: normalizeClass(_ctx.$style.linkItem)
+                }, null, 8, ["open-template", "class"])) : createCommentVNode("", true)
+              ], 10, _hoisted_2$3))
+            ])) : (openBlock(), createBlock(_component_n8n_loading, {
+              key: 1,
+              loading: true,
+              rows: 1,
+              variant: "p",
+              class: normalizeClass(_ctx.$style.itemSkeleton)
+            }, null, 8, ["class"]))
+          ]);
+        }), 128))
+      ], 34)) : (openBlock(), createElementBlock("div", {
+        key: 1,
+        class: normalizeClass(_ctx.$style.empty)
+      }, [
+        renderSlot(_ctx.$slots, "empty")
+      ], 2));
+    };
+  }
+});
+const itemSkeleton = "_itemSkeleton_1y85u_123";
+const iteratorItem = "_iteratorItem_1y85u_127";
+const label = "_label_1y85u_139";
+const category = "_category_1y85u_139";
+const active$1 = "_active_1y85u_142";
+const empty = "_empty_1y85u_146";
+const itemsRenderer = "_itemsRenderer_1y85u_150";
+const view = "_view_1y85u_159";
+const link = "_link_1y85u_177";
+const borderless = "_borderless_1y85u_195";
+const preview = "_preview_1y85u_205";
+const style0$8 = {
+  itemSkeleton,
+  iteratorItem,
+  label,
+  category,
+  active: active$1,
+  empty,
+  itemsRenderer,
+  view,
+  link,
+  borderless,
+  preview
+};
 const cssModules$8 = {
   "$style": style0$8
 };
-const SearchBar = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__cssModules", cssModules$8]]);
+const ItemsRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__cssModules", cssModules$8]]);
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "OrderSwitcher",
   props: {
@@ -141,7 +1340,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     const publisherName = ref(void 0);
     const downloads = ref(null);
     const verified = ref(false);
-    const official = ref(false);
+    const official2 = ref(false);
     const installedPackage = ref(void 0);
     const communityNodesStore = useCommunityNodesStore();
     const nodeTypesStore = useNodeTypesStore();
@@ -165,7 +1364,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       if (communityNodeAttributes) {
         publisherName.value = communityNodeAttributes.companyName ?? communityNodeAttributes.authorName;
         downloads.value = formatNumber(communityNodeAttributes.numberOfDownloads);
-        official.value = communityNodeAttributes.isOfficialNode;
+        official2.value = communityNodeAttributes.isOfficialNode;
         if (!installedPackage.value) {
           verified.value = true;
         } else {
@@ -207,7 +1406,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      const _component_CommunityNodeUpdateInfo = _sfc_main$b;
+      const _component_CommunityNodeUpdateInfo = _sfc_main$o;
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(_ctx.$style.container)
       }, [
@@ -236,7 +1435,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             placement: "top"
           }, {
             content: withCtx(() => [
-              createTextVNode(toDisplayString(official.value ? unref(i18n).baseText("communityNodeInfo.officialApproved") : unref(i18n).baseText("communityNodeInfo.approved")), 1)
+              createTextVNode(toDisplayString(official2.value ? unref(i18n).baseText("communityNodeInfo.officialApproved") : unref(i18n).baseText("communityNodeInfo.approved")), 1)
             ]),
             default: withCtx(() => [
               createBaseVNode("div", null, [
@@ -377,7 +1576,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const telemetry = useTelemetry();
-    const i18n2 = useI18n();
+    const i18n2 = useI18n$1();
     const { userActivated, isInstanceOwner } = useUsersStore();
     const { popViewStack, updateCurrentViewStack } = useViewStacks();
     const { registerKeyHook } = useKeyboardNavigation();
@@ -742,7 +1941,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     rootView: {}
   },
   setup(__props) {
-    const i18n2 = useI18n();
+    const i18n2 = useI18n$1();
     return (_ctx, _cache) => {
       const _component_n8n_link = N8nLink;
       const _component_n8n_icon = N8nIcon;
@@ -840,7 +2039,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   emits: ["nodeTypeSelected"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
-    const i18n2 = useI18n();
+    const i18n2 = useI18n$1();
     const calloutHelpers = useCalloutHelpers();
     const { mergedNodes, actions, onSubcategorySelected } = useNodeCreatorStore();
     const { pushViewStack, popViewStack, isAiSubcategoryView } = useViewStacks();
@@ -959,14 +2158,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           console.warn(`No view found for ${itemKey}`);
           return;
         }
-        const view = matchedView(mergedNodes);
+        const view2 = matchedView(mergedNodes);
         pushViewStack({
-          title: view.title,
-          subtitle: view?.subtitle ?? "",
-          info: view?.info ?? "",
-          items: view.items,
+          title: view2.title,
+          subtitle: view2?.subtitle ?? "",
+          info: view2?.info ?? "",
+          items: view2.items,
           hasSearch: true,
-          rootView: view.value,
+          rootView: view2.value,
           mode: "nodes",
           // Root search should include all nodes
           searchItems: mergedNodes
@@ -1316,7 +2515,7 @@ const _hoisted_2 = ["textContent"];
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "NodesListPanel",
   setup(__props) {
-    const i18n2 = useI18n();
+    const i18n2 = useI18n$1();
     const { callDebounced } = useDebounce();
     const { mergedNodes } = useNodeCreatorStore();
     const { pushViewStack, popViewStack, updateCurrentViewStack } = useViewStacks();
@@ -1401,12 +2600,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           console.warn(`No view found for ${itemKey}`);
           return;
         }
-        const view = matchedView(mergedNodes);
+        const view2 = matchedView(mergedNodes);
         pushViewStack({
-          title: view.title,
-          subtitle: view?.subtitle ?? "",
-          items: view.items,
-          info: view.info,
+          title: view2.title,
+          subtitle: view2?.subtitle ?? "",
+          items: view2.items,
+          info: view2.info,
           hasSearch: true,
           mode: "nodes",
           rootView: selectedView,
@@ -1671,7 +2870,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             [_ctx.$style.active]: showScrim.value
           })
         }, null, 2),
-        _ctx.active ? (openBlock(), createBlock(_sfc_main$c, {
+        _ctx.active ? (openBlock(), createBlock(_sfc_main$p, {
           key: 0,
           class: normalizeClass(_ctx.$style.close),
           type: "secondary",