@knime/product-features 1.2.2 → 1.2.4

package/dist/nodes.js

@@ -1,617 +1,660 @@
-import { defineComponent, computed, ref, openBlock, createElementBlock, createBlock, unref, createSlots, renderList, withCtx, createCommentVNode, Fragment, createElementVNode, toDisplayString, createVNode, useCssVars, mergeProps, normalizeClass } from 'vue';
-import { KdsAccordion, KdsDescription, KdsTabBar, KdsEmptyState, KdsIcon } from '@knime/kds-components';
-import { _ as _export_sfc } from './_plugin-vue_export-helper-pcqpp-6-.js';
-
-import './nodes.css';const _hoisted_1$9 = { class: "name" };
-const _hoisted_2$5 = {
-  key: 1,
-  class: "single-option-wrapper"
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useCssVars, withCtx } from "vue";
+import { KdsAccordion, KdsDescription, KdsEmptyState, KdsIcon, KdsTabBar } from "@knime/kds-components";
+import './nodes.css';//#region src/nodes/NodeDescriptionTabs/OptionsTab.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$9 = { class: "name" };
+var _hoisted_2$5 = {
+	key: 1,
+	class: "single-option-wrapper"
 };
-const _hoisted_3$4 = { class: "name" };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  __name: "OptionsTab",
-  props: {
-    options: {},
-    renderAsHtml: { type: Boolean }
-  },
-  setup(__props) {
-    const accordionItems = computed(() => {
-      return __props.options.map(
-        (option, index) => ({
-          id: `section-${index}`,
-          headline: option.sectionName,
-          description: option.sectionDescription,
-          content: option.fields
-        })
-      );
-    });
-    const modelValue = ref([]);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
-        __props.options.length > 1 ? (openBlock(), createBlock(unref(KdsAccordion), {
-          key: 0,
-          modelValue: modelValue.value,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
-          items: accordionItems.value
-        }, createSlots({ _: 2 }, [
-          renderList(accordionItems.value, (item) => {
-            return {
-              name: item.id,
-              fn: withCtx(() => [
-                item.description ? (openBlock(), createBlock(unref(KdsDescription), {
-                  key: 0,
-                  text: item.description,
-                  "render-as-html": __props.renderAsHtml,
-                  class: "section-description"
-                }, null, 8, ["text", "render-as-html"])) : createCommentVNode("", true),
-                (openBlock(true), createElementBlock(Fragment, null, renderList(item.content, (field) => {
-                  return openBlock(), createElementBlock("div", {
-                    key: field.name,
-                    class: "option-content"
-                  }, [
-                    createElementVNode("span", _hoisted_1$9, toDisplayString(field.name) + " " + toDisplayString(field.optional ? "(optional)" : ""), 1),
-                    createVNode(unref(KdsDescription), {
-                      text: field.description,
-                      "render-as-html": __props.renderAsHtml
-                    }, null, 8, ["text", "render-as-html"])
-                  ]);
-                }), 128))
-              ])
-            };
-          })
-        ]), 1032, ["modelValue", "items"])) : createCommentVNode("", true),
-        __props.options.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
-          __props.options[0].sectionDescription ? (openBlock(), createBlock(unref(KdsDescription), {
-            key: 0,
-            text: __props.options[0].sectionDescription,
-            "render-as-html": __props.renderAsHtml,
-            class: "section-description"
-          }, null, 8, ["text", "render-as-html"])) : createCommentVNode("", true),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options[0].fields, (field) => {
-            return openBlock(), createElementBlock("div", {
-              key: field.name,
-              class: "option-content"
-            }, [
-              createElementVNode("span", _hoisted_3$4, toDisplayString(field.name) + " " + toDisplayString(field.optional ? "(optional)" : ""), 1),
-              createVNode(unref(KdsDescription), {
-                text: field.description,
-                "render-as-html": __props.renderAsHtml
-              }, null, 8, ["text", "render-as-html"])
-            ]);
-          }), 128))
-        ])) : createCommentVNode("", true)
-      ]);
-    };
-  }
-});
-
-const OptionsTab = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-4fcd17b8"]]);
-
-const PORT_SIZE = 8;
-const PORT_STROKE_WIDTH = 1.4;
-
-const _hoisted_1$8 = ["points", "data-type", "stroke-width"];
-const _hoisted_2$4 = ["r", "data-type", "stroke-width"];
-const _hoisted_3$3 = ["width", "height", "x", "y", "data-type", "stroke-width"];
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  __name: "SVGPortIcon",
-  props: {
-    type: {},
-    color: {},
-    filled: { type: Boolean, default: true }
-  },
-  setup(__props) {
-    useCssVars((_ctx) => ({
-      "v45d93a60": _ctx.color
-    }));
-    const trianglePath = computed(() => {
-      let [x1, y1, x2, y3] = [
-        -PORT_SIZE / 2,
-        -PORT_SIZE / 2,
-        PORT_SIZE / 2,
-        PORT_SIZE / 2
-      ];
-      const d = Math.sqrt(5) / 2;
-      const y = d / 2 + 1 / 4;
-      x1 += PORT_STROKE_WIDTH / 2;
-      x2 -= PORT_STROKE_WIDTH * d;
-      y1 += PORT_STROKE_WIDTH * y;
-      y3 -= PORT_STROKE_WIDTH * y;
-      return `${x1},${y1} ${x2},${0} ${x1},${y3}`;
-    });
-    return (_ctx, _cache) => {
-      return __props.type === "table" ? (openBlock(), createElementBlock("polygon", mergeProps({
-        key: 0,
-        points: trianglePath.value,
-        class: { filled: __props.filled },
-        "data-type": __props.type,
-        "stroke-width": unref(PORT_STROKE_WIDTH)
-      }, _ctx.$attrs), null, 16, _hoisted_1$8)) : __props.type === "flowVariable" ? (openBlock(), createElementBlock("circle", mergeProps({
-        key: 1,
-        r: unref(PORT_SIZE) / 2 - unref(PORT_STROKE_WIDTH) / 2,
-        class: { filled: __props.filled },
-        "data-type": __props.type,
-        "stroke-width": unref(PORT_STROKE_WIDTH)
-      }, _ctx.$attrs), null, 16, _hoisted_2$4)) : (openBlock(), createElementBlock("rect", mergeProps({
-        key: 2,
-        width: unref(PORT_SIZE) - unref(PORT_STROKE_WIDTH),
-        height: unref(PORT_SIZE) - unref(PORT_STROKE_WIDTH),
-        x: -unref(PORT_SIZE) / 2 + unref(PORT_STROKE_WIDTH) / 2,
-        y: -unref(PORT_SIZE) / 2 + unref(PORT_STROKE_WIDTH) / 2,
-        class: { filled: __props.filled },
-        "data-type": __props.type,
-        "stroke-width": unref(PORT_STROKE_WIDTH)
-      }, _ctx.$attrs), null, 16, _hoisted_3$3));
-    };
-  }
-});
-
-const SVGPortIcon = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-3150264d"]]);
-
-const _hoisted_1$7 = ["viewBox", "width", "height"];
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  __name: "PortIcon",
-  props: {
-    type: {},
-    color: {},
-    filled: { type: Boolean, default: true }
-  },
-  setup(__props) {
-    const viewBox = computed(
-      () => [-PORT_SIZE / 2, -PORT_SIZE / 2, PORT_SIZE, PORT_SIZE].join(" ")
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", {
-        viewBox: viewBox.value,
-        width: unref(PORT_SIZE),
-        height: unref(PORT_SIZE)
-      }, [
-        createVNode(SVGPortIcon, {
-          filled: __props.filled,
-          type: __props.type,
-          color: __props.color
-        }, null, 8, ["filled", "type", "color"])
-      ], 8, _hoisted_1$7);
-    };
-  }
-});
-
-const _hoisted_1$6 = { class: "wrapper" };
-const _hoisted_2$3 = { class: "icon" };
-const _hoisted_3$2 = { class: "title" };
-const _hoisted_4 = { class: "name title" };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
-  __name: "PortTemplateInfo",
-  props: {
-    port: {},
-    showDescription: { type: Boolean }
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$6, [
-        createElementVNode("div", _hoisted_2$3, [
-          createVNode(_sfc_main$7, {
-            type: __props.port.type,
-            color: __props.port.color,
-            filled: !__props.port.optional
-          }, null, 8, ["type", "color", "filled"])
-        ]),
-        createElementVNode("span", _hoisted_3$2, "Type: " + toDisplayString(__props.port.typeDisplayName), 1),
-        createElementVNode("span", _hoisted_4, "Name: " + toDisplayString(__props.port.name), 1),
-        __props.showDescription ? (openBlock(), createBlock(unref(KdsDescription), {
-          key: 0,
-          class: "description",
-          text: __props.port.description,
-          "render-as-html": ""
-        }, null, 8, ["text"])) : createCommentVNode("", true)
-      ]);
-    };
-  }
-});
-
-const PortTemplateInfo = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-4920a7fa"]]);
-
-const _hoisted_1$5 = { class: "port-group-card" };
-const _hoisted_2$2 = { class: "group-name" };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  __name: "PortGroup",
-  props: {
-    name: {},
-    description: {},
-    ports: {},
-    isDynamicGroup: { type: Boolean }
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$5, [
-        createElementVNode("span", _hoisted_2$2, toDisplayString(__props.name), 1),
-        __props.description ? (openBlock(), createBlock(unref(KdsDescription), {
-          key: 0,
-          text: __props.description,
-          "render-as-html": ""
-        }, null, 8, ["text"])) : createCommentVNode("", true),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.ports, (port) => {
-          return openBlock(), createBlock(PortTemplateInfo, {
-            key: port.id,
-            port,
-            "show-description": !__props.isDynamicGroup
-          }, null, 8, ["port", "show-description"]);
-        }), 128))
-      ]);
-    };
-  }
-});
-
-const PortGroup = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-ed993ae3"]]);
-
-const _hoisted_1$4 = { class: "port-list" };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "PortsTab",
-  props: {
-    inputPorts: {},
-    outputPorts: {},
-    dynamicInputGroups: { default: () => [] },
-    dynamicOutputGroups: { default: () => [] }
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
-        __props.inputPorts.length > 0 ? (openBlock(), createBlock(PortGroup, {
-          key: 0,
-          name: "Input ports",
-          ports: __props.inputPorts
-        }, null, 8, ["ports"])) : createCommentVNode("", true),
-        __props.outputPorts.length > 0 ? (openBlock(), createBlock(PortGroup, {
-          key: 1,
-          name: "Output ports",
-          ports: __props.outputPorts
-        }, null, 8, ["ports"])) : createCommentVNode("", true),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.dynamicInputGroups, (group) => {
-          return openBlock(), createElementBlock(Fragment, {
-            key: group.name
-          }, [
-            group.types.length > 0 ? (openBlock(), createBlock(PortGroup, {
-              key: 0,
-              name: group.name + " (Dynamic Inport)",
-              description: group.description,
-              ports: group.types,
-              "is-dynamic-group": ""
-            }, null, 8, ["name", "description", "ports"])) : createCommentVNode("", true)
-          ], 64);
-        }), 128)),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.dynamicOutputGroups, (group) => {
-          return openBlock(), createElementBlock(Fragment, {
-            key: group.name
-          }, [
-            group.types.length > 0 ? (openBlock(), createBlock(PortGroup, {
-              key: 0,
-              name: group.name + " (Dynamic Outport)",
-              description: group.description,
-              ports: group.types,
-              "is-dynamic-group": ""
-            }, null, 8, ["name", "description", "ports"])) : createCommentVNode("", true)
-          ], 64);
-        }), 128))
-      ]);
-    };
-  }
-});
-
-const PortsTab = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-bf308a64"]]);
-
-const _hoisted_1$3 = { class: "name" };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "ViewsTab",
-  props: {
-    views: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const viewsWithId = computed(
-      () => props.views.map((view, index) => {
-        const id = `view-${index}`;
-        return { id, ...view };
-      })
-    );
-    return (_ctx, _cache) => {
-      return openBlock(true), createElementBlock(Fragment, null, renderList(viewsWithId.value, (view) => {
-        return openBlock(), createElementBlock("div", {
-          key: view.id,
-          class: "card-wrapper"
-        }, [
-          createElementVNode("span", _hoisted_1$3, toDisplayString(view.name), 1),
-          view.description ? (openBlock(), createBlock(unref(KdsDescription), {
-            key: 0,
-            text: view.description,
-            "render-as-html": ""
-          }, null, 8, ["text"])) : createCommentVNode("", true)
-        ]);
-      }), 128);
-    };
-  }
+var _hoisted_3$4 = { class: "name" };
+//#endregion
+//#region src/nodes/NodeDescriptionTabs/OptionsTab.vue
+var OptionsTab_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "OptionsTab",
+	props: {
+		options: {},
+		renderAsHtml: { type: Boolean }
+	},
+	setup(__props) {
+		const accordionItems = computed(() => {
+			return __props.options.map((option, index) => ({
+				id: `section-${index}`,
+				headline: option.sectionName,
+				description: option.sectionDescription,
+				content: option.fields
+			}));
+		});
+		const modelValue = ref([]);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", null, [__props.options.length > 1 ? (openBlock(), createBlock(unref(KdsAccordion), {
+				key: 0,
+				modelValue: modelValue.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+				items: accordionItems.value
+			}, createSlots({ _: 2 }, [renderList(accordionItems.value, (item) => {
+				return {
+					name: item.id,
+					fn: withCtx(() => [item.description ? (openBlock(), createBlock(unref(KdsDescription), {
+						key: 0,
+						text: item.description,
+						"render-as-html": __props.renderAsHtml,
+						class: "section-description"
+					}, null, 8, ["text", "render-as-html"])) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(item.content, (field) => {
+						return openBlock(), createElementBlock("div", {
+							key: field.name,
+							class: "option-content"
+						}, [createElementVNode("span", _hoisted_1$9, toDisplayString(field.name) + " " + toDisplayString(field.optional ? "(optional)" : ""), 1), createVNode(unref(KdsDescription), {
+							text: field.description,
+							"render-as-html": __props.renderAsHtml
+						}, null, 8, ["text", "render-as-html"])]);
+					}), 128))])
+				};
+			})]), 1032, ["modelValue", "items"])) : createCommentVNode("", true), __props.options.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_2$5, [__props.options[0].sectionDescription ? (openBlock(), createBlock(unref(KdsDescription), {
+				key: 0,
+				text: __props.options[0].sectionDescription,
+				"render-as-html": __props.renderAsHtml,
+				class: "section-description"
+			}, null, 8, ["text", "render-as-html"])) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options[0].fields, (field) => {
+				return openBlock(), createElementBlock("div", {
+					key: field.name,
+					class: "option-content"
+				}, [createElementVNode("span", _hoisted_3$4, toDisplayString(field.name) + " " + toDisplayString(field.optional ? "(optional)" : ""), 1), createVNode(unref(KdsDescription), {
+					text: field.description,
+					"render-as-html": __props.renderAsHtml
+				}, null, 8, ["text", "render-as-html"])]);
+			}), 128))])) : createCommentVNode("", true)]);
+		};
+	}
+}), [["__scopeId", "data-v-4fcd17b8"]]);
+//#endregion
+//#region src/nodes/PortIcon/constants.ts
+var PORT_STROKE_WIDTH = 1.4;
+//#endregion
+//#region src/nodes/PortIcon/SVGPortIcon.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$8 = [
+	"points",
+	"data-type",
+	"stroke-width"
+];
+var _hoisted_2$4 = [
+	"r",
+	"data-type",
+	"stroke-width"
+];
+var _hoisted_3$3 = [
+	"width",
+	"height",
+	"x",
+	"y",
+	"data-type",
+	"stroke-width"
+];
+//#endregion
+//#region src/nodes/PortIcon/SVGPortIcon.vue
+var SVGPortIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "SVGPortIcon",
+	props: {
+		type: {},
+		color: {},
+		filled: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(__props) {
+		useCssVars((_ctx) => ({ "v45d93a60": _ctx.color }));
+		const trianglePath = computed(() => {
+			let [x1, y1, x2, y3] = [
+				-8 / 2,
+				-8 / 2,
+				8 / 2,
+				8 / 2
+			];
+			const d = Math.sqrt(5) / 2;
+			const y = d / 2 + 1 / 4;
+			x1 += PORT_STROKE_WIDTH / 2;
+			x2 -= PORT_STROKE_WIDTH * d;
+			y1 += PORT_STROKE_WIDTH * y;
+			y3 -= PORT_STROKE_WIDTH * y;
+			return `${x1},${y1} ${x2},0 ${x1},${y3}`;
+		});
+		return (_ctx, _cache) => {
+			return __props.type === "table" ? (openBlock(), createElementBlock("polygon", mergeProps({
+				key: 0,
+				points: trianglePath.value,
+				class: { filled: __props.filled },
+				"data-type": __props.type,
+				"stroke-width": unref(PORT_STROKE_WIDTH)
+			}, _ctx.$attrs), null, 16, _hoisted_1$8)) : __props.type === "flowVariable" ? (openBlock(), createElementBlock("circle", mergeProps({
+				key: 1,
+				r: unref(8) / 2 - unref(PORT_STROKE_WIDTH) / 2,
+				class: { filled: __props.filled },
+				"data-type": __props.type,
+				"stroke-width": unref(PORT_STROKE_WIDTH)
+			}, _ctx.$attrs), null, 16, _hoisted_2$4)) : (openBlock(), createElementBlock("rect", mergeProps({
+				key: 2,
+				width: unref(8) - unref(PORT_STROKE_WIDTH),
+				height: unref(8) - unref(PORT_STROKE_WIDTH),
+				x: -unref(8) / 2 + unref(PORT_STROKE_WIDTH) / 2,
+				y: -unref(8) / 2 + unref(PORT_STROKE_WIDTH) / 2,
+				class: { filled: __props.filled },
+				"data-type": __props.type,
+				"stroke-width": unref(PORT_STROKE_WIDTH)
+			}, _ctx.$attrs), null, 16, _hoisted_3$3));
+		};
+	}
+}), [["__scopeId", "data-v-3150264d"]]);
+//#endregion
+//#region src/nodes/PortIcon/PortIcon.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$7 = [
+	"viewBox",
+	"width",
+	"height"
+];
+//#endregion
+//#region src/nodes/PortIcon/PortIcon.vue
+var PortIcon_default = /* @__PURE__ */ defineComponent({
+	__name: "PortIcon",
+	props: {
+		type: {},
+		color: {},
+		filled: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(__props) {
+		const viewBox = computed(() => [
+			-8 / 2,
+			-8 / 2,
+			8,
+			8
+		].join(" "));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("svg", {
+				viewBox: viewBox.value,
+				width: unref(8),
+				height: unref(8)
+			}, [createVNode(SVGPortIcon_default, {
+				filled: __props.filled,
+				type: __props.type,
+				color: __props.color
+			}, null, 8, [
+				"filled",
+				"type",
+				"color"
+			])], 8, _hoisted_1$7);
+		};
+	}
 });
-
-const ViewsTab = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-024c4b9d"]]);
-
-const _hoisted_1$2 = { class: "content" };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "NodeDescriptionTabs",
-  props: {
-    inputPorts: { default: () => [] },
-    outputPorts: { default: () => [] },
-    dynamicInputPorts: { default: () => [] },
-    dynamicOutputPorts: { default: () => [] },
-    optionsData: { default: () => [] },
-    viewsData: { default: () => [] },
-    emptyText: { default: "No ports, options or views available." },
-    renderAsHtml: { type: Boolean, default: false },
-    tabBarFullWidth: { type: Boolean, default: false }
-  },
-  setup(__props) {
-    const TAB_IDS = {
-      PORTS: "ports",
-      OPTIONS: "options",
-      VIEW: "view"
-    };
-    const activeTab = ref();
-    const hasPorts = computed(
-      () => __props.inputPorts.length > 0 || __props.outputPorts.length > 0 || __props.dynamicInputPorts.length > 0 || __props.dynamicOutputPorts.length > 0
-    );
-    const tabs = computed(() => [
-      {
-        id: "tab-ports",
-        value: TAB_IDS.PORTS,
-        label: "Ports",
-        panelId: "panel-ports",
-        accessory: {
-          type: "icon",
-          name: "connection"
-        },
-        disabled: !hasPorts.value
-      },
-      {
-        id: "tab-options",
-        value: TAB_IDS.OPTIONS,
-        label: "Options",
-        panelId: "panel-options",
-        accessory: {
-          type: "icon",
-          name: "parameter"
-        },
-        disabled: __props.optionsData.length < 1
-      },
-      {
-        id: "tab-view",
-        value: TAB_IDS.VIEW,
-        label: "View",
-        panelId: "panel-view",
-        accessory: {
-          type: "icon",
-          name: "eye"
-        },
-        disabled: __props.viewsData.length < 1
-      }
-    ]);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
-        createVNode(unref(KdsTabBar), {
-          modelValue: activeTab.value,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTab.value = $event),
-          "full-width": __props.tabBarFullWidth,
-          size: "small",
-          tabs: tabs.value
-        }, null, 8, ["modelValue", "full-width", "tabs"]),
-        createElementVNode("div", _hoisted_1$2, [
-          activeTab.value === TAB_IDS.PORTS ? (openBlock(), createBlock(PortsTab, {
-            key: 0,
-            id: "panel-ports",
-            role: "tabpanel",
-            "aria-labelledby": "tab-ports",
-            tabindex: "0",
-            "input-ports": __props.inputPorts,
-            "output-ports": __props.outputPorts,
-            "dynamic-input-groups": __props.dynamicInputPorts,
-            "dynamic-output-groups": __props.dynamicOutputPorts
-          }, null, 8, ["input-ports", "output-ports", "dynamic-input-groups", "dynamic-output-groups"])) : createCommentVNode("", true),
-          activeTab.value === TAB_IDS.OPTIONS ? (openBlock(), createBlock(OptionsTab, {
-            key: 1,
-            id: "panel-options",
-            role: "tabpanel",
-            "aria-labelledby": "tab-options",
-            tabindex: "0",
-            options: __props.optionsData,
-            "render-as-html": __props.renderAsHtml
-          }, null, 8, ["options", "render-as-html"])) : createCommentVNode("", true),
-          activeTab.value === TAB_IDS.VIEW ? (openBlock(), createBlock(ViewsTab, {
-            key: 2,
-            id: "panel-view",
-            role: "tabpanel",
-            "aria-labelledby": "tab-view",
-            tabindex: "0",
-            views: __props.viewsData
-          }, null, 8, ["views"])) : createCommentVNode("", true),
-          !activeTab.value ? (openBlock(), createBlock(unref(KdsEmptyState), {
-            key: 3,
-            headline: __props.emptyText,
-            class: "empty-state"
-          }, null, 8, ["headline"])) : createCommentVNode("", true)
-        ])
-      ]);
-    };
-  }
-});
-
-const NodeDescriptionTabs = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-d2eb8e2e"]]);
-
-const NODE_SIZE = 32;
-
-const _hoisted_1$1 = ["d", "data-type"];
-const _hoisted_2$1 = ["d", "data-type", "transform"];
-const _hoisted_3$1 = ["xlink:href"];
-const componentBackgroundPortion = 0.75;
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "SVGNodeTorso",
-  props: {
-    type: { default: null },
-    isComponent: { type: Boolean, default: false },
-    icon: { default: null }
-  },
-  setup(__props) {
-    const backgroundPaths = {
-      default: "M0,29.2L0,2.8C0,1.3,1.3,0,2.8,0l26.3,0C30.7,0,32,1.3,32,2.8v26.3c0,1.6-1.3,2.8-2.8,2.8H2.8C1.3,32,0,30.7,0,29.2z",
-      LoopEnd: "M32,2.8v26.3c0,1.6-1.3,2.8-2.8,2.8H4L0,16.1L4,0l25.2,0C30.7,0,32,1.3,32,2.8z",
-      LoopStart: "M0,29.2L0,2.8C0,1.3,1.3,0,2.8,0L32,0l-4,15.9L32,32H2.8C1.3,32,0,30.7,0,29.2z",
-      ScopeEnd: "M32,2.8v26.3c0,1.6-1.3,2.8-2.8,2.8H4L0,16.1L4,0l25.2,0C30.7,0,32,1.3,32,2.8z",
-      ScopeStart: "M0,29.2L0,2.8C0,1.3,1.3,0,2.8,0L32,0l-4,15.9L32,32H2.8C1.3,32,0,30.7,0,29.2z",
-      VirtualIn: "M32,2.8v26.3c0,1.6-1.3,2.8-2.8,2.8H6.5L0,25.9l5.2-10L0.7,7.2L6.5,0l22.7,0C30.7,0,32,1.3,32,2.8z",
-      VirtualOut: "M0,29.2L0,2.8C0,1.3,1.3,0,2.8,0L32,0l-5.8,7.2l4.5,8.7l-5.2,10L32,32H2.8C1.3,32,0,30.7,0,29.2z"
-    };
-    const backgroundPath = computed(
-      () => __props.type && backgroundPaths[__props.type] || backgroundPaths.default
-    );
-    const componentBackgroundTransformation = computed(() => {
-      const offset = NODE_SIZE / 2;
-      const scaleFactor = componentBackgroundPortion;
-      return `translate(${offset}, ${offset}) scale(${scaleFactor}) translate(-${offset}, -${offset})`;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("g", null, [
-        createElementVNode("path", {
-          d: backgroundPath.value,
-          class: normalizeClass(["bg", { component: __props.isComponent }]),
-          "data-type": __props.isComponent ? null : __props.type
-        }, null, 10, _hoisted_1$1),
-        __props.isComponent && __props.type ? (openBlock(), createElementBlock("path", {
-          key: 0,
-          d: backgroundPath.value,
-          class: "bg",
-          "data-type": __props.type,
-          transform: componentBackgroundTransformation.value
-        }, null, 8, _hoisted_2$1)) : createCommentVNode("", true),
-        __props.icon ? (openBlock(), createElementBlock("image", {
-          key: 1,
-          "xlink:href": __props.icon,
-          x: "8",
-          y: "8",
-          width: "16",
-          height: "16",
-          "pointer-events": "none"
-        }, null, 8, _hoisted_3$1)) : createCommentVNode("", true)
-      ]);
-    };
-  }
-});
-
-const SVGNodeTorso = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-2389897b"]]);
-
-const _hoisted_1 = ["data-size"];
-const _hoisted_2 = ["viewBox", "width", "height"];
-const _hoisted_3 = {
-  key: 0,
-  class: "indicators"
+//#endregion
+//#region src/nodes/NodeDescriptionTabs/PortTemplateInfo.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$6 = { class: "wrapper" };
+var _hoisted_2$3 = { class: "icon" };
+var _hoisted_3$2 = { class: "title" };
+var _hoisted_4 = { class: "name title" };
+//#endregion
+//#region src/nodes/NodeDescriptionTabs/PortTemplateInfo.vue
+var PortTemplateInfo_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "PortTemplateInfo",
+	props: {
+		port: {},
+		showDescription: { type: Boolean }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$6, [
+				createElementVNode("div", _hoisted_2$3, [createVNode(PortIcon_default, {
+					type: __props.port.type,
+					color: __props.port.color,
+					filled: !__props.port.optional
+				}, null, 8, [
+					"type",
+					"color",
+					"filled"
+				])]),
+				createElementVNode("span", _hoisted_3$2, "Type: " + toDisplayString(__props.port.typeDisplayName), 1),
+				createElementVNode("span", _hoisted_4, "Name: " + toDisplayString(__props.port.name), 1),
+				__props.showDescription ? (openBlock(), createBlock(unref(KdsDescription), {
+					key: 0,
+					class: "description",
+					text: __props.port.description,
+					"render-as-html": ""
+				}, null, 8, ["text"])) : createCommentVNode("", true)
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-4920a7fa"]]);
+//#endregion
+//#region src/nodes/NodeDescriptionTabs/PortGroup.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$5 = { class: "port-group-card" };
+var _hoisted_2$2 = { class: "group-name" };
+//#endregion
+//#region src/nodes/NodeDescriptionTabs/PortGroup.vue
+var PortGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "PortGroup",
+	props: {
+		name: {},
+		description: {},
+		ports: {},
+		isDynamicGroup: { type: Boolean }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$5, [
+				createElementVNode("span", _hoisted_2$2, toDisplayString(__props.name), 1),
+				__props.description ? (openBlock(), createBlock(unref(KdsDescription), {
+					key: 0,
+					text: __props.description,
+					"render-as-html": ""
+				}, null, 8, ["text"])) : createCommentVNode("", true),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(__props.ports, (port) => {
+					return openBlock(), createBlock(PortTemplateInfo_default, {
+						key: port.id,
+						port,
+						"show-description": !__props.isDynamicGroup
+					}, null, 8, ["port", "show-description"]);
+				}), 128))
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-ed993ae3"]]);
+//#endregion
+//#region src/nodes/NodeDescriptionTabs/PortsTab.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$4 = { class: "port-list" };
+//#endregion
+//#region src/nodes/NodeDescriptionTabs/PortsTab.vue
+var PortsTab_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "PortsTab",
+	props: {
+		inputPorts: {},
+		outputPorts: {},
+		dynamicInputGroups: { default: () => [] },
+		dynamicOutputGroups: { default: () => [] }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$4, [
+				__props.inputPorts.length > 0 ? (openBlock(), createBlock(PortGroup_default, {
+					key: 0,
+					name: "Input ports",
+					ports: __props.inputPorts
+				}, null, 8, ["ports"])) : createCommentVNode("", true),
+				__props.outputPorts.length > 0 ? (openBlock(), createBlock(PortGroup_default, {
+					key: 1,
+					name: "Output ports",
+					ports: __props.outputPorts
+				}, null, 8, ["ports"])) : createCommentVNode("", true),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(__props.dynamicInputGroups, (group) => {
+					return openBlock(), createElementBlock(Fragment, { key: group.name }, [group.types.length > 0 ? (openBlock(), createBlock(PortGroup_default, {
+						key: 0,
+						name: group.name + " (Dynamic Inport)",
+						description: group.description,
+						ports: group.types,
+						"is-dynamic-group": ""
+					}, null, 8, [
+						"name",
+						"description",
+						"ports"
+					])) : createCommentVNode("", true)], 64);
+				}), 128)),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(__props.dynamicOutputGroups, (group) => {
+					return openBlock(), createElementBlock(Fragment, { key: group.name }, [group.types.length > 0 ? (openBlock(), createBlock(PortGroup_default, {
+						key: 0,
+						name: group.name + " (Dynamic Outport)",
+						description: group.description,
+						ports: group.types,
+						"is-dynamic-group": ""
+					}, null, 8, [
+						"name",
+						"description",
+						"ports"
+					])) : createCommentVNode("", true)], 64);
+				}), 128))
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-bf308a64"]]);
+//#endregion
+//#region src/nodes/NodeDescriptionTabs/ViewsTab.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$3 = { class: "name" };
+//#endregion
+//#region src/nodes/NodeDescriptionTabs/ViewsTab.vue
+var ViewsTab_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "ViewsTab",
+	props: { views: {} },
+	setup(__props) {
+		const props = __props;
+		const viewsWithId = computed(() => props.views.map((view, index) => {
+			return {
+				id: `view-${index}`,
+				...view
+			};
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(true), createElementBlock(Fragment, null, renderList(viewsWithId.value, (view) => {
+				return openBlock(), createElementBlock("div", {
+					key: view.id,
+					class: "card-wrapper"
+				}, [createElementVNode("span", _hoisted_1$3, toDisplayString(view.name), 1), view.description ? (openBlock(), createBlock(unref(KdsDescription), {
+					key: 0,
+					text: view.description,
+					"render-as-html": ""
+				}, null, 8, ["text"])) : createCommentVNode("", true)]);
+			}), 128);
+		};
+	}
+}), [["__scopeId", "data-v-024c4b9d"]]);
+//#endregion
+//#region src/nodes/NodeDescriptionTabs/NodeDescriptionTabs.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = { class: "content" };
+//#endregion
+//#region src/nodes/NodeDescriptionTabs/NodeDescriptionTabs.vue
+var NodeDescriptionTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "NodeDescriptionTabs",
+	props: {
+		inputPorts: { default: () => [] },
+		outputPorts: { default: () => [] },
+		dynamicInputPorts: { default: () => [] },
+		dynamicOutputPorts: { default: () => [] },
+		optionsData: { default: () => [] },
+		viewsData: { default: () => [] },
+		emptyText: { default: "No ports, options or views available." },
+		renderAsHtml: {
+			type: Boolean,
+			default: false
+		},
+		tabBarFullWidth: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const TAB_IDS = {
+			PORTS: "ports",
+			OPTIONS: "options",
+			VIEW: "view"
+		};
+		const activeTab = ref();
+		const hasPorts = computed(() => __props.inputPorts.length > 0 || __props.outputPorts.length > 0 || __props.dynamicInputPorts.length > 0 || __props.dynamicOutputPorts.length > 0);
+		const tabs = computed(() => [
+			{
+				id: "tab-ports",
+				value: TAB_IDS.PORTS,
+				label: "Ports",
+				panelId: "panel-ports",
+				accessory: {
+					type: "icon",
+					name: "connection"
+				},
+				disabled: !hasPorts.value
+			},
+			{
+				id: "tab-options",
+				value: TAB_IDS.OPTIONS,
+				label: "Options",
+				panelId: "panel-options",
+				accessory: {
+					type: "icon",
+					name: "parameter"
+				},
+				disabled: __props.optionsData.length < 1
+			},
+			{
+				id: "tab-view",
+				value: TAB_IDS.VIEW,
+				label: "View",
+				panelId: "panel-view",
+				accessory: {
+					type: "icon",
+					name: "eye"
+				},
+				disabled: __props.viewsData.length < 1
+			}
+		]);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", null, [createVNode(unref(KdsTabBar), {
+				modelValue: activeTab.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTab.value = $event),
+				"full-width": __props.tabBarFullWidth,
+				size: "small",
+				tabs: tabs.value
+			}, null, 8, [
+				"modelValue",
+				"full-width",
+				"tabs"
+			]), createElementVNode("div", _hoisted_1$2, [
+				activeTab.value === TAB_IDS.PORTS ? (openBlock(), createBlock(PortsTab_default, {
+					key: 0,
+					id: "panel-ports",
+					role: "tabpanel",
+					"aria-labelledby": "tab-ports",
+					tabindex: "0",
+					"input-ports": __props.inputPorts,
+					"output-ports": __props.outputPorts,
+					"dynamic-input-groups": __props.dynamicInputPorts,
+					"dynamic-output-groups": __props.dynamicOutputPorts
+				}, null, 8, [
+					"input-ports",
+					"output-ports",
+					"dynamic-input-groups",
+					"dynamic-output-groups"
+				])) : createCommentVNode("", true),
+				activeTab.value === TAB_IDS.OPTIONS ? (openBlock(), createBlock(OptionsTab_default, {
+					key: 1,
+					id: "panel-options",
+					role: "tabpanel",
+					"aria-labelledby": "tab-options",
+					tabindex: "0",
+					options: __props.optionsData,
+					"render-as-html": __props.renderAsHtml
+				}, null, 8, ["options", "render-as-html"])) : createCommentVNode("", true),
+				activeTab.value === TAB_IDS.VIEW ? (openBlock(), createBlock(ViewsTab_default, {
+					key: 2,
+					id: "panel-view",
+					role: "tabpanel",
+					"aria-labelledby": "tab-view",
+					tabindex: "0",
+					views: __props.viewsData
+				}, null, 8, ["views"])) : createCommentVNode("", true),
+				!activeTab.value ? (openBlock(), createBlock(unref(KdsEmptyState), {
+					key: 3,
+					headline: __props.emptyText,
+					class: "empty-state"
+				}, null, 8, ["headline"])) : createCommentVNode("", true)
+			])]);
+		};
+	}
+}), [["__scopeId", "data-v-d2eb8e2e"]]);
+//#endregion
+//#region src/nodes/NodePreview/SVGNodeTorso.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = ["d", "data-type"];
+var _hoisted_2$1 = [
+	"d",
+	"data-type",
+	"transform"
+];
+var _hoisted_3$1 = ["xlink:href"];
+/**
+* Draws the Torso (colored rounded rectangle with icon) of a Node or Component
+* This vue component only draws regular Nodes/Components, no Metanodes, no Unknown nor Missing Nodes
+* Only works inside of a <svg> element.
+*/
+var componentBackgroundPortion = .75;
+//#endregion
+//#region src/nodes/NodePreview/SVGNodeTorso.vue
+var SVGNodeTorso_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "SVGNodeTorso",
+	props: {
+		type: { default: null },
+		isComponent: {
+			type: Boolean,
+			default: false
+		},
+		icon: { default: null }
+	},
+	setup(__props) {
+		const backgroundPaths = {
+			default: "M0,29.2L0,2.8C0,1.3,1.3,0,2.8,0l26.3,0C30.7,0,32,1.3,32,2.8v26.3c0,1.6-1.3,2.8-2.8,2.8H2.8C1.3,32,0,30.7,0,29.2z",
+			LoopEnd: "M32,2.8v26.3c0,1.6-1.3,2.8-2.8,2.8H4L0,16.1L4,0l25.2,0C30.7,0,32,1.3,32,2.8z",
+			LoopStart: "M0,29.2L0,2.8C0,1.3,1.3,0,2.8,0L32,0l-4,15.9L32,32H2.8C1.3,32,0,30.7,0,29.2z",
+			ScopeEnd: "M32,2.8v26.3c0,1.6-1.3,2.8-2.8,2.8H4L0,16.1L4,0l25.2,0C30.7,0,32,1.3,32,2.8z",
+			ScopeStart: "M0,29.2L0,2.8C0,1.3,1.3,0,2.8,0L32,0l-4,15.9L32,32H2.8C1.3,32,0,30.7,0,29.2z",
+			VirtualIn: "M32,2.8v26.3c0,1.6-1.3,2.8-2.8,2.8H6.5L0,25.9l5.2-10L0.7,7.2L6.5,0l22.7,0C30.7,0,32,1.3,32,2.8z",
+			VirtualOut: "M0,29.2L0,2.8C0,1.3,1.3,0,2.8,0L32,0l-5.8,7.2l4.5,8.7l-5.2,10L32,32H2.8C1.3,32,0,30.7,0,29.2z"
+		};
+		const backgroundPath = computed(() => __props.type && backgroundPaths[__props.type] || backgroundPaths.default);
+		const componentBackgroundTransformation = computed(() => {
+			const offset = 32 / 2;
+			return `translate(${offset}, ${offset}) scale(${componentBackgroundPortion}) translate(-${offset}, -${offset})`;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("g", null, [
+				createElementVNode("path", {
+					d: backgroundPath.value,
+					class: normalizeClass(["bg", { component: __props.isComponent }]),
+					"data-type": __props.isComponent ? null : __props.type
+				}, null, 10, _hoisted_1$1),
+				__props.isComponent && __props.type ? (openBlock(), createElementBlock("path", {
+					key: 0,
+					d: backgroundPath.value,
+					class: "bg",
+					"data-type": __props.type,
+					transform: componentBackgroundTransformation.value
+				}, null, 8, _hoisted_2$1)) : createCommentVNode("", true),
+				__props.icon ? (openBlock(), createElementBlock("image", {
+					key: 1,
+					"xlink:href": __props.icon,
+					x: "8",
+					y: "8",
+					width: "16",
+					height: "16",
+					"pointer-events": "none"
+				}, null, 8, _hoisted_3$1)) : createCommentVNode("", true)
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-fe80b11e"]]);
+//#endregion
+//#region src/nodes/NodePreview/NodePreview.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-size"];
+var _hoisted_2 = [
+	"viewBox",
+	"width",
+	"height"
+];
+var _hoisted_3 = {
+	key: 0,
+	class: "indicators"
 };
-const maxShownPorts = 3;
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "NodePreview",
-  props: {
-    type: { default: null },
-    isComponent: { type: Boolean, default: false },
-    indicatorIcon: { default: () => void 0 },
-    inPorts: { default: () => [] },
-    outPorts: { default: () => [] },
-    icon: { default: null },
-    hidePorts: { type: Boolean, default: false },
-    hideIndicators: { type: Boolean, default: false },
-    size: { default: "xlarge" }
-  },
-  setup(__props) {
-    useCssVars((_ctx) => ({
-      "v33c62e54": width.value,
-      "v347765ac": unref(NODE_SIZE)
-    }));
-    const horizontalSpaceForPorts = computed(() => __props.hidePorts ? 0 : PORT_SIZE);
-    const width = computed(() => NODE_SIZE + 2 * horizontalSpaceForPorts.value);
-    const height = NODE_SIZE;
-    const viewBox = computed(
-      () => `-${horizontalSpaceForPorts.value} 0 ${width.value} ${height}`
-    );
-    function yPortShift(index, total) {
-      let spacing = 1;
-      if (total === 2) {
-        spacing = 12;
-      } else if (total === 3) {
-        spacing = 2;
-      }
-      const totalHeight = total * PORT_SIZE + (total - 1) * spacing;
-      const delta = (NODE_SIZE - totalHeight) / 2;
-      return (spacing + PORT_SIZE) * index + delta + PORT_SIZE / 2;
-    }
-    const cutOffPorts = (ports) => {
-      if (ports.length > maxShownPorts) {
-        return [...ports.slice(0, maxShownPorts)];
-      }
-      return ports;
-    };
-    const visibleInPorts = computed(() => cutOffPorts(__props.inPorts));
-    const visibleOutPorts = computed(() => cutOffPorts(__props.outPorts));
-    const numberOfHiddenPorts = computed(
-      () => __props.inPorts.length - visibleInPorts.value.length + __props.outPorts.length - visibleOutPorts.value.length
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "node-preview",
-        "data-size": __props.size
-      }, [
-        (openBlock(), createElementBlock("svg", {
-          viewBox: viewBox.value,
-          width: width.value,
-          height: unref(height)
-        }, [
-          createVNode(SVGNodeTorso, {
-            type: __props.type,
-            icon: __props.icon,
-            "is-component": __props.isComponent
-          }, null, 8, ["type", "icon", "is-component"]),
-          !__props.hidePorts ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(visibleInPorts.value, (port, index) => {
-              return openBlock(), createBlock(SVGPortIcon, {
-                key: `in-${index}`,
-                color: port.color,
-                filled: !port.optional,
-                type: port.type,
-                transform: `translate(-${unref(PORT_SIZE) / 2}, ${yPortShift(index, visibleInPorts.value.length)})`
-              }, null, 8, ["color", "filled", "type", "transform"]);
-            }), 128)),
-            (openBlock(true), createElementBlock(Fragment, null, renderList(visibleOutPorts.value, (port, index) => {
-              return openBlock(), createBlock(SVGPortIcon, {
-                key: `out-${index}`,
-                color: port.color,
-                filled: !port.optional,
-                type: port.type,
-                transform: `translate(${unref(NODE_SIZE) + unref(PORT_SIZE) / 2}, ${yPortShift(index, visibleOutPorts.value.length)})`
-              }, null, 8, ["color", "filled", "type", "transform"]);
-            }), 128))
-          ], 64)) : createCommentVNode("", true)
-        ], 8, _hoisted_2)),
-        !__props.hideIndicators ? (openBlock(), createElementBlock("div", _hoisted_3, [
-          __props.indicatorIcon ? (openBlock(), createBlock(unref(KdsIcon), {
-            key: 0,
-            name: __props.indicatorIcon,
-            size: "small"
-          }, null, 8, ["name"])) : createCommentVNode("", true),
-          numberOfHiddenPorts.value > 0 && !__props.hidePorts ? (openBlock(), createBlock(unref(KdsIcon), {
-            key: 1,
-            name: "more-connections",
-            "aria-label": "Indication that some ports are hidden",
-            size: "small"
-          })) : createCommentVNode("", true)
-        ])) : createCommentVNode("", true)
-      ], 8, _hoisted_1);
-    };
-  }
-});
-
-const NodePreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4ca34076"]]);
+/**
+* SVG icon preview for a node or component, generated from its attributes
+*/
+var maxShownPorts = 3;
+//#endregion
+//#region src/nodes/NodePreview/NodePreview.vue
+var NodePreview_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "NodePreview",
+	props: {
+		type: { default: null },
+		isComponent: {
+			type: Boolean,
+			default: false
+		},
+		indicatorIcon: { default: () => void 0 },
+		inPorts: { default: () => [] },
+		outPorts: { default: () => [] },
+		icon: { default: null },
+		hidePorts: {
+			type: Boolean,
+			default: false
+		},
+		hideIndicators: {
+			type: Boolean,
+			default: false
+		},
+		size: { default: "xlarge" }
+	},
+	setup(__props) {
+		useCssVars((_ctx) => ({
+			"v040783bc": width.value,
+			"a08071d8": unref(32)
+		}));
+		const horizontalSpaceForPorts = computed(() => __props.hidePorts ? 0 : 8);
+		const width = computed(() => 32 + 2 * horizontalSpaceForPorts.value);
+		const height = 32;
+		const viewBox = computed(() => `-${horizontalSpaceForPorts.value} 0 ${width.value} ${height}`);
+		function yPortShift(index, total) {
+			let spacing = 1;
+			if (total === 2) spacing = 12;
+			else if (total === 3) spacing = 2;
+			const delta = (32 - (total * 8 + (total - 1) * spacing)) / 2;
+			return (spacing + 8) * index + delta + 8 / 2;
+		}
+		const cutOffPorts = (ports) => {
+			if (ports.length > maxShownPorts) return [...ports.slice(0, maxShownPorts)];
+			return ports;
+		};
+		const visibleInPorts = computed(() => cutOffPorts(__props.inPorts));
+		const visibleOutPorts = computed(() => cutOffPorts(__props.outPorts));
+		const numberOfHiddenPorts = computed(() => __props.inPorts.length - visibleInPorts.value.length + __props.outPorts.length - visibleOutPorts.value.length);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "node-preview",
+				"data-size": __props.size
+			}, [(openBlock(), createElementBlock("svg", {
+				viewBox: viewBox.value,
+				width: width.value,
+				height: unref(height)
+			}, [createVNode(SVGNodeTorso_default, {
+				type: __props.type,
+				icon: __props.icon,
+				"is-component": __props.isComponent
+			}, null, 8, [
+				"type",
+				"icon",
+				"is-component"
+			]), !__props.hidePorts ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleInPorts.value, (port, index) => {
+				return openBlock(), createBlock(SVGPortIcon_default, {
+					key: `in-${index}`,
+					color: port.color,
+					filled: !port.optional,
+					type: port.type,
+					transform: `translate(-${unref(8) / 2}, ${yPortShift(index, visibleInPorts.value.length)})`
+				}, null, 8, [
+					"color",
+					"filled",
+					"type",
+					"transform"
+				]);
+			}), 128)), (openBlock(true), createElementBlock(Fragment, null, renderList(visibleOutPorts.value, (port, index) => {
+				return openBlock(), createBlock(SVGPortIcon_default, {
+					key: `out-${index}`,
+					color: port.color,
+					filled: !port.optional,
+					type: port.type,
+					transform: `translate(${unref(32) + unref(8) / 2}, ${yPortShift(index, visibleOutPorts.value.length)})`
+				}, null, 8, [
+					"color",
+					"filled",
+					"type",
+					"transform"
+				]);
+			}), 128))], 64)) : createCommentVNode("", true)], 8, _hoisted_2)), !__props.hideIndicators ? (openBlock(), createElementBlock("div", _hoisted_3, [__props.indicatorIcon ? (openBlock(), createBlock(unref(KdsIcon), {
+				key: 0,
+				name: __props.indicatorIcon,
+				size: "small"
+			}, null, 8, ["name"])) : createCommentVNode("", true), numberOfHiddenPorts.value > 0 && !__props.hidePorts ? (openBlock(), createBlock(unref(KdsIcon), {
+				key: 1,
+				name: "more-connections",
+				"aria-label": "Indication that some ports are hidden",
+				size: "small"
+			})) : createCommentVNode("", true)])) : createCommentVNode("", true)], 8, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-a3b6413d"]]);
+//#endregion
+export { NodeDescriptionTabs_default as NodeDescriptionTabs, NodePreview_default as NodePreview, PortIcon_default as PortIcon };
 
-export { NodeDescriptionTabs, NodePreview, _sfc_main$7 as PortIcon };
-//# sourceMappingURL=nodes.js.map
+//# sourceMappingURL=nodes.js.map