@knime/product-features 1.2.4 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @knime/product-features
 
+## 2.0.0
+
+### Major Changes
+
+- 45a2a5a: Moved `PortIcon` out of `@knime/product-features` and into `@knime/kds-components` as `KdsPortIcon` (it had no KNIME-specific dependencies, so it belongs with the reusable components/accessories instead).
+
+  BREAKING CHANGES:
+
+  - `PortIcon`, `PortIconProps`, and `PortType` are no longer exported from `@knime/product-features`. Import `KdsPortIcon`, `KdsPortIconProps`, and `KdsPortType` from `@knime/kds-components` instead. The `type` and `color` props are unchanged; `filled` was renamed to `optional` (the inverted boolean — pass `optional: !wasFilled`), defaulting to `false`.
+
+### Patch Changes
+
+- Updated dependencies [45a2a5a]
+  - @knime/kds-components@2.6.0
+  - @knime/kds-styles@2.6.0
+
 ## 1.2.4
 
 ### Patch Changes

package/README.md

@@ -0,0 +1,46 @@
+# @knime/product-features
+
+This is part of the [KNIME Design System](../../README.md).
+
+This package contains composition patterns that combine KNIME Design System components with shared product logic.
+
+It's published as npm package: [@knime/product-features]
+
+## Installation
+
+```bash
+pnpm add @knime/product-features
+```
+
+## Using with Vitest, Nuxt, or Vite SSR
+
+The published JavaScript imports its CSS as a side effect (e.g.
+`import "./index.css"`), which bundlers handle automatically. When the package
+is instead evaluated by Node's native ESM loader — as **Vitest** and
+**Vite/Nuxt SSR** do by default, since they externalize `node_modules` — Node
+has no `.css` loader and throws `Unknown file extension ".css"`. Configure the
+consuming project once so `@knime/*` packages are processed instead of
+externalized:
+
+```ts
+// Vitest — vitest.config.ts
+export default defineConfig({
+  test: { server: { deps: { inline: [/@knime\//] } } },
+});
+```
+
+```ts
+// Vite SSR — vite.config.ts
+export default defineConfig({ ssr: { noExternal: [/@knime\//] } });
+```
+
+```ts
+// Nuxt — nuxt.config.ts
+export default defineNuxtConfig({ build: { transpile: [/@knime\//] } });
+```
+
+## License
+
+GPL 3 and Additional Permissions according to Sec. 7 (SEE the file LICENSE)
+
+[@knime/product-features]: https://www.npmjs.com/package/@knime/product-features

package/dist/nodes.css

@@ -15,57 +15,20 @@
 }
 }
 
-[data-type="flowVariable"] {
-&[data-v-3150264d] {
-  fill: transparent;
-  stroke: var(--kds-color-port-flow-variable);
-}
-&.filled[data-v-3150264d] {
-    fill: var(--kds-color-port-flow-variable);
-}
-}
-[data-type="table"] {
-&[data-v-3150264d] {
-  fill: transparent;
-  stroke: var(--kds-color-port-data);
-}
-&.filled[data-v-3150264d] {
-    fill: var(--kds-color-port-data);
-}
-}
-[data-type="other"],
-[data-type="generic"] {
-&[data-v-3150264d] {
-  fill: transparent;
-
-  /** dark mode for custom colors generated using oklch */
-  --base: var(--v45d93a60);
-  --color: light-dark(
-    var(--base),
-    oklch(from var(--base) calc(1 - l * 0.8) c h)
-  );
-
-  stroke: var(--color);
-}
-&.filled[data-v-3150264d] {
-    fill: var(--color);
-}
-}
-
-.wrapper[data-v-4920a7fa] {
+.wrapper[data-v-24ca3cba] {
   display: grid;
   grid-template-columns: var(--kds-spacing-container-0-5x) 1fr;
   gap: var(--kds-spacing-container-0-5x);
 }
-.icon[data-v-4920a7fa] {
+.icon[data-v-24ca3cba] {
   display: flex;
   align-items: center;
 }
-.name[data-v-4920a7fa],
-.description[data-v-4920a7fa] {
+.name[data-v-24ca3cba],
+.description[data-v-24ca3cba] {
   grid-column: 2;
 }
-.title[data-v-4920a7fa] {
+.title[data-v-24ca3cba] {
   font: var(--kds-font-base-title-small-strong);
 }
 
@@ -174,11 +137,11 @@
 }
 
 .node-preview {
-&[data-v-a3b6413d] {
+&[data-v-1ba51279] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-25x);
-  width: calc(var(--v040783bc) * 1px);
+  width: calc(var(--v6131ee48) * 1px);
 
   /*
    * `zoom` is used instead of `transform: scale()` so that the shrunk size
@@ -186,13 +149,13 @@
    * container alongside other elements.
    */
 }
-&[data-size="small"][data-v-a3b6413d] {
-    zoom: calc(12 / var(--a08071d8));
+&[data-size="small"][data-v-1ba51279] {
+    zoom: calc(12 / var(--v455a0ba0));
 }
-&[data-size="medium"][data-v-a3b6413d] {
+&[data-size="medium"][data-v-1ba51279] {
     zoom: 0.5;
 }
-& .indicators[data-v-a3b6413d] {
+& .indicators[data-v-1ba51279] {
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
     justify-content: center;

package/dist/nodes.js

@@ -1,13 +1,13 @@
 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 { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useCssVars, withCtx } from "vue";
+import { KdsAccordion, KdsDescription, KdsEmptyState, KdsIcon, KdsPortIcon, KdsTabBar, PORT_SIZE } 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 = {
+var _hoisted_1$7 = { class: "name" };
+var _hoisted_2$4 = {
 	key: 1,
 	class: "single-option-wrapper"
 };
-var _hoisted_3$4 = { class: "name" };
+var _hoisted_3$3 = { class: "name" };
 //#endregion
 //#region src/nodes/NodeDescriptionTabs/OptionsTab.vue
 var OptionsTab_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -44,13 +44,13 @@ var OptionsTab_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 						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), {
+						}, [createElementVNode("span", _hoisted_1$7, 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), {
+			})]), 1032, ["modelValue", "items"])) : createCommentVNode("", true), __props.options.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_2$4, [__props.options[0].sectionDescription ? (openBlock(), createBlock(unref(KdsDescription), {
 				key: 0,
 				text: __props.options[0].sectionDescription,
 				"render-as-html": __props.renderAsHtml,
@@ -59,7 +59,7 @@ var OptionsTab_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				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), {
+				}, [createElementVNode("span", _hoisted_3$3, 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"])]);
@@ -68,127 +68,6 @@ var OptionsTab_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 	}
 }), [["__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);
-		};
-	}
-});
-//#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" };
@@ -205,14 +84,14 @@ var PortTemplateInfo_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/
 	setup(__props) {
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1$6, [
-				createElementVNode("div", _hoisted_2$3, [createVNode(PortIcon_default, {
+				createElementVNode("div", _hoisted_2$3, [createVNode(unref(KdsPortIcon), {
 					type: __props.port.type,
 					color: __props.port.color,
-					filled: !__props.port.optional
+					optional: __props.port.optional
 				}, null, 8, [
 					"type",
 					"color",
-					"filled"
+					"optional"
 				])]),
 				createElementVNode("span", _hoisted_3$2, "Type: " + toDisplayString(__props.port.typeDisplayName), 1),
 				createElementVNode("span", _hoisted_4, "Name: " + toDisplayString(__props.port.name), 1),
@@ -225,7 +104,7 @@ var PortTemplateInfo_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-4920a7fa"]]);
+}), [["__scopeId", "data-v-24ca3cba"]]);
 //#endregion
 //#region src/nodes/NodeDescriptionTabs/PortGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$5 = { class: "port-group-card" };
@@ -578,10 +457,10 @@ var NodePreview_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 	},
 	setup(__props) {
 		useCssVars((_ctx) => ({
-			"v040783bc": width.value,
-			"a08071d8": unref(32)
+			"v6131ee48": width.value,
+			"v455a0ba0": unref(32)
 		}));
-		const horizontalSpaceForPorts = computed(() => __props.hidePorts ? 0 : 8);
+		const horizontalSpaceForPorts = computed(() => __props.hidePorts ? 0 : PORT_SIZE);
 		const width = computed(() => 32 + 2 * horizontalSpaceForPorts.value);
 		const height = 32;
 		const viewBox = computed(() => `-${horizontalSpaceForPorts.value} 0 ${width.value} ${height}`);
@@ -589,8 +468,8 @@ var NodePreview_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			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 delta = (32 - (total * PORT_SIZE + (total - 1) * spacing)) / 2;
+			return (spacing + PORT_SIZE) * index + delta + PORT_SIZE / 2;
 		}
 		const cutOffPorts = (ports) => {
 			if (ports.length > maxShownPorts) return [...ports.slice(0, maxShownPorts)];
@@ -616,28 +495,30 @@ var NodePreview_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 				"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, {
+				return openBlock(), createBlock(unref(KdsPortIcon), {
 					key: `in-${index}`,
 					color: port.color,
-					filled: !port.optional,
+					optional: port.optional,
 					type: port.type,
-					transform: `translate(-${unref(8) / 2}, ${yPortShift(index, visibleInPorts.value.length)})`
+					standalone: false,
+					transform: `translate(-${unref(PORT_SIZE) / 2}, ${yPortShift(index, visibleInPorts.value.length)})`
 				}, null, 8, [
 					"color",
-					"filled",
+					"optional",
 					"type",
 					"transform"
 				]);
 			}), 128)), (openBlock(true), createElementBlock(Fragment, null, renderList(visibleOutPorts.value, (port, index) => {
-				return openBlock(), createBlock(SVGPortIcon_default, {
+				return openBlock(), createBlock(unref(KdsPortIcon), {
 					key: `out-${index}`,
 					color: port.color,
-					filled: !port.optional,
+					optional: port.optional,
 					type: port.type,
-					transform: `translate(${unref(32) + unref(8) / 2}, ${yPortShift(index, visibleOutPorts.value.length)})`
+					standalone: false,
+					transform: `translate(${unref(32) + unref(PORT_SIZE) / 2}, ${yPortShift(index, visibleOutPorts.value.length)})`
 				}, null, 8, [
 					"color",
-					"filled",
+					"optional",
 					"type",
 					"transform"
 				]);
@@ -653,8 +534,8 @@ var NodePreview_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			})) : createCommentVNode("", true)])) : createCommentVNode("", true)], 8, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-a3b6413d"]]);
+}), [["__scopeId", "data-v-1ba51279"]]);
 //#endregion
-export { NodeDescriptionTabs_default as NodeDescriptionTabs, NodePreview_default as NodePreview, PortIcon_default as PortIcon };
+export { NodeDescriptionTabs_default as NodeDescriptionTabs, NodePreview_default as NodePreview };
 
 //# sourceMappingURL=nodes.js.map

package/dist/nodes.js.map

@@ -1 +1 @@
-{"version":3,"file":"nodes.js","names":["$attrs"],"sources":["../src/nodes/NodeDescriptionTabs/OptionsTab.vue","../src/nodes/NodeDescriptionTabs/OptionsTab.vue","../src/nodes/PortIcon/constants.ts","../src/nodes/PortIcon/SVGPortIcon.vue","../src/nodes/PortIcon/SVGPortIcon.vue","../src/nodes/PortIcon/PortIcon.vue","../src/nodes/PortIcon/PortIcon.vue","../src/nodes/NodeDescriptionTabs/PortTemplateInfo.vue","../src/nodes/NodeDescriptionTabs/PortTemplateInfo.vue","../src/nodes/NodeDescriptionTabs/PortGroup.vue","../src/nodes/NodeDescriptionTabs/PortGroup.vue","../src/nodes/NodeDescriptionTabs/PortsTab.vue","../src/nodes/NodeDescriptionTabs/PortsTab.vue","../src/nodes/NodeDescriptionTabs/ViewsTab.vue","../src/nodes/NodeDescriptionTabs/ViewsTab.vue","../src/nodes/NodeDescriptionTabs/NodeDescriptionTabs.vue","../src/nodes/NodeDescriptionTabs/NodeDescriptionTabs.vue","../src/nodes/NodePreview/SVGNodeTorso.vue","../src/nodes/NodePreview/SVGNodeTorso.vue","../src/nodes/NodePreview/NodePreview.vue","../src/nodes/NodePreview/NodePreview.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\nimport {\n  KdsAccordion,\n  type KdsAccordionItem,\n  KdsDescription,\n} from \"@knime/kds-components\";\n\nimport type { NodeDescriptionOptions } from \"./types\";\n\ntype Props = {\n  options: Array<NodeDescriptionOptions>;\n  renderAsHtml?: boolean;\n};\n\nconst { options, renderAsHtml } = defineProps<Props>();\n\ntype AccordionItemWithContent = KdsAccordionItem & {\n  description?: string;\n  content: NodeDescriptionOptions[\"fields\"];\n};\n\nconst accordionItems = computed<AccordionItemWithContent[]>(() => {\n  return options.map(\n    (option, index) =>\n      ({\n        id: `section-${index}`,\n        headline: option.sectionName,\n        description: option.sectionDescription,\n        content: option.fields,\n      }) satisfies AccordionItemWithContent,\n  );\n});\n\nconst modelValue = ref<string[]>([]);\n</script>\n\n<template>\n  <div>\n    <KdsAccordion\n      v-if=\"options.length > 1\"\n      v-model=\"modelValue\"\n      :items=\"accordionItems\"\n    >\n      <template v-for=\"item in accordionItems\" :key=\"item.id\" #[item.id]>\n        <KdsDescription\n          v-if=\"item.description\"\n          :text=\"item.description\"\n          :render-as-html=\"renderAsHtml\"\n          class=\"section-description\"\n        />\n\n        <template v-for=\"field in item.content\" :key=\"field.name\">\n          <div class=\"option-content\">\n            <span class=\"name\">\n              {{ field.name }} {{ field.optional ? \"(optional)\" : \"\" }}\n            </span>\n\n            <KdsDescription\n              :text=\"field.description\"\n              :render-as-html=\"renderAsHtml\"\n            />\n          </div>\n        </template>\n      </template>\n    </KdsAccordion>\n\n    <div v-if=\"options.length === 1\" class=\"single-option-wrapper\">\n      <KdsDescription\n        v-if=\"options[0].sectionDescription\"\n        :text=\"options[0].sectionDescription\"\n        :render-as-html=\"renderAsHtml\"\n        class=\"section-description\"\n      />\n\n      <template v-for=\"field in options[0].fields\" :key=\"field.name\">\n        <div class=\"option-content\">\n          <span class=\"name\">\n            {{ field.name }} {{ field.optional ? \"(optional)\" : \"\" }}\n          </span>\n\n          <KdsDescription\n            :text=\"field.description\"\n            :render-as-html=\"renderAsHtml\"\n          />\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.section-description {\n  margin-bottom: var(--kds-spacing-container-1x);\n}\n\n.single-option-wrapper {\n  display: flex;\n  flex-direction: column;\n  padding: var(--kds-spacing-container-1x);\n  background: var(--kds-color-surface-muted);\n  border-radius: var(--kds-border-radius-container-0-37x);\n}\n\n.option-content {\n  & .name {\n    font: var(--kds-font-base-title-small-strong);\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\nimport {\n  KdsAccordion,\n  type KdsAccordionItem,\n  KdsDescription,\n} from \"@knime/kds-components\";\n\nimport type { NodeDescriptionOptions } from \"./types\";\n\ntype Props = {\n  options: Array<NodeDescriptionOptions>;\n  renderAsHtml?: boolean;\n};\n\nconst { options, renderAsHtml } = defineProps<Props>();\n\ntype AccordionItemWithContent = KdsAccordionItem & {\n  description?: string;\n  content: NodeDescriptionOptions[\"fields\"];\n};\n\nconst accordionItems = computed<AccordionItemWithContent[]>(() => {\n  return options.map(\n    (option, index) =>\n      ({\n        id: `section-${index}`,\n        headline: option.sectionName,\n        description: option.sectionDescription,\n        content: option.fields,\n      }) satisfies AccordionItemWithContent,\n  );\n});\n\nconst modelValue = ref<string[]>([]);\n</script>\n\n<template>\n  <div>\n    <KdsAccordion\n      v-if=\"options.length > 1\"\n      v-model=\"modelValue\"\n      :items=\"accordionItems\"\n    >\n      <template v-for=\"item in accordionItems\" :key=\"item.id\" #[item.id]>\n        <KdsDescription\n          v-if=\"item.description\"\n          :text=\"item.description\"\n          :render-as-html=\"renderAsHtml\"\n          class=\"section-description\"\n        />\n\n        <template v-for=\"field in item.content\" :key=\"field.name\">\n          <div class=\"option-content\">\n            <span class=\"name\">\n              {{ field.name }} {{ field.optional ? \"(optional)\" : \"\" }}\n            </span>\n\n            <KdsDescription\n              :text=\"field.description\"\n              :render-as-html=\"renderAsHtml\"\n            />\n          </div>\n        </template>\n      </template>\n    </KdsAccordion>\n\n    <div v-if=\"options.length === 1\" class=\"single-option-wrapper\">\n      <KdsDescription\n        v-if=\"options[0].sectionDescription\"\n        :text=\"options[0].sectionDescription\"\n        :render-as-html=\"renderAsHtml\"\n        class=\"section-description\"\n      />\n\n      <template v-for=\"field in options[0].fields\" :key=\"field.name\">\n        <div class=\"option-content\">\n          <span class=\"name\">\n            {{ field.name }} {{ field.optional ? \"(optional)\" : \"\" }}\n          </span>\n\n          <KdsDescription\n            :text=\"field.description\"\n            :render-as-html=\"renderAsHtml\"\n          />\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.section-description {\n  margin-bottom: var(--kds-spacing-container-1x);\n}\n\n.single-option-wrapper {\n  display: flex;\n  flex-direction: column;\n  padding: var(--kds-spacing-container-1x);\n  background: var(--kds-color-surface-muted);\n  border-radius: var(--kds-border-radius-container-0-37x);\n}\n\n.option-content {\n  & .name {\n    font: var(--kds-font-base-title-small-strong);\n  }\n}\n</style>\n","export const PORT_SIZE = 8; // px\nexport const PORT_STROKE_WIDTH = 1.4; // px\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { PORT_SIZE, PORT_STROKE_WIDTH } from \"./constants\";\nimport type { PortIconProps } from \"./types\";\n\nconst { filled = true, type, color } = defineProps<PortIconProps>();\n\nconst trianglePath = computed(() => {\n  // draw triangle around middle point\n  let [x1, y1, x2, y3] = [\n    -PORT_SIZE / 2,\n    -PORT_SIZE / 2,\n    PORT_SIZE / 2,\n    PORT_SIZE / 2,\n  ];\n\n  // y and d are chosen so the triangle (including strokeWidth) fits precisely in the port (portSize x portSize)\n  /* eslint-disable no-magic-numbers */\n  const d = Math.sqrt(5) / 2;\n  const y = d / 2 + 1 / 4;\n  /* eslint-enable no-magic-numbers */\n\n  // move points towards the center of the triangle according to strokeWidth\n  x1 += PORT_STROKE_WIDTH / 2;\n  x2 -= PORT_STROKE_WIDTH * d;\n  y1 += PORT_STROKE_WIDTH * y;\n  y3 -= PORT_STROKE_WIDTH * y;\n\n  // draw triangle clock-wise\n  return `${x1},${y1} ${x2},${0} ${x1},${y3}`;\n});\n</script>\n\n<template>\n  <!-- data table port -->\n  <polygon\n    v-if=\"type === 'table'\"\n    :points=\"trianglePath\"\n    :class=\"{ filled }\"\n    :data-type=\"type\"\n    :stroke-width=\"PORT_STROKE_WIDTH\"\n    v-bind=\"$attrs\"\n  />\n\n  <!-- flow variable port -->\n  <circle\n    v-else-if=\"type === 'flowVariable'\"\n    :r=\"PORT_SIZE / 2 - PORT_STROKE_WIDTH / 2\"\n    :class=\"{ filled }\"\n    :data-type=\"type\"\n    :stroke-width=\"PORT_STROKE_WIDTH\"\n    v-bind=\"$attrs\"\n  />\n\n  <!-- other port -->\n  <rect\n    v-else\n    :width=\"PORT_SIZE - PORT_STROKE_WIDTH\"\n    :height=\"PORT_SIZE - PORT_STROKE_WIDTH\"\n    :x=\"-PORT_SIZE / 2 + PORT_STROKE_WIDTH / 2\"\n    :y=\"-PORT_SIZE / 2 + PORT_STROKE_WIDTH / 2\"\n    :class=\"{ filled }\"\n    :data-type=\"type\"\n    :stroke-width=\"PORT_STROKE_WIDTH\"\n    v-bind=\"$attrs\"\n  />\n</template>\n\n<style scoped>\n[data-type=\"flowVariable\"] {\n  fill: transparent;\n  stroke: var(--kds-color-port-flow-variable);\n\n  &.filled {\n    fill: var(--kds-color-port-flow-variable);\n  }\n}\n\n[data-type=\"table\"] {\n  fill: transparent;\n  stroke: var(--kds-color-port-data);\n\n  &.filled {\n    fill: var(--kds-color-port-data);\n  }\n}\n\n[data-type=\"other\"],\n[data-type=\"generic\"] {\n  fill: transparent;\n\n  /** dark mode for custom colors generated using oklch */\n  --base: v-bind(color);\n  --color: light-dark(\n    var(--base),\n    oklch(from var(--base) calc(1 - l * 0.8) c h)\n  );\n\n  stroke: var(--color);\n\n  &.filled {\n    fill: var(--color);\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { PORT_SIZE, PORT_STROKE_WIDTH } from \"./constants\";\nimport type { PortIconProps } from \"./types\";\n\nconst { filled = true, type, color } = defineProps<PortIconProps>();\n\nconst trianglePath = computed(() => {\n  // draw triangle around middle point\n  let [x1, y1, x2, y3] = [\n    -PORT_SIZE / 2,\n    -PORT_SIZE / 2,\n    PORT_SIZE / 2,\n    PORT_SIZE / 2,\n  ];\n\n  // y and d are chosen so the triangle (including strokeWidth) fits precisely in the port (portSize x portSize)\n  /* eslint-disable no-magic-numbers */\n  const d = Math.sqrt(5) / 2;\n  const y = d / 2 + 1 / 4;\n  /* eslint-enable no-magic-numbers */\n\n  // move points towards the center of the triangle according to strokeWidth\n  x1 += PORT_STROKE_WIDTH / 2;\n  x2 -= PORT_STROKE_WIDTH * d;\n  y1 += PORT_STROKE_WIDTH * y;\n  y3 -= PORT_STROKE_WIDTH * y;\n\n  // draw triangle clock-wise\n  return `${x1},${y1} ${x2},${0} ${x1},${y3}`;\n});\n</script>\n\n<template>\n  <!-- data table port -->\n  <polygon\n    v-if=\"type === 'table'\"\n    :points=\"trianglePath\"\n    :class=\"{ filled }\"\n    :data-type=\"type\"\n    :stroke-width=\"PORT_STROKE_WIDTH\"\n    v-bind=\"$attrs\"\n  />\n\n  <!-- flow variable port -->\n  <circle\n    v-else-if=\"type === 'flowVariable'\"\n    :r=\"PORT_SIZE / 2 - PORT_STROKE_WIDTH / 2\"\n    :class=\"{ filled }\"\n    :data-type=\"type\"\n    :stroke-width=\"PORT_STROKE_WIDTH\"\n    v-bind=\"$attrs\"\n  />\n\n  <!-- other port -->\n  <rect\n    v-else\n    :width=\"PORT_SIZE - PORT_STROKE_WIDTH\"\n    :height=\"PORT_SIZE - PORT_STROKE_WIDTH\"\n    :x=\"-PORT_SIZE / 2 + PORT_STROKE_WIDTH / 2\"\n    :y=\"-PORT_SIZE / 2 + PORT_STROKE_WIDTH / 2\"\n    :class=\"{ filled }\"\n    :data-type=\"type\"\n    :stroke-width=\"PORT_STROKE_WIDTH\"\n    v-bind=\"$attrs\"\n  />\n</template>\n\n<style scoped>\n[data-type=\"flowVariable\"] {\n  fill: transparent;\n  stroke: var(--kds-color-port-flow-variable);\n\n  &.filled {\n    fill: var(--kds-color-port-flow-variable);\n  }\n}\n\n[data-type=\"table\"] {\n  fill: transparent;\n  stroke: var(--kds-color-port-data);\n\n  &.filled {\n    fill: var(--kds-color-port-data);\n  }\n}\n\n[data-type=\"other\"],\n[data-type=\"generic\"] {\n  fill: transparent;\n\n  /** dark mode for custom colors generated using oklch */\n  --base: v-bind(color);\n  --color: light-dark(\n    var(--base),\n    oklch(from var(--base) calc(1 - l * 0.8) c h)\n  );\n\n  stroke: var(--color);\n\n  &.filled {\n    fill: var(--color);\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport SVGPortIcon from \"./SVGPortIcon.vue\";\nimport { PORT_SIZE } from \"./constants\";\nimport type { PortIconProps } from \"./types\";\n\nconst { filled = true, type, color } = defineProps<PortIconProps>();\n\nconst viewBox = computed(() =>\n  [-PORT_SIZE / 2, -PORT_SIZE / 2, PORT_SIZE, PORT_SIZE].join(\" \"),\n);\n</script>\n\n<template>\n  <svg :viewBox=\"viewBox\" :width=\"PORT_SIZE\" :height=\"PORT_SIZE\">\n    <SVGPortIcon :filled :type :color />\n  </svg>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport SVGPortIcon from \"./SVGPortIcon.vue\";\nimport { PORT_SIZE } from \"./constants\";\nimport type { PortIconProps } from \"./types\";\n\nconst { filled = true, type, color } = defineProps<PortIconProps>();\n\nconst viewBox = computed(() =>\n  [-PORT_SIZE / 2, -PORT_SIZE / 2, PORT_SIZE, PORT_SIZE].join(\" \"),\n);\n</script>\n\n<template>\n  <svg :viewBox=\"viewBox\" :width=\"PORT_SIZE\" :height=\"PORT_SIZE\">\n    <SVGPortIcon :filled :type :color />\n  </svg>\n</template>\n","<script setup lang=\"ts\">\nimport { KdsDescription } from \"@knime/kds-components\";\n\nimport PortIcon from \"../PortIcon/PortIcon.vue\";\n\nimport type { PortTemplate } from \"./types\";\n\ntype Props = {\n  port: PortTemplate;\n  showDescription: boolean;\n};\n\ndefineProps<Props>();\n</script>\n\n<template>\n  <div class=\"wrapper\">\n    <div class=\"icon\">\n      <PortIcon\n        :type=\"port.type\"\n        :color=\"port.color\"\n        :filled=\"!port.optional\"\n      />\n    </div>\n    <span class=\"title\">Type: {{ port.typeDisplayName }}</span>\n\n    <span class=\"name title\">Name: {{ port.name }}</span>\n\n    <KdsDescription\n      v-if=\"showDescription\"\n      class=\"description\"\n      :text=\"port.description\"\n      render-as-html\n    />\n  </div>\n</template>\n\n<style scoped>\n.wrapper {\n  display: grid;\n  grid-template-columns: var(--kds-spacing-container-0-5x) 1fr;\n  gap: var(--kds-spacing-container-0-5x);\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n}\n\n.name,\n.description {\n  grid-column: 2;\n}\n\n.title {\n  font: var(--kds-font-base-title-small-strong);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { KdsDescription } from \"@knime/kds-components\";\n\nimport PortIcon from \"../PortIcon/PortIcon.vue\";\n\nimport type { PortTemplate } from \"./types\";\n\ntype Props = {\n  port: PortTemplate;\n  showDescription: boolean;\n};\n\ndefineProps<Props>();\n</script>\n\n<template>\n  <div class=\"wrapper\">\n    <div class=\"icon\">\n      <PortIcon\n        :type=\"port.type\"\n        :color=\"port.color\"\n        :filled=\"!port.optional\"\n      />\n    </div>\n    <span class=\"title\">Type: {{ port.typeDisplayName }}</span>\n\n    <span class=\"name title\">Name: {{ port.name }}</span>\n\n    <KdsDescription\n      v-if=\"showDescription\"\n      class=\"description\"\n      :text=\"port.description\"\n      render-as-html\n    />\n  </div>\n</template>\n\n<style scoped>\n.wrapper {\n  display: grid;\n  grid-template-columns: var(--kds-spacing-container-0-5x) 1fr;\n  gap: var(--kds-spacing-container-0-5x);\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n}\n\n.name,\n.description {\n  grid-column: 2;\n}\n\n.title {\n  font: var(--kds-font-base-title-small-strong);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { KdsDescription } from \"@knime/kds-components\";\n\nimport PortTemplateInfo from \"./PortTemplateInfo.vue\";\nimport type { PortTemplate } from \"./types\";\n\ntype Props = {\n  name: string;\n  description?: string;\n  ports: Array<PortTemplate>;\n  isDynamicGroup?: boolean;\n};\n\ndefineProps<Props>();\n</script>\n\n<template>\n  <div class=\"port-group-card\">\n    <span class=\"group-name\">{{ name }}</span>\n\n    <KdsDescription v-if=\"description\" :text=\"description\" render-as-html />\n\n    <template v-for=\"port in ports\" :key=\"port.id\">\n      <PortTemplateInfo :port=\"port\" :show-description=\"!isDynamicGroup\" />\n    </template>\n  </div>\n</template>\n\n<style scoped>\n.port-group-card {\n  display: flex;\n  flex-direction: column;\n  gap: var(--kds-spacing-container-0-75x);\n  padding: var(--kds-spacing-container-1x);\n  background: var(--kds-color-surface-muted);\n  border-radius: var(--kds-border-radius-container-0-37x);\n\n  & .group-name {\n    font: var(--kds-font-base-title-small-strong);\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { KdsDescription } from \"@knime/kds-components\";\n\nimport PortTemplateInfo from \"./PortTemplateInfo.vue\";\nimport type { PortTemplate } from \"./types\";\n\ntype Props = {\n  name: string;\n  description?: string;\n  ports: Array<PortTemplate>;\n  isDynamicGroup?: boolean;\n};\n\ndefineProps<Props>();\n</script>\n\n<template>\n  <div class=\"port-group-card\">\n    <span class=\"group-name\">{{ name }}</span>\n\n    <KdsDescription v-if=\"description\" :text=\"description\" render-as-html />\n\n    <template v-for=\"port in ports\" :key=\"port.id\">\n      <PortTemplateInfo :port=\"port\" :show-description=\"!isDynamicGroup\" />\n    </template>\n  </div>\n</template>\n\n<style scoped>\n.port-group-card {\n  display: flex;\n  flex-direction: column;\n  gap: var(--kds-spacing-container-0-75x);\n  padding: var(--kds-spacing-container-1x);\n  background: var(--kds-color-surface-muted);\n  border-radius: var(--kds-border-radius-container-0-37x);\n\n  & .group-name {\n    font: var(--kds-font-base-title-small-strong);\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport PortGroup from \"./PortGroup.vue\";\nimport type { DynamicPortGroup, PortTemplate } from \"./types\";\n\ntype Props = {\n  inputPorts: Array<PortTemplate>;\n  outputPorts: Array<PortTemplate>;\n  dynamicInputGroups?: Array<DynamicPortGroup>;\n  dynamicOutputGroups?: Array<DynamicPortGroup>;\n};\n\nconst { dynamicInputGroups = [], dynamicOutputGroups = [] } =\n  defineProps<Props>();\n</script>\n\n<template>\n  <div class=\"port-list\">\n    <PortGroup\n      v-if=\"inputPorts.length > 0\"\n      name=\"Input ports\"\n      :ports=\"inputPorts\"\n    />\n\n    <PortGroup\n      v-if=\"outputPorts.length > 0\"\n      name=\"Output ports\"\n      :ports=\"outputPorts\"\n    />\n\n    <template v-for=\"group in dynamicInputGroups\" :key=\"group.name\">\n      <PortGroup\n        v-if=\"group.types.length > 0\"\n        :name=\"group.name + ' (Dynamic Inport)'\"\n        :description=\"group.description\"\n        :ports=\"group.types\"\n        is-dynamic-group\n      />\n    </template>\n\n    <template v-for=\"group in dynamicOutputGroups\" :key=\"group.name\">\n      <PortGroup\n        v-if=\"group.types.length > 0\"\n        :name=\"group.name + ' (Dynamic Outport)'\"\n        :description=\"group.description\"\n        :ports=\"group.types\"\n        is-dynamic-group\n      />\n    </template>\n  </div>\n</template>\n\n<style scoped>\n.port-list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--kds-spacing-container-0-5x);\n}\n</style>\n","<script setup lang=\"ts\">\nimport PortGroup from \"./PortGroup.vue\";\nimport type { DynamicPortGroup, PortTemplate } from \"./types\";\n\ntype Props = {\n  inputPorts: Array<PortTemplate>;\n  outputPorts: Array<PortTemplate>;\n  dynamicInputGroups?: Array<DynamicPortGroup>;\n  dynamicOutputGroups?: Array<DynamicPortGroup>;\n};\n\nconst { dynamicInputGroups = [], dynamicOutputGroups = [] } =\n  defineProps<Props>();\n</script>\n\n<template>\n  <div class=\"port-list\">\n    <PortGroup\n      v-if=\"inputPorts.length > 0\"\n      name=\"Input ports\"\n      :ports=\"inputPorts\"\n    />\n\n    <PortGroup\n      v-if=\"outputPorts.length > 0\"\n      name=\"Output ports\"\n      :ports=\"outputPorts\"\n    />\n\n    <template v-for=\"group in dynamicInputGroups\" :key=\"group.name\">\n      <PortGroup\n        v-if=\"group.types.length > 0\"\n        :name=\"group.name + ' (Dynamic Inport)'\"\n        :description=\"group.description\"\n        :ports=\"group.types\"\n        is-dynamic-group\n      />\n    </template>\n\n    <template v-for=\"group in dynamicOutputGroups\" :key=\"group.name\">\n      <PortGroup\n        v-if=\"group.types.length > 0\"\n        :name=\"group.name + ' (Dynamic Outport)'\"\n        :description=\"group.description\"\n        :ports=\"group.types\"\n        is-dynamic-group\n      />\n    </template>\n  </div>\n</template>\n\n<style scoped>\n.port-list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--kds-spacing-container-0-5x);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { KdsDescription } from \"@knime/kds-components\";\n\nimport type { NodeDescriptionView } from \"./types\";\n\ntype Props = {\n  views: Array<NodeDescriptionView>;\n};\n\nconst props = defineProps<Props>();\n\nconst viewsWithId = computed<Array<NodeDescriptionView & { id: string }>>(() =>\n  props.views.map((view, index) => {\n    const id = `view-${index}`;\n    return { id, ...view };\n  }),\n);\n</script>\n\n<template>\n  <div v-for=\"view in viewsWithId\" :key=\"view.id\" class=\"card-wrapper\">\n    <span class=\"name\">{{ view.name }}</span>\n    <KdsDescription\n      v-if=\"view.description\"\n      :text=\"view.description\"\n      render-as-html\n    />\n  </div>\n</template>\n\n<style scoped>\n.card-wrapper {\n  display: flex;\n  flex-direction: column;\n  padding: var(--kds-spacing-container-1x);\n  margin-bottom: var(--kds-spacing-container-0-25x);\n  background: var(--kds-color-surface-muted);\n  border-radius: var(--kds-border-radius-container-0-37x);\n}\n\n.name {\n  font: var(--kds-font-base-title-small-strong);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { KdsDescription } from \"@knime/kds-components\";\n\nimport type { NodeDescriptionView } from \"./types\";\n\ntype Props = {\n  views: Array<NodeDescriptionView>;\n};\n\nconst props = defineProps<Props>();\n\nconst viewsWithId = computed<Array<NodeDescriptionView & { id: string }>>(() =>\n  props.views.map((view, index) => {\n    const id = `view-${index}`;\n    return { id, ...view };\n  }),\n);\n</script>\n\n<template>\n  <div v-for=\"view in viewsWithId\" :key=\"view.id\" class=\"card-wrapper\">\n    <span class=\"name\">{{ view.name }}</span>\n    <KdsDescription\n      v-if=\"view.description\"\n      :text=\"view.description\"\n      render-as-html\n    />\n  </div>\n</template>\n\n<style scoped>\n.card-wrapper {\n  display: flex;\n  flex-direction: column;\n  padding: var(--kds-spacing-container-1x);\n  margin-bottom: var(--kds-spacing-container-0-25x);\n  background: var(--kds-color-surface-muted);\n  border-radius: var(--kds-border-radius-container-0-37x);\n}\n\n.name {\n  font: var(--kds-font-base-title-small-strong);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\nimport {\n  KdsEmptyState,\n  KdsTabBar,\n  type KdsTabBarItem,\n} from \"@knime/kds-components\";\n\nimport OptionsTab from \"./OptionsTab.vue\";\nimport PortsTab from \"./PortsTab.vue\";\nimport ViewsTab from \"./ViewsTab.vue\";\nimport type { NodeDescriptionTabsProps } from \"./types\";\n\nconst {\n  inputPorts = [],\n  outputPorts = [],\n  dynamicInputPorts = [],\n  dynamicOutputPorts = [],\n  optionsData = [],\n  viewsData = [],\n  emptyText = \"No ports, options or views available.\",\n  renderAsHtml = false,\n  tabBarFullWidth = false,\n} = defineProps<NodeDescriptionTabsProps>();\n\nconst TAB_IDS = {\n  PORTS: \"ports\",\n  OPTIONS: \"options\",\n  VIEW: \"view\",\n} as const;\n\ntype TabIds = (typeof TAB_IDS)[keyof typeof TAB_IDS];\n\nconst activeTab = ref<TabIds | undefined>();\n\nconst hasPorts = computed(\n  () =>\n    inputPorts.length > 0 ||\n    outputPorts.length > 0 ||\n    dynamicInputPorts.length > 0 ||\n    dynamicOutputPorts.length > 0,\n);\n\nconst tabs = computed<KdsTabBarItem[]>(() => [\n  {\n    id: \"tab-ports\",\n    value: TAB_IDS.PORTS,\n    label: \"Ports\",\n    panelId: \"panel-ports\",\n    accessory: {\n      type: \"icon\",\n      name: \"connection\",\n    },\n    disabled: !hasPorts.value,\n  },\n  {\n    id: \"tab-options\",\n    value: TAB_IDS.OPTIONS,\n    label: \"Options\",\n    panelId: \"panel-options\",\n    accessory: {\n      type: \"icon\",\n      name: \"parameter\",\n    },\n    disabled: optionsData.length < 1,\n  },\n  {\n    id: \"tab-view\",\n    value: TAB_IDS.VIEW,\n    label: \"View\",\n    panelId: \"panel-view\",\n    accessory: {\n      type: \"icon\",\n      name: \"eye\",\n    },\n    disabled: viewsData.length < 1,\n  },\n]);\n</script>\n\n<template>\n  <div>\n    <KdsTabBar\n      v-model=\"activeTab\"\n      :full-width=\"tabBarFullWidth\"\n      size=\"small\"\n      :tabs=\"tabs\"\n    />\n\n    <div class=\"content\">\n      <PortsTab\n        v-if=\"activeTab === TAB_IDS.PORTS\"\n        id=\"panel-ports\"\n        role=\"tabpanel\"\n        aria-labelledby=\"tab-ports\"\n        tabindex=\"0\"\n        :input-ports=\"inputPorts\"\n        :output-ports=\"outputPorts\"\n        :dynamic-input-groups=\"dynamicInputPorts\"\n        :dynamic-output-groups=\"dynamicOutputPorts\"\n      />\n\n      <OptionsTab\n        v-if=\"activeTab === TAB_IDS.OPTIONS\"\n        id=\"panel-options\"\n        role=\"tabpanel\"\n        aria-labelledby=\"tab-options\"\n        tabindex=\"0\"\n        :options=\"optionsData\"\n        :render-as-html=\"renderAsHtml\"\n      />\n\n      <ViewsTab\n        v-if=\"activeTab === TAB_IDS.VIEW\"\n        id=\"panel-view\"\n        role=\"tabpanel\"\n        aria-labelledby=\"tab-view\"\n        tabindex=\"0\"\n        :views=\"viewsData\"\n      />\n\n      <KdsEmptyState\n        v-if=\"!activeTab\"\n        :headline=\"emptyText\"\n        class=\"empty-state\"\n      />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.content {\n  padding: var(--kds-spacing-container-0-5x) 0;\n  color: var(--kds-color-text-and-icon-neutral);\n}\n\n.empty-state {\n  margin: 0 auto;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\nimport {\n  KdsEmptyState,\n  KdsTabBar,\n  type KdsTabBarItem,\n} from \"@knime/kds-components\";\n\nimport OptionsTab from \"./OptionsTab.vue\";\nimport PortsTab from \"./PortsTab.vue\";\nimport ViewsTab from \"./ViewsTab.vue\";\nimport type { NodeDescriptionTabsProps } from \"./types\";\n\nconst {\n  inputPorts = [],\n  outputPorts = [],\n  dynamicInputPorts = [],\n  dynamicOutputPorts = [],\n  optionsData = [],\n  viewsData = [],\n  emptyText = \"No ports, options or views available.\",\n  renderAsHtml = false,\n  tabBarFullWidth = false,\n} = defineProps<NodeDescriptionTabsProps>();\n\nconst TAB_IDS = {\n  PORTS: \"ports\",\n  OPTIONS: \"options\",\n  VIEW: \"view\",\n} as const;\n\ntype TabIds = (typeof TAB_IDS)[keyof typeof TAB_IDS];\n\nconst activeTab = ref<TabIds | undefined>();\n\nconst hasPorts = computed(\n  () =>\n    inputPorts.length > 0 ||\n    outputPorts.length > 0 ||\n    dynamicInputPorts.length > 0 ||\n    dynamicOutputPorts.length > 0,\n);\n\nconst tabs = computed<KdsTabBarItem[]>(() => [\n  {\n    id: \"tab-ports\",\n    value: TAB_IDS.PORTS,\n    label: \"Ports\",\n    panelId: \"panel-ports\",\n    accessory: {\n      type: \"icon\",\n      name: \"connection\",\n    },\n    disabled: !hasPorts.value,\n  },\n  {\n    id: \"tab-options\",\n    value: TAB_IDS.OPTIONS,\n    label: \"Options\",\n    panelId: \"panel-options\",\n    accessory: {\n      type: \"icon\",\n      name: \"parameter\",\n    },\n    disabled: optionsData.length < 1,\n  },\n  {\n    id: \"tab-view\",\n    value: TAB_IDS.VIEW,\n    label: \"View\",\n    panelId: \"panel-view\",\n    accessory: {\n      type: \"icon\",\n      name: \"eye\",\n    },\n    disabled: viewsData.length < 1,\n  },\n]);\n</script>\n\n<template>\n  <div>\n    <KdsTabBar\n      v-model=\"activeTab\"\n      :full-width=\"tabBarFullWidth\"\n      size=\"small\"\n      :tabs=\"tabs\"\n    />\n\n    <div class=\"content\">\n      <PortsTab\n        v-if=\"activeTab === TAB_IDS.PORTS\"\n        id=\"panel-ports\"\n        role=\"tabpanel\"\n        aria-labelledby=\"tab-ports\"\n        tabindex=\"0\"\n        :input-ports=\"inputPorts\"\n        :output-ports=\"outputPorts\"\n        :dynamic-input-groups=\"dynamicInputPorts\"\n        :dynamic-output-groups=\"dynamicOutputPorts\"\n      />\n\n      <OptionsTab\n        v-if=\"activeTab === TAB_IDS.OPTIONS\"\n        id=\"panel-options\"\n        role=\"tabpanel\"\n        aria-labelledby=\"tab-options\"\n        tabindex=\"0\"\n        :options=\"optionsData\"\n        :render-as-html=\"renderAsHtml\"\n      />\n\n      <ViewsTab\n        v-if=\"activeTab === TAB_IDS.VIEW\"\n        id=\"panel-view\"\n        role=\"tabpanel\"\n        aria-labelledby=\"tab-view\"\n        tabindex=\"0\"\n        :views=\"viewsData\"\n      />\n\n      <KdsEmptyState\n        v-if=\"!activeTab\"\n        :headline=\"emptyText\"\n        class=\"empty-state\"\n      />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.content {\n  padding: var(--kds-spacing-container-0-5x) 0;\n  color: var(--kds-color-text-and-icon-neutral);\n}\n\n.empty-state {\n  margin: 0 auto;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { NODE_SIZE } from \"./constants\";\nimport type { NodeTorsoProps } from \"./types\";\n\n/**\n * Draws the Torso (colored rounded rectangle with icon) of a Node or Component\n * This vue component only draws regular Nodes/Components, no Metanodes, no Unknown nor Missing Nodes\n * Only works inside of a <svg> element.\n */\nconst backgroundPaths: Record<string, string> = {\n  default:\n    \"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.\" +\n    \"7,0,29.2z\",\n  LoopEnd:\n    \"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\",\n  LoopStart:\n    \"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\",\n  ScopeEnd:\n    \"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\",\n  ScopeStart:\n    \"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\",\n  VirtualIn:\n    \"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\",\n  VirtualOut:\n    \"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\",\n};\n\nconst componentBackgroundPortion = 0.75;\n\nconst {\n  type = null,\n  isComponent = false,\n  icon = null,\n} = defineProps<NodeTorsoProps>();\n\nconst backgroundPath = computed(\n  () => (type && backgroundPaths[type]) || backgroundPaths.default,\n);\n\nconst componentBackgroundTransformation = computed(() => {\n  const offset = NODE_SIZE / 2;\n  const scaleFactor = componentBackgroundPortion;\n  return `translate(${offset}, ${offset}) scale(${scaleFactor}) translate(-${offset}, -${offset})`;\n});\n</script>\n\n<template>\n  <g>\n    <path\n      :d=\"backgroundPath\"\n      :class=\"['bg', { component: isComponent }]\"\n      :data-type=\"isComponent ? null : type\"\n    />\n    <!-- components may have two layers of background. This is the inner part, a shrunk version of the outer frame -->\n    <path\n      v-if=\"isComponent && type\"\n      :d=\"backgroundPath\"\n      class=\"bg\"\n      :data-type=\"type\"\n      :transform=\"componentBackgroundTransformation\"\n    />\n    <image\n      v-if=\"icon\"\n      :xlink:href=\"icon\"\n      x=\"8\"\n      y=\"8\"\n      width=\"16\"\n      height=\"16\"\n      pointer-events=\"none\"\n    />\n  </g>\n</template>\n\n<style scoped>\n.bg {\n  /** default color is unknown */\n  fill: var(--kds-color-nodes-and-variables-unknown);\n\n  &.component {\n    fill: var(--kds-color-nodes-and-variables-component);\n  }\n\n  &[data-type=\"Configuration\"] {\n    fill: var(--kds-color-nodes-and-variables-configuration);\n  }\n\n  &[data-type=\"Container\"] {\n    fill: var(--kds-color-nodes-and-variables-container);\n  }\n\n  &[data-type=\"Learner\"] {\n    fill: var(--kds-color-nodes-and-variables-learner);\n  }\n\n  &[data-type=\"Loop\"] {\n    fill: var(--kds-color-nodes-and-variables-loop);\n  }\n\n  &[data-type=\"LoopEnd\"] {\n    fill: var(--kds-color-nodes-and-variables-loop);\n  }\n\n  &[data-type=\"LoopStart\"] {\n    fill: var(--kds-color-nodes-and-variables-loop);\n  }\n\n  &[data-type=\"Manipulator\"] {\n    fill: var(--kds-color-nodes-and-variables-manipulator);\n  }\n\n  &[data-type=\"Other\"] {\n    fill: var(--kds-color-nodes-and-variables-other);\n  }\n\n  &[data-type=\"Predictor\"] {\n    fill: var(--kds-color-nodes-and-variables-predictor);\n  }\n\n  &[data-type=\"ScopeEnd\"] {\n    fill: var(--kds-color-nodes-and-variables-scope);\n  }\n\n  &[data-type=\"ScopeStart\"] {\n    fill: var(--kds-color-nodes-and-variables-scope);\n  }\n\n  &[data-type=\"Sink\"] {\n    fill: var(--kds-color-nodes-and-variables-sink);\n  }\n\n  &[data-type=\"Source\"] {\n    fill: var(--kds-color-nodes-and-variables-source);\n  }\n\n  &[data-type=\"Visualizer\"] {\n    fill: var(--kds-color-nodes-and-variables-visualizer);\n  }\n\n  &[data-type=\"QuickForm\"] {\n    fill: var(--kds-color-nodes-and-variables-quickform);\n  }\n\n  &[data-type=\"Widget\"] {\n    fill: var(--kds-color-nodes-and-variables-widget);\n  }\n\n  /** Virtual = Components */\n  &[data-type=\"VirtualIn\"],\n  &[data-type=\"VirtualOut\"] {\n    fill: var(--kds-color-nodes-and-variables-component);\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { NODE_SIZE } from \"./constants\";\nimport type { NodeTorsoProps } from \"./types\";\n\n/**\n * Draws the Torso (colored rounded rectangle with icon) of a Node or Component\n * This vue component only draws regular Nodes/Components, no Metanodes, no Unknown nor Missing Nodes\n * Only works inside of a <svg> element.\n */\nconst backgroundPaths: Record<string, string> = {\n  default:\n    \"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.\" +\n    \"7,0,29.2z\",\n  LoopEnd:\n    \"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\",\n  LoopStart:\n    \"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\",\n  ScopeEnd:\n    \"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\",\n  ScopeStart:\n    \"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\",\n  VirtualIn:\n    \"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\",\n  VirtualOut:\n    \"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\",\n};\n\nconst componentBackgroundPortion = 0.75;\n\nconst {\n  type = null,\n  isComponent = false,\n  icon = null,\n} = defineProps<NodeTorsoProps>();\n\nconst backgroundPath = computed(\n  () => (type && backgroundPaths[type]) || backgroundPaths.default,\n);\n\nconst componentBackgroundTransformation = computed(() => {\n  const offset = NODE_SIZE / 2;\n  const scaleFactor = componentBackgroundPortion;\n  return `translate(${offset}, ${offset}) scale(${scaleFactor}) translate(-${offset}, -${offset})`;\n});\n</script>\n\n<template>\n  <g>\n    <path\n      :d=\"backgroundPath\"\n      :class=\"['bg', { component: isComponent }]\"\n      :data-type=\"isComponent ? null : type\"\n    />\n    <!-- components may have two layers of background. This is the inner part, a shrunk version of the outer frame -->\n    <path\n      v-if=\"isComponent && type\"\n      :d=\"backgroundPath\"\n      class=\"bg\"\n      :data-type=\"type\"\n      :transform=\"componentBackgroundTransformation\"\n    />\n    <image\n      v-if=\"icon\"\n      :xlink:href=\"icon\"\n      x=\"8\"\n      y=\"8\"\n      width=\"16\"\n      height=\"16\"\n      pointer-events=\"none\"\n    />\n  </g>\n</template>\n\n<style scoped>\n.bg {\n  /** default color is unknown */\n  fill: var(--kds-color-nodes-and-variables-unknown);\n\n  &.component {\n    fill: var(--kds-color-nodes-and-variables-component);\n  }\n\n  &[data-type=\"Configuration\"] {\n    fill: var(--kds-color-nodes-and-variables-configuration);\n  }\n\n  &[data-type=\"Container\"] {\n    fill: var(--kds-color-nodes-and-variables-container);\n  }\n\n  &[data-type=\"Learner\"] {\n    fill: var(--kds-color-nodes-and-variables-learner);\n  }\n\n  &[data-type=\"Loop\"] {\n    fill: var(--kds-color-nodes-and-variables-loop);\n  }\n\n  &[data-type=\"LoopEnd\"] {\n    fill: var(--kds-color-nodes-and-variables-loop);\n  }\n\n  &[data-type=\"LoopStart\"] {\n    fill: var(--kds-color-nodes-and-variables-loop);\n  }\n\n  &[data-type=\"Manipulator\"] {\n    fill: var(--kds-color-nodes-and-variables-manipulator);\n  }\n\n  &[data-type=\"Other\"] {\n    fill: var(--kds-color-nodes-and-variables-other);\n  }\n\n  &[data-type=\"Predictor\"] {\n    fill: var(--kds-color-nodes-and-variables-predictor);\n  }\n\n  &[data-type=\"ScopeEnd\"] {\n    fill: var(--kds-color-nodes-and-variables-scope);\n  }\n\n  &[data-type=\"ScopeStart\"] {\n    fill: var(--kds-color-nodes-and-variables-scope);\n  }\n\n  &[data-type=\"Sink\"] {\n    fill: var(--kds-color-nodes-and-variables-sink);\n  }\n\n  &[data-type=\"Source\"] {\n    fill: var(--kds-color-nodes-and-variables-source);\n  }\n\n  &[data-type=\"Visualizer\"] {\n    fill: var(--kds-color-nodes-and-variables-visualizer);\n  }\n\n  &[data-type=\"QuickForm\"] {\n    fill: var(--kds-color-nodes-and-variables-quickform);\n  }\n\n  &[data-type=\"Widget\"] {\n    fill: var(--kds-color-nodes-and-variables-widget);\n  }\n\n  /** Virtual = Components */\n  &[data-type=\"VirtualIn\"],\n  &[data-type=\"VirtualOut\"] {\n    fill: var(--kds-color-nodes-and-variables-component);\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { KdsIcon } from \"@knime/kds-components\";\n\nimport SVGPortIcon from \"../PortIcon/SVGPortIcon.vue\";\nimport { PORT_SIZE } from \"../PortIcon/constants\";\n\nimport SVGNodeTorso from \"./SVGNodeTorso.vue\";\nimport { NODE_SIZE } from \"./constants\";\nimport type { NodePreviewProps, Port } from \"./types\";\n\n/**\n * SVG icon preview for a node or component, generated from its attributes\n */\nconst {\n  type = null,\n  isComponent = false,\n  inPorts = [],\n  outPorts = [],\n  hidePorts = false,\n  hideIndicators = false,\n  size = \"xlarge\",\n  indicatorIcon = undefined,\n  icon = null,\n} = defineProps<NodePreviewProps>();\n\nconst horizontalSpaceForPorts = computed(() => (hidePorts ? 0 : PORT_SIZE));\n\nconst width = computed(() => NODE_SIZE + 2 * horizontalSpaceForPorts.value);\nconst height = NODE_SIZE;\nconst viewBox = computed(\n  () => `-${horizontalSpaceForPorts.value} 0 ${width.value} ${height}`,\n);\n\n// top edge of port icon relative to 32x32 background\nfunction yPortShift(index: number, total: number): number {\n  /* eslint-disable no-magic-numbers */\n  let spacing = 1;\n  if (total === 2) {\n    spacing = 12;\n  } else if (total === 3) {\n    spacing = 2;\n  }\n  /* eslint-enable no-magic-numbers */\n\n  const totalHeight = total * PORT_SIZE + (total - 1) * spacing;\n  const delta = (NODE_SIZE - totalHeight) / 2;\n  return (spacing + PORT_SIZE) * index + delta + PORT_SIZE / 2;\n}\n\nconst maxShownPorts = 3;\n\nconst cutOffPorts = (ports: Port[]) => {\n  if (ports.length > maxShownPorts) {\n    return [...ports.slice(0, maxShownPorts)];\n  }\n  return ports;\n};\n\nconst visibleInPorts = computed(() => cutOffPorts(inPorts));\nconst visibleOutPorts = computed(() => cutOffPorts(outPorts));\nconst numberOfHiddenPorts = computed(\n  () =>\n    inPorts.length -\n    visibleInPorts.value.length +\n    outPorts.length -\n    visibleOutPorts.value.length,\n);\n</script>\n\n<template>\n  <div class=\"node-preview\" :data-size=\"size\">\n    <svg :viewBox=\"viewBox\" :width=\"width\" :height=\"height\">\n      <SVGNodeTorso :type=\"type\" :icon=\"icon\" :is-component=\"isComponent\" />\n      <template v-if=\"!hidePorts\">\n        <SVGPortIcon\n          v-for=\"(port, index) in visibleInPorts\"\n          :key=\"`in-${index}`\"\n          :color=\"port.color\"\n          :filled=\"!port.optional\"\n          :type=\"port.type\"\n          :transform=\"`translate(-${PORT_SIZE / 2}, ${yPortShift(index, visibleInPorts.length)})`\"\n        />\n        <SVGPortIcon\n          v-for=\"(port, index) in visibleOutPorts\"\n          :key=\"`out-${index}`\"\n          :color=\"port.color\"\n          :filled=\"!port.optional\"\n          :type=\"port.type\"\n          :transform=\"`translate(${NODE_SIZE + PORT_SIZE / 2}, ${yPortShift(index, visibleOutPorts.length)})`\"\n        />\n      </template>\n    </svg>\n    <div v-if=\"!hideIndicators\" class=\"indicators\">\n      <KdsIcon v-if=\"indicatorIcon\" :name=\"indicatorIcon\" size=\"small\" />\n      <KdsIcon\n        v-if=\"numberOfHiddenPorts > 0 && !hidePorts\"\n        name=\"more-connections\"\n        aria-label=\"Indication that some ports are hidden\"\n        size=\"small\"\n      />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.node-preview {\n  display: flex;\n  flex-direction: column;\n  gap: var(--kds-spacing-container-0-25x);\n  width: calc(v-bind(width) * 1px);\n\n  /*\n   * `zoom` is used instead of `transform: scale()` so that the shrunk size\n   * is also reflected in the layout box, e.g. when placed in a flex or grid\n   * container alongside other elements.\n   */\n  &[data-size=\"small\"] {\n    zoom: calc(12 / v-bind(NODE_SIZE));\n  }\n\n  &[data-size=\"medium\"] {\n    zoom: 0.5;\n  }\n\n  & .indicators {\n    display: flex;\n    gap: var(--kds-spacing-container-0-25x);\n    justify-content: center;\n    height: var(--kds-dimension-icon-0-75x);\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { KdsIcon } from \"@knime/kds-components\";\n\nimport SVGPortIcon from \"../PortIcon/SVGPortIcon.vue\";\nimport { PORT_SIZE } from \"../PortIcon/constants\";\n\nimport SVGNodeTorso from \"./SVGNodeTorso.vue\";\nimport { NODE_SIZE } from \"./constants\";\nimport type { NodePreviewProps, Port } from \"./types\";\n\n/**\n * SVG icon preview for a node or component, generated from its attributes\n */\nconst {\n  type = null,\n  isComponent = false,\n  inPorts = [],\n  outPorts = [],\n  hidePorts = false,\n  hideIndicators = false,\n  size = \"xlarge\",\n  indicatorIcon = undefined,\n  icon = null,\n} = defineProps<NodePreviewProps>();\n\nconst horizontalSpaceForPorts = computed(() => (hidePorts ? 0 : PORT_SIZE));\n\nconst width = computed(() => NODE_SIZE + 2 * horizontalSpaceForPorts.value);\nconst height = NODE_SIZE;\nconst viewBox = computed(\n  () => `-${horizontalSpaceForPorts.value} 0 ${width.value} ${height}`,\n);\n\n// top edge of port icon relative to 32x32 background\nfunction yPortShift(index: number, total: number): number {\n  /* eslint-disable no-magic-numbers */\n  let spacing = 1;\n  if (total === 2) {\n    spacing = 12;\n  } else if (total === 3) {\n    spacing = 2;\n  }\n  /* eslint-enable no-magic-numbers */\n\n  const totalHeight = total * PORT_SIZE + (total - 1) * spacing;\n  const delta = (NODE_SIZE - totalHeight) / 2;\n  return (spacing + PORT_SIZE) * index + delta + PORT_SIZE / 2;\n}\n\nconst maxShownPorts = 3;\n\nconst cutOffPorts = (ports: Port[]) => {\n  if (ports.length > maxShownPorts) {\n    return [...ports.slice(0, maxShownPorts)];\n  }\n  return ports;\n};\n\nconst visibleInPorts = computed(() => cutOffPorts(inPorts));\nconst visibleOutPorts = computed(() => cutOffPorts(outPorts));\nconst numberOfHiddenPorts = computed(\n  () =>\n    inPorts.length -\n    visibleInPorts.value.length +\n    outPorts.length -\n    visibleOutPorts.value.length,\n);\n</script>\n\n<template>\n  <div class=\"node-preview\" :data-size=\"size\">\n    <svg :viewBox=\"viewBox\" :width=\"width\" :height=\"height\">\n      <SVGNodeTorso :type=\"type\" :icon=\"icon\" :is-component=\"isComponent\" />\n      <template v-if=\"!hidePorts\">\n        <SVGPortIcon\n          v-for=\"(port, index) in visibleInPorts\"\n          :key=\"`in-${index}`\"\n          :color=\"port.color\"\n          :filled=\"!port.optional\"\n          :type=\"port.type\"\n          :transform=\"`translate(-${PORT_SIZE / 2}, ${yPortShift(index, visibleInPorts.length)})`\"\n        />\n        <SVGPortIcon\n          v-for=\"(port, index) in visibleOutPorts\"\n          :key=\"`out-${index}`\"\n          :color=\"port.color\"\n          :filled=\"!port.optional\"\n          :type=\"port.type\"\n          :transform=\"`translate(${NODE_SIZE + PORT_SIZE / 2}, ${yPortShift(index, visibleOutPorts.length)})`\"\n        />\n      </template>\n    </svg>\n    <div v-if=\"!hideIndicators\" class=\"indicators\">\n      <KdsIcon v-if=\"indicatorIcon\" :name=\"indicatorIcon\" size=\"small\" />\n      <KdsIcon\n        v-if=\"numberOfHiddenPorts > 0 && !hidePorts\"\n        name=\"more-connections\"\n        aria-label=\"Indication that some ports are hidden\"\n        size=\"small\"\n      />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.node-preview {\n  display: flex;\n  flex-direction: column;\n  gap: var(--kds-spacing-container-0-25x);\n  width: calc(v-bind(width) * 1px);\n\n  /*\n   * `zoom` is used instead of `transform: scale()` so that the shrunk size\n   * is also reflected in the layout box, e.g. when placed in a flex or grid\n   * container alongside other elements.\n   */\n  &[data-size=\"small\"] {\n    zoom: calc(12 / v-bind(NODE_SIZE));\n  }\n\n  &[data-size=\"medium\"] {\n    zoom: 0.5;\n  }\n\n  & .indicators {\n    display: flex;\n    gap: var(--kds-spacing-container-0-25x);\n    justify-content: center;\n    height: var(--kds-dimension-icon-0-75x);\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"nodes.js","names":[],"sources":["../src/nodes/NodeDescriptionTabs/OptionsTab.vue","../src/nodes/NodeDescriptionTabs/OptionsTab.vue","../src/nodes/NodeDescriptionTabs/PortTemplateInfo.vue","../src/nodes/NodeDescriptionTabs/PortTemplateInfo.vue","../src/nodes/NodeDescriptionTabs/PortGroup.vue","../src/nodes/NodeDescriptionTabs/PortGroup.vue","../src/nodes/NodeDescriptionTabs/PortsTab.vue","../src/nodes/NodeDescriptionTabs/PortsTab.vue","../src/nodes/NodeDescriptionTabs/ViewsTab.vue","../src/nodes/NodeDescriptionTabs/ViewsTab.vue","../src/nodes/NodeDescriptionTabs/NodeDescriptionTabs.vue","../src/nodes/NodeDescriptionTabs/NodeDescriptionTabs.vue","../src/nodes/NodePreview/SVGNodeTorso.vue","../src/nodes/NodePreview/SVGNodeTorso.vue","../src/nodes/NodePreview/NodePreview.vue","../src/nodes/NodePreview/NodePreview.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\nimport {\n  KdsAccordion,\n  type KdsAccordionItem,\n  KdsDescription,\n} from \"@knime/kds-components\";\n\nimport type { NodeDescriptionOptions } from \"./types\";\n\ntype Props = {\n  options: Array<NodeDescriptionOptions>;\n  renderAsHtml?: boolean;\n};\n\nconst { options, renderAsHtml } = defineProps<Props>();\n\ntype AccordionItemWithContent = KdsAccordionItem & {\n  description?: string;\n  content: NodeDescriptionOptions[\"fields\"];\n};\n\nconst accordionItems = computed<AccordionItemWithContent[]>(() => {\n  return options.map(\n    (option, index) =>\n      ({\n        id: `section-${index}`,\n        headline: option.sectionName,\n        description: option.sectionDescription,\n        content: option.fields,\n      }) satisfies AccordionItemWithContent,\n  );\n});\n\nconst modelValue = ref<string[]>([]);\n</script>\n\n<template>\n  <div>\n    <KdsAccordion\n      v-if=\"options.length > 1\"\n      v-model=\"modelValue\"\n      :items=\"accordionItems\"\n    >\n      <template v-for=\"item in accordionItems\" :key=\"item.id\" #[item.id]>\n        <KdsDescription\n          v-if=\"item.description\"\n          :text=\"item.description\"\n          :render-as-html=\"renderAsHtml\"\n          class=\"section-description\"\n        />\n\n        <template v-for=\"field in item.content\" :key=\"field.name\">\n          <div class=\"option-content\">\n            <span class=\"name\">\n              {{ field.name }} {{ field.optional ? \"(optional)\" : \"\" }}\n            </span>\n\n            <KdsDescription\n              :text=\"field.description\"\n              :render-as-html=\"renderAsHtml\"\n            />\n          </div>\n        </template>\n      </template>\n    </KdsAccordion>\n\n    <div v-if=\"options.length === 1\" class=\"single-option-wrapper\">\n      <KdsDescription\n        v-if=\"options[0].sectionDescription\"\n        :text=\"options[0].sectionDescription\"\n        :render-as-html=\"renderAsHtml\"\n        class=\"section-description\"\n      />\n\n      <template v-for=\"field in options[0].fields\" :key=\"field.name\">\n        <div class=\"option-content\">\n          <span class=\"name\">\n            {{ field.name }} {{ field.optional ? \"(optional)\" : \"\" }}\n          </span>\n\n          <KdsDescription\n            :text=\"field.description\"\n            :render-as-html=\"renderAsHtml\"\n          />\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.section-description {\n  margin-bottom: var(--kds-spacing-container-1x);\n}\n\n.single-option-wrapper {\n  display: flex;\n  flex-direction: column;\n  padding: var(--kds-spacing-container-1x);\n  background: var(--kds-color-surface-muted);\n  border-radius: var(--kds-border-radius-container-0-37x);\n}\n\n.option-content {\n  & .name {\n    font: var(--kds-font-base-title-small-strong);\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\nimport {\n  KdsAccordion,\n  type KdsAccordionItem,\n  KdsDescription,\n} from \"@knime/kds-components\";\n\nimport type { NodeDescriptionOptions } from \"./types\";\n\ntype Props = {\n  options: Array<NodeDescriptionOptions>;\n  renderAsHtml?: boolean;\n};\n\nconst { options, renderAsHtml } = defineProps<Props>();\n\ntype AccordionItemWithContent = KdsAccordionItem & {\n  description?: string;\n  content: NodeDescriptionOptions[\"fields\"];\n};\n\nconst accordionItems = computed<AccordionItemWithContent[]>(() => {\n  return options.map(\n    (option, index) =>\n      ({\n        id: `section-${index}`,\n        headline: option.sectionName,\n        description: option.sectionDescription,\n        content: option.fields,\n      }) satisfies AccordionItemWithContent,\n  );\n});\n\nconst modelValue = ref<string[]>([]);\n</script>\n\n<template>\n  <div>\n    <KdsAccordion\n      v-if=\"options.length > 1\"\n      v-model=\"modelValue\"\n      :items=\"accordionItems\"\n    >\n      <template v-for=\"item in accordionItems\" :key=\"item.id\" #[item.id]>\n        <KdsDescription\n          v-if=\"item.description\"\n          :text=\"item.description\"\n          :render-as-html=\"renderAsHtml\"\n          class=\"section-description\"\n        />\n\n        <template v-for=\"field in item.content\" :key=\"field.name\">\n          <div class=\"option-content\">\n            <span class=\"name\">\n              {{ field.name }} {{ field.optional ? \"(optional)\" : \"\" }}\n            </span>\n\n            <KdsDescription\n              :text=\"field.description\"\n              :render-as-html=\"renderAsHtml\"\n            />\n          </div>\n        </template>\n      </template>\n    </KdsAccordion>\n\n    <div v-if=\"options.length === 1\" class=\"single-option-wrapper\">\n      <KdsDescription\n        v-if=\"options[0].sectionDescription\"\n        :text=\"options[0].sectionDescription\"\n        :render-as-html=\"renderAsHtml\"\n        class=\"section-description\"\n      />\n\n      <template v-for=\"field in options[0].fields\" :key=\"field.name\">\n        <div class=\"option-content\">\n          <span class=\"name\">\n            {{ field.name }} {{ field.optional ? \"(optional)\" : \"\" }}\n          </span>\n\n          <KdsDescription\n            :text=\"field.description\"\n            :render-as-html=\"renderAsHtml\"\n          />\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.section-description {\n  margin-bottom: var(--kds-spacing-container-1x);\n}\n\n.single-option-wrapper {\n  display: flex;\n  flex-direction: column;\n  padding: var(--kds-spacing-container-1x);\n  background: var(--kds-color-surface-muted);\n  border-radius: var(--kds-border-radius-container-0-37x);\n}\n\n.option-content {\n  & .name {\n    font: var(--kds-font-base-title-small-strong);\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { KdsDescription, KdsPortIcon } from \"@knime/kds-components\";\n\nimport type { PortTemplate } from \"./types\";\n\ntype Props = {\n  port: PortTemplate;\n  showDescription: boolean;\n};\n\ndefineProps<Props>();\n</script>\n\n<template>\n  <div class=\"wrapper\">\n    <div class=\"icon\">\n      <KdsPortIcon\n        :type=\"port.type\"\n        :color=\"port.color\"\n        :optional=\"port.optional\"\n      />\n    </div>\n    <span class=\"title\">Type: {{ port.typeDisplayName }}</span>\n\n    <span class=\"name title\">Name: {{ port.name }}</span>\n\n    <KdsDescription\n      v-if=\"showDescription\"\n      class=\"description\"\n      :text=\"port.description\"\n      render-as-html\n    />\n  </div>\n</template>\n\n<style scoped>\n.wrapper {\n  display: grid;\n  grid-template-columns: var(--kds-spacing-container-0-5x) 1fr;\n  gap: var(--kds-spacing-container-0-5x);\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n}\n\n.name,\n.description {\n  grid-column: 2;\n}\n\n.title {\n  font: var(--kds-font-base-title-small-strong);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { KdsDescription, KdsPortIcon } from \"@knime/kds-components\";\n\nimport type { PortTemplate } from \"./types\";\n\ntype Props = {\n  port: PortTemplate;\n  showDescription: boolean;\n};\n\ndefineProps<Props>();\n</script>\n\n<template>\n  <div class=\"wrapper\">\n    <div class=\"icon\">\n      <KdsPortIcon\n        :type=\"port.type\"\n        :color=\"port.color\"\n        :optional=\"port.optional\"\n      />\n    </div>\n    <span class=\"title\">Type: {{ port.typeDisplayName }}</span>\n\n    <span class=\"name title\">Name: {{ port.name }}</span>\n\n    <KdsDescription\n      v-if=\"showDescription\"\n      class=\"description\"\n      :text=\"port.description\"\n      render-as-html\n    />\n  </div>\n</template>\n\n<style scoped>\n.wrapper {\n  display: grid;\n  grid-template-columns: var(--kds-spacing-container-0-5x) 1fr;\n  gap: var(--kds-spacing-container-0-5x);\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n}\n\n.name,\n.description {\n  grid-column: 2;\n}\n\n.title {\n  font: var(--kds-font-base-title-small-strong);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { KdsDescription } from \"@knime/kds-components\";\n\nimport PortTemplateInfo from \"./PortTemplateInfo.vue\";\nimport type { PortTemplate } from \"./types\";\n\ntype Props = {\n  name: string;\n  description?: string;\n  ports: Array<PortTemplate>;\n  isDynamicGroup?: boolean;\n};\n\ndefineProps<Props>();\n</script>\n\n<template>\n  <div class=\"port-group-card\">\n    <span class=\"group-name\">{{ name }}</span>\n\n    <KdsDescription v-if=\"description\" :text=\"description\" render-as-html />\n\n    <template v-for=\"port in ports\" :key=\"port.id\">\n      <PortTemplateInfo :port=\"port\" :show-description=\"!isDynamicGroup\" />\n    </template>\n  </div>\n</template>\n\n<style scoped>\n.port-group-card {\n  display: flex;\n  flex-direction: column;\n  gap: var(--kds-spacing-container-0-75x);\n  padding: var(--kds-spacing-container-1x);\n  background: var(--kds-color-surface-muted);\n  border-radius: var(--kds-border-radius-container-0-37x);\n\n  & .group-name {\n    font: var(--kds-font-base-title-small-strong);\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { KdsDescription } from \"@knime/kds-components\";\n\nimport PortTemplateInfo from \"./PortTemplateInfo.vue\";\nimport type { PortTemplate } from \"./types\";\n\ntype Props = {\n  name: string;\n  description?: string;\n  ports: Array<PortTemplate>;\n  isDynamicGroup?: boolean;\n};\n\ndefineProps<Props>();\n</script>\n\n<template>\n  <div class=\"port-group-card\">\n    <span class=\"group-name\">{{ name }}</span>\n\n    <KdsDescription v-if=\"description\" :text=\"description\" render-as-html />\n\n    <template v-for=\"port in ports\" :key=\"port.id\">\n      <PortTemplateInfo :port=\"port\" :show-description=\"!isDynamicGroup\" />\n    </template>\n  </div>\n</template>\n\n<style scoped>\n.port-group-card {\n  display: flex;\n  flex-direction: column;\n  gap: var(--kds-spacing-container-0-75x);\n  padding: var(--kds-spacing-container-1x);\n  background: var(--kds-color-surface-muted);\n  border-radius: var(--kds-border-radius-container-0-37x);\n\n  & .group-name {\n    font: var(--kds-font-base-title-small-strong);\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport PortGroup from \"./PortGroup.vue\";\nimport type { DynamicPortGroup, PortTemplate } from \"./types\";\n\ntype Props = {\n  inputPorts: Array<PortTemplate>;\n  outputPorts: Array<PortTemplate>;\n  dynamicInputGroups?: Array<DynamicPortGroup>;\n  dynamicOutputGroups?: Array<DynamicPortGroup>;\n};\n\nconst { dynamicInputGroups = [], dynamicOutputGroups = [] } =\n  defineProps<Props>();\n</script>\n\n<template>\n  <div class=\"port-list\">\n    <PortGroup\n      v-if=\"inputPorts.length > 0\"\n      name=\"Input ports\"\n      :ports=\"inputPorts\"\n    />\n\n    <PortGroup\n      v-if=\"outputPorts.length > 0\"\n      name=\"Output ports\"\n      :ports=\"outputPorts\"\n    />\n\n    <template v-for=\"group in dynamicInputGroups\" :key=\"group.name\">\n      <PortGroup\n        v-if=\"group.types.length > 0\"\n        :name=\"group.name + ' (Dynamic Inport)'\"\n        :description=\"group.description\"\n        :ports=\"group.types\"\n        is-dynamic-group\n      />\n    </template>\n\n    <template v-for=\"group in dynamicOutputGroups\" :key=\"group.name\">\n      <PortGroup\n        v-if=\"group.types.length > 0\"\n        :name=\"group.name + ' (Dynamic Outport)'\"\n        :description=\"group.description\"\n        :ports=\"group.types\"\n        is-dynamic-group\n      />\n    </template>\n  </div>\n</template>\n\n<style scoped>\n.port-list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--kds-spacing-container-0-5x);\n}\n</style>\n","<script setup lang=\"ts\">\nimport PortGroup from \"./PortGroup.vue\";\nimport type { DynamicPortGroup, PortTemplate } from \"./types\";\n\ntype Props = {\n  inputPorts: Array<PortTemplate>;\n  outputPorts: Array<PortTemplate>;\n  dynamicInputGroups?: Array<DynamicPortGroup>;\n  dynamicOutputGroups?: Array<DynamicPortGroup>;\n};\n\nconst { dynamicInputGroups = [], dynamicOutputGroups = [] } =\n  defineProps<Props>();\n</script>\n\n<template>\n  <div class=\"port-list\">\n    <PortGroup\n      v-if=\"inputPorts.length > 0\"\n      name=\"Input ports\"\n      :ports=\"inputPorts\"\n    />\n\n    <PortGroup\n      v-if=\"outputPorts.length > 0\"\n      name=\"Output ports\"\n      :ports=\"outputPorts\"\n    />\n\n    <template v-for=\"group in dynamicInputGroups\" :key=\"group.name\">\n      <PortGroup\n        v-if=\"group.types.length > 0\"\n        :name=\"group.name + ' (Dynamic Inport)'\"\n        :description=\"group.description\"\n        :ports=\"group.types\"\n        is-dynamic-group\n      />\n    </template>\n\n    <template v-for=\"group in dynamicOutputGroups\" :key=\"group.name\">\n      <PortGroup\n        v-if=\"group.types.length > 0\"\n        :name=\"group.name + ' (Dynamic Outport)'\"\n        :description=\"group.description\"\n        :ports=\"group.types\"\n        is-dynamic-group\n      />\n    </template>\n  </div>\n</template>\n\n<style scoped>\n.port-list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--kds-spacing-container-0-5x);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { KdsDescription } from \"@knime/kds-components\";\n\nimport type { NodeDescriptionView } from \"./types\";\n\ntype Props = {\n  views: Array<NodeDescriptionView>;\n};\n\nconst props = defineProps<Props>();\n\nconst viewsWithId = computed<Array<NodeDescriptionView & { id: string }>>(() =>\n  props.views.map((view, index) => {\n    const id = `view-${index}`;\n    return { id, ...view };\n  }),\n);\n</script>\n\n<template>\n  <div v-for=\"view in viewsWithId\" :key=\"view.id\" class=\"card-wrapper\">\n    <span class=\"name\">{{ view.name }}</span>\n    <KdsDescription\n      v-if=\"view.description\"\n      :text=\"view.description\"\n      render-as-html\n    />\n  </div>\n</template>\n\n<style scoped>\n.card-wrapper {\n  display: flex;\n  flex-direction: column;\n  padding: var(--kds-spacing-container-1x);\n  margin-bottom: var(--kds-spacing-container-0-25x);\n  background: var(--kds-color-surface-muted);\n  border-radius: var(--kds-border-radius-container-0-37x);\n}\n\n.name {\n  font: var(--kds-font-base-title-small-strong);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { KdsDescription } from \"@knime/kds-components\";\n\nimport type { NodeDescriptionView } from \"./types\";\n\ntype Props = {\n  views: Array<NodeDescriptionView>;\n};\n\nconst props = defineProps<Props>();\n\nconst viewsWithId = computed<Array<NodeDescriptionView & { id: string }>>(() =>\n  props.views.map((view, index) => {\n    const id = `view-${index}`;\n    return { id, ...view };\n  }),\n);\n</script>\n\n<template>\n  <div v-for=\"view in viewsWithId\" :key=\"view.id\" class=\"card-wrapper\">\n    <span class=\"name\">{{ view.name }}</span>\n    <KdsDescription\n      v-if=\"view.description\"\n      :text=\"view.description\"\n      render-as-html\n    />\n  </div>\n</template>\n\n<style scoped>\n.card-wrapper {\n  display: flex;\n  flex-direction: column;\n  padding: var(--kds-spacing-container-1x);\n  margin-bottom: var(--kds-spacing-container-0-25x);\n  background: var(--kds-color-surface-muted);\n  border-radius: var(--kds-border-radius-container-0-37x);\n}\n\n.name {\n  font: var(--kds-font-base-title-small-strong);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\nimport {\n  KdsEmptyState,\n  KdsTabBar,\n  type KdsTabBarItem,\n} from \"@knime/kds-components\";\n\nimport OptionsTab from \"./OptionsTab.vue\";\nimport PortsTab from \"./PortsTab.vue\";\nimport ViewsTab from \"./ViewsTab.vue\";\nimport type { NodeDescriptionTabsProps } from \"./types\";\n\nconst {\n  inputPorts = [],\n  outputPorts = [],\n  dynamicInputPorts = [],\n  dynamicOutputPorts = [],\n  optionsData = [],\n  viewsData = [],\n  emptyText = \"No ports, options or views available.\",\n  renderAsHtml = false,\n  tabBarFullWidth = false,\n} = defineProps<NodeDescriptionTabsProps>();\n\nconst TAB_IDS = {\n  PORTS: \"ports\",\n  OPTIONS: \"options\",\n  VIEW: \"view\",\n} as const;\n\ntype TabIds = (typeof TAB_IDS)[keyof typeof TAB_IDS];\n\nconst activeTab = ref<TabIds | undefined>();\n\nconst hasPorts = computed(\n  () =>\n    inputPorts.length > 0 ||\n    outputPorts.length > 0 ||\n    dynamicInputPorts.length > 0 ||\n    dynamicOutputPorts.length > 0,\n);\n\nconst tabs = computed<KdsTabBarItem[]>(() => [\n  {\n    id: \"tab-ports\",\n    value: TAB_IDS.PORTS,\n    label: \"Ports\",\n    panelId: \"panel-ports\",\n    accessory: {\n      type: \"icon\",\n      name: \"connection\",\n    },\n    disabled: !hasPorts.value,\n  },\n  {\n    id: \"tab-options\",\n    value: TAB_IDS.OPTIONS,\n    label: \"Options\",\n    panelId: \"panel-options\",\n    accessory: {\n      type: \"icon\",\n      name: \"parameter\",\n    },\n    disabled: optionsData.length < 1,\n  },\n  {\n    id: \"tab-view\",\n    value: TAB_IDS.VIEW,\n    label: \"View\",\n    panelId: \"panel-view\",\n    accessory: {\n      type: \"icon\",\n      name: \"eye\",\n    },\n    disabled: viewsData.length < 1,\n  },\n]);\n</script>\n\n<template>\n  <div>\n    <KdsTabBar\n      v-model=\"activeTab\"\n      :full-width=\"tabBarFullWidth\"\n      size=\"small\"\n      :tabs=\"tabs\"\n    />\n\n    <div class=\"content\">\n      <PortsTab\n        v-if=\"activeTab === TAB_IDS.PORTS\"\n        id=\"panel-ports\"\n        role=\"tabpanel\"\n        aria-labelledby=\"tab-ports\"\n        tabindex=\"0\"\n        :input-ports=\"inputPorts\"\n        :output-ports=\"outputPorts\"\n        :dynamic-input-groups=\"dynamicInputPorts\"\n        :dynamic-output-groups=\"dynamicOutputPorts\"\n      />\n\n      <OptionsTab\n        v-if=\"activeTab === TAB_IDS.OPTIONS\"\n        id=\"panel-options\"\n        role=\"tabpanel\"\n        aria-labelledby=\"tab-options\"\n        tabindex=\"0\"\n        :options=\"optionsData\"\n        :render-as-html=\"renderAsHtml\"\n      />\n\n      <ViewsTab\n        v-if=\"activeTab === TAB_IDS.VIEW\"\n        id=\"panel-view\"\n        role=\"tabpanel\"\n        aria-labelledby=\"tab-view\"\n        tabindex=\"0\"\n        :views=\"viewsData\"\n      />\n\n      <KdsEmptyState\n        v-if=\"!activeTab\"\n        :headline=\"emptyText\"\n        class=\"empty-state\"\n      />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.content {\n  padding: var(--kds-spacing-container-0-5x) 0;\n  color: var(--kds-color-text-and-icon-neutral);\n}\n\n.empty-state {\n  margin: 0 auto;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\nimport {\n  KdsEmptyState,\n  KdsTabBar,\n  type KdsTabBarItem,\n} from \"@knime/kds-components\";\n\nimport OptionsTab from \"./OptionsTab.vue\";\nimport PortsTab from \"./PortsTab.vue\";\nimport ViewsTab from \"./ViewsTab.vue\";\nimport type { NodeDescriptionTabsProps } from \"./types\";\n\nconst {\n  inputPorts = [],\n  outputPorts = [],\n  dynamicInputPorts = [],\n  dynamicOutputPorts = [],\n  optionsData = [],\n  viewsData = [],\n  emptyText = \"No ports, options or views available.\",\n  renderAsHtml = false,\n  tabBarFullWidth = false,\n} = defineProps<NodeDescriptionTabsProps>();\n\nconst TAB_IDS = {\n  PORTS: \"ports\",\n  OPTIONS: \"options\",\n  VIEW: \"view\",\n} as const;\n\ntype TabIds = (typeof TAB_IDS)[keyof typeof TAB_IDS];\n\nconst activeTab = ref<TabIds | undefined>();\n\nconst hasPorts = computed(\n  () =>\n    inputPorts.length > 0 ||\n    outputPorts.length > 0 ||\n    dynamicInputPorts.length > 0 ||\n    dynamicOutputPorts.length > 0,\n);\n\nconst tabs = computed<KdsTabBarItem[]>(() => [\n  {\n    id: \"tab-ports\",\n    value: TAB_IDS.PORTS,\n    label: \"Ports\",\n    panelId: \"panel-ports\",\n    accessory: {\n      type: \"icon\",\n      name: \"connection\",\n    },\n    disabled: !hasPorts.value,\n  },\n  {\n    id: \"tab-options\",\n    value: TAB_IDS.OPTIONS,\n    label: \"Options\",\n    panelId: \"panel-options\",\n    accessory: {\n      type: \"icon\",\n      name: \"parameter\",\n    },\n    disabled: optionsData.length < 1,\n  },\n  {\n    id: \"tab-view\",\n    value: TAB_IDS.VIEW,\n    label: \"View\",\n    panelId: \"panel-view\",\n    accessory: {\n      type: \"icon\",\n      name: \"eye\",\n    },\n    disabled: viewsData.length < 1,\n  },\n]);\n</script>\n\n<template>\n  <div>\n    <KdsTabBar\n      v-model=\"activeTab\"\n      :full-width=\"tabBarFullWidth\"\n      size=\"small\"\n      :tabs=\"tabs\"\n    />\n\n    <div class=\"content\">\n      <PortsTab\n        v-if=\"activeTab === TAB_IDS.PORTS\"\n        id=\"panel-ports\"\n        role=\"tabpanel\"\n        aria-labelledby=\"tab-ports\"\n        tabindex=\"0\"\n        :input-ports=\"inputPorts\"\n        :output-ports=\"outputPorts\"\n        :dynamic-input-groups=\"dynamicInputPorts\"\n        :dynamic-output-groups=\"dynamicOutputPorts\"\n      />\n\n      <OptionsTab\n        v-if=\"activeTab === TAB_IDS.OPTIONS\"\n        id=\"panel-options\"\n        role=\"tabpanel\"\n        aria-labelledby=\"tab-options\"\n        tabindex=\"0\"\n        :options=\"optionsData\"\n        :render-as-html=\"renderAsHtml\"\n      />\n\n      <ViewsTab\n        v-if=\"activeTab === TAB_IDS.VIEW\"\n        id=\"panel-view\"\n        role=\"tabpanel\"\n        aria-labelledby=\"tab-view\"\n        tabindex=\"0\"\n        :views=\"viewsData\"\n      />\n\n      <KdsEmptyState\n        v-if=\"!activeTab\"\n        :headline=\"emptyText\"\n        class=\"empty-state\"\n      />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.content {\n  padding: var(--kds-spacing-container-0-5x) 0;\n  color: var(--kds-color-text-and-icon-neutral);\n}\n\n.empty-state {\n  margin: 0 auto;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { NODE_SIZE } from \"./constants\";\nimport type { NodeTorsoProps } from \"./types\";\n\n/**\n * Draws the Torso (colored rounded rectangle with icon) of a Node or Component\n * This vue component only draws regular Nodes/Components, no Metanodes, no Unknown nor Missing Nodes\n * Only works inside of a <svg> element.\n */\nconst backgroundPaths: Record<string, string> = {\n  default:\n    \"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.\" +\n    \"7,0,29.2z\",\n  LoopEnd:\n    \"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\",\n  LoopStart:\n    \"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\",\n  ScopeEnd:\n    \"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\",\n  ScopeStart:\n    \"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\",\n  VirtualIn:\n    \"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\",\n  VirtualOut:\n    \"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\",\n};\n\nconst componentBackgroundPortion = 0.75;\n\nconst {\n  type = null,\n  isComponent = false,\n  icon = null,\n} = defineProps<NodeTorsoProps>();\n\nconst backgroundPath = computed(\n  () => (type && backgroundPaths[type]) || backgroundPaths.default,\n);\n\nconst componentBackgroundTransformation = computed(() => {\n  const offset = NODE_SIZE / 2;\n  const scaleFactor = componentBackgroundPortion;\n  return `translate(${offset}, ${offset}) scale(${scaleFactor}) translate(-${offset}, -${offset})`;\n});\n</script>\n\n<template>\n  <g>\n    <path\n      :d=\"backgroundPath\"\n      :class=\"['bg', { component: isComponent }]\"\n      :data-type=\"isComponent ? null : type\"\n    />\n    <!-- components may have two layers of background. This is the inner part, a shrunk version of the outer frame -->\n    <path\n      v-if=\"isComponent && type\"\n      :d=\"backgroundPath\"\n      class=\"bg\"\n      :data-type=\"type\"\n      :transform=\"componentBackgroundTransformation\"\n    />\n    <image\n      v-if=\"icon\"\n      :xlink:href=\"icon\"\n      x=\"8\"\n      y=\"8\"\n      width=\"16\"\n      height=\"16\"\n      pointer-events=\"none\"\n    />\n  </g>\n</template>\n\n<style scoped>\n.bg {\n  /** default color is unknown */\n  fill: var(--kds-color-nodes-and-variables-unknown);\n\n  &.component {\n    fill: var(--kds-color-nodes-and-variables-component);\n  }\n\n  &[data-type=\"Configuration\"] {\n    fill: var(--kds-color-nodes-and-variables-configuration);\n  }\n\n  &[data-type=\"Container\"] {\n    fill: var(--kds-color-nodes-and-variables-container);\n  }\n\n  &[data-type=\"Learner\"] {\n    fill: var(--kds-color-nodes-and-variables-learner);\n  }\n\n  &[data-type=\"Loop\"] {\n    fill: var(--kds-color-nodes-and-variables-loop);\n  }\n\n  &[data-type=\"LoopEnd\"] {\n    fill: var(--kds-color-nodes-and-variables-loop);\n  }\n\n  &[data-type=\"LoopStart\"] {\n    fill: var(--kds-color-nodes-and-variables-loop);\n  }\n\n  &[data-type=\"Manipulator\"] {\n    fill: var(--kds-color-nodes-and-variables-manipulator);\n  }\n\n  &[data-type=\"Other\"] {\n    fill: var(--kds-color-nodes-and-variables-other);\n  }\n\n  &[data-type=\"Predictor\"] {\n    fill: var(--kds-color-nodes-and-variables-predictor);\n  }\n\n  &[data-type=\"ScopeEnd\"] {\n    fill: var(--kds-color-nodes-and-variables-scope);\n  }\n\n  &[data-type=\"ScopeStart\"] {\n    fill: var(--kds-color-nodes-and-variables-scope);\n  }\n\n  &[data-type=\"Sink\"] {\n    fill: var(--kds-color-nodes-and-variables-sink);\n  }\n\n  &[data-type=\"Source\"] {\n    fill: var(--kds-color-nodes-and-variables-source);\n  }\n\n  &[data-type=\"Visualizer\"] {\n    fill: var(--kds-color-nodes-and-variables-visualizer);\n  }\n\n  &[data-type=\"QuickForm\"] {\n    fill: var(--kds-color-nodes-and-variables-quickform);\n  }\n\n  &[data-type=\"Widget\"] {\n    fill: var(--kds-color-nodes-and-variables-widget);\n  }\n\n  /** Virtual = Components */\n  &[data-type=\"VirtualIn\"],\n  &[data-type=\"VirtualOut\"] {\n    fill: var(--kds-color-nodes-and-variables-component);\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { NODE_SIZE } from \"./constants\";\nimport type { NodeTorsoProps } from \"./types\";\n\n/**\n * Draws the Torso (colored rounded rectangle with icon) of a Node or Component\n * This vue component only draws regular Nodes/Components, no Metanodes, no Unknown nor Missing Nodes\n * Only works inside of a <svg> element.\n */\nconst backgroundPaths: Record<string, string> = {\n  default:\n    \"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.\" +\n    \"7,0,29.2z\",\n  LoopEnd:\n    \"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\",\n  LoopStart:\n    \"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\",\n  ScopeEnd:\n    \"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\",\n  ScopeStart:\n    \"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\",\n  VirtualIn:\n    \"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\",\n  VirtualOut:\n    \"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\",\n};\n\nconst componentBackgroundPortion = 0.75;\n\nconst {\n  type = null,\n  isComponent = false,\n  icon = null,\n} = defineProps<NodeTorsoProps>();\n\nconst backgroundPath = computed(\n  () => (type && backgroundPaths[type]) || backgroundPaths.default,\n);\n\nconst componentBackgroundTransformation = computed(() => {\n  const offset = NODE_SIZE / 2;\n  const scaleFactor = componentBackgroundPortion;\n  return `translate(${offset}, ${offset}) scale(${scaleFactor}) translate(-${offset}, -${offset})`;\n});\n</script>\n\n<template>\n  <g>\n    <path\n      :d=\"backgroundPath\"\n      :class=\"['bg', { component: isComponent }]\"\n      :data-type=\"isComponent ? null : type\"\n    />\n    <!-- components may have two layers of background. This is the inner part, a shrunk version of the outer frame -->\n    <path\n      v-if=\"isComponent && type\"\n      :d=\"backgroundPath\"\n      class=\"bg\"\n      :data-type=\"type\"\n      :transform=\"componentBackgroundTransformation\"\n    />\n    <image\n      v-if=\"icon\"\n      :xlink:href=\"icon\"\n      x=\"8\"\n      y=\"8\"\n      width=\"16\"\n      height=\"16\"\n      pointer-events=\"none\"\n    />\n  </g>\n</template>\n\n<style scoped>\n.bg {\n  /** default color is unknown */\n  fill: var(--kds-color-nodes-and-variables-unknown);\n\n  &.component {\n    fill: var(--kds-color-nodes-and-variables-component);\n  }\n\n  &[data-type=\"Configuration\"] {\n    fill: var(--kds-color-nodes-and-variables-configuration);\n  }\n\n  &[data-type=\"Container\"] {\n    fill: var(--kds-color-nodes-and-variables-container);\n  }\n\n  &[data-type=\"Learner\"] {\n    fill: var(--kds-color-nodes-and-variables-learner);\n  }\n\n  &[data-type=\"Loop\"] {\n    fill: var(--kds-color-nodes-and-variables-loop);\n  }\n\n  &[data-type=\"LoopEnd\"] {\n    fill: var(--kds-color-nodes-and-variables-loop);\n  }\n\n  &[data-type=\"LoopStart\"] {\n    fill: var(--kds-color-nodes-and-variables-loop);\n  }\n\n  &[data-type=\"Manipulator\"] {\n    fill: var(--kds-color-nodes-and-variables-manipulator);\n  }\n\n  &[data-type=\"Other\"] {\n    fill: var(--kds-color-nodes-and-variables-other);\n  }\n\n  &[data-type=\"Predictor\"] {\n    fill: var(--kds-color-nodes-and-variables-predictor);\n  }\n\n  &[data-type=\"ScopeEnd\"] {\n    fill: var(--kds-color-nodes-and-variables-scope);\n  }\n\n  &[data-type=\"ScopeStart\"] {\n    fill: var(--kds-color-nodes-and-variables-scope);\n  }\n\n  &[data-type=\"Sink\"] {\n    fill: var(--kds-color-nodes-and-variables-sink);\n  }\n\n  &[data-type=\"Source\"] {\n    fill: var(--kds-color-nodes-and-variables-source);\n  }\n\n  &[data-type=\"Visualizer\"] {\n    fill: var(--kds-color-nodes-and-variables-visualizer);\n  }\n\n  &[data-type=\"QuickForm\"] {\n    fill: var(--kds-color-nodes-and-variables-quickform);\n  }\n\n  &[data-type=\"Widget\"] {\n    fill: var(--kds-color-nodes-and-variables-widget);\n  }\n\n  /** Virtual = Components */\n  &[data-type=\"VirtualIn\"],\n  &[data-type=\"VirtualOut\"] {\n    fill: var(--kds-color-nodes-and-variables-component);\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { KdsIcon, KdsPortIcon, PORT_SIZE } from \"@knime/kds-components\";\n\nimport SVGNodeTorso from \"./SVGNodeTorso.vue\";\nimport { NODE_SIZE } from \"./constants\";\nimport type { NodePreviewProps, Port } from \"./types\";\n\n/**\n * SVG icon preview for a node or component, generated from its attributes\n */\nconst {\n  type = null,\n  isComponent = false,\n  inPorts = [],\n  outPorts = [],\n  hidePorts = false,\n  hideIndicators = false,\n  size = \"xlarge\",\n  indicatorIcon = undefined,\n  icon = null,\n} = defineProps<NodePreviewProps>();\n\nconst horizontalSpaceForPorts = computed(() => (hidePorts ? 0 : PORT_SIZE));\n\nconst width = computed(() => NODE_SIZE + 2 * horizontalSpaceForPorts.value);\nconst height = NODE_SIZE;\nconst viewBox = computed(\n  () => `-${horizontalSpaceForPorts.value} 0 ${width.value} ${height}`,\n);\n\n// top edge of port icon relative to 32x32 background\nfunction yPortShift(index: number, total: number): number {\n  /* eslint-disable no-magic-numbers */\n  let spacing = 1;\n  if (total === 2) {\n    spacing = 12;\n  } else if (total === 3) {\n    spacing = 2;\n  }\n  /* eslint-enable no-magic-numbers */\n\n  const totalHeight = total * PORT_SIZE + (total - 1) * spacing;\n  const delta = (NODE_SIZE - totalHeight) / 2;\n  return (spacing + PORT_SIZE) * index + delta + PORT_SIZE / 2;\n}\n\nconst maxShownPorts = 3;\n\nconst cutOffPorts = (ports: Port[]) => {\n  if (ports.length > maxShownPorts) {\n    return [...ports.slice(0, maxShownPorts)];\n  }\n  return ports;\n};\n\nconst visibleInPorts = computed(() => cutOffPorts(inPorts));\nconst visibleOutPorts = computed(() => cutOffPorts(outPorts));\nconst numberOfHiddenPorts = computed(\n  () =>\n    inPorts.length -\n    visibleInPorts.value.length +\n    outPorts.length -\n    visibleOutPorts.value.length,\n);\n</script>\n\n<template>\n  <div class=\"node-preview\" :data-size=\"size\">\n    <svg :viewBox=\"viewBox\" :width=\"width\" :height=\"height\">\n      <SVGNodeTorso :type=\"type\" :icon=\"icon\" :is-component=\"isComponent\" />\n      <template v-if=\"!hidePorts\">\n        <KdsPortIcon\n          v-for=\"(port, index) in visibleInPorts\"\n          :key=\"`in-${index}`\"\n          :color=\"port.color\"\n          :optional=\"port.optional\"\n          :type=\"port.type\"\n          :standalone=\"false\"\n          :transform=\"`translate(-${PORT_SIZE / 2}, ${yPortShift(index, visibleInPorts.length)})`\"\n        />\n        <KdsPortIcon\n          v-for=\"(port, index) in visibleOutPorts\"\n          :key=\"`out-${index}`\"\n          :color=\"port.color\"\n          :optional=\"port.optional\"\n          :type=\"port.type\"\n          :standalone=\"false\"\n          :transform=\"`translate(${NODE_SIZE + PORT_SIZE / 2}, ${yPortShift(index, visibleOutPorts.length)})`\"\n        />\n      </template>\n    </svg>\n    <div v-if=\"!hideIndicators\" class=\"indicators\">\n      <KdsIcon v-if=\"indicatorIcon\" :name=\"indicatorIcon\" size=\"small\" />\n      <KdsIcon\n        v-if=\"numberOfHiddenPorts > 0 && !hidePorts\"\n        name=\"more-connections\"\n        aria-label=\"Indication that some ports are hidden\"\n        size=\"small\"\n      />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.node-preview {\n  display: flex;\n  flex-direction: column;\n  gap: var(--kds-spacing-container-0-25x);\n  width: calc(v-bind(width) * 1px);\n\n  /*\n   * `zoom` is used instead of `transform: scale()` so that the shrunk size\n   * is also reflected in the layout box, e.g. when placed in a flex or grid\n   * container alongside other elements.\n   */\n  &[data-size=\"small\"] {\n    zoom: calc(12 / v-bind(NODE_SIZE));\n  }\n\n  &[data-size=\"medium\"] {\n    zoom: 0.5;\n  }\n\n  & .indicators {\n    display: flex;\n    gap: var(--kds-spacing-container-0-25x);\n    justify-content: center;\n    height: var(--kds-dimension-icon-0-75x);\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { KdsIcon, KdsPortIcon, PORT_SIZE } from \"@knime/kds-components\";\n\nimport SVGNodeTorso from \"./SVGNodeTorso.vue\";\nimport { NODE_SIZE } from \"./constants\";\nimport type { NodePreviewProps, Port } from \"./types\";\n\n/**\n * SVG icon preview for a node or component, generated from its attributes\n */\nconst {\n  type = null,\n  isComponent = false,\n  inPorts = [],\n  outPorts = [],\n  hidePorts = false,\n  hideIndicators = false,\n  size = \"xlarge\",\n  indicatorIcon = undefined,\n  icon = null,\n} = defineProps<NodePreviewProps>();\n\nconst horizontalSpaceForPorts = computed(() => (hidePorts ? 0 : PORT_SIZE));\n\nconst width = computed(() => NODE_SIZE + 2 * horizontalSpaceForPorts.value);\nconst height = NODE_SIZE;\nconst viewBox = computed(\n  () => `-${horizontalSpaceForPorts.value} 0 ${width.value} ${height}`,\n);\n\n// top edge of port icon relative to 32x32 background\nfunction yPortShift(index: number, total: number): number {\n  /* eslint-disable no-magic-numbers */\n  let spacing = 1;\n  if (total === 2) {\n    spacing = 12;\n  } else if (total === 3) {\n    spacing = 2;\n  }\n  /* eslint-enable no-magic-numbers */\n\n  const totalHeight = total * PORT_SIZE + (total - 1) * spacing;\n  const delta = (NODE_SIZE - totalHeight) / 2;\n  return (spacing + PORT_SIZE) * index + delta + PORT_SIZE / 2;\n}\n\nconst maxShownPorts = 3;\n\nconst cutOffPorts = (ports: Port[]) => {\n  if (ports.length > maxShownPorts) {\n    return [...ports.slice(0, maxShownPorts)];\n  }\n  return ports;\n};\n\nconst visibleInPorts = computed(() => cutOffPorts(inPorts));\nconst visibleOutPorts = computed(() => cutOffPorts(outPorts));\nconst numberOfHiddenPorts = computed(\n  () =>\n    inPorts.length -\n    visibleInPorts.value.length +\n    outPorts.length -\n    visibleOutPorts.value.length,\n);\n</script>\n\n<template>\n  <div class=\"node-preview\" :data-size=\"size\">\n    <svg :viewBox=\"viewBox\" :width=\"width\" :height=\"height\">\n      <SVGNodeTorso :type=\"type\" :icon=\"icon\" :is-component=\"isComponent\" />\n      <template v-if=\"!hidePorts\">\n        <KdsPortIcon\n          v-for=\"(port, index) in visibleInPorts\"\n          :key=\"`in-${index}`\"\n          :color=\"port.color\"\n          :optional=\"port.optional\"\n          :type=\"port.type\"\n          :standalone=\"false\"\n          :transform=\"`translate(-${PORT_SIZE / 2}, ${yPortShift(index, visibleInPorts.length)})`\"\n        />\n        <KdsPortIcon\n          v-for=\"(port, index) in visibleOutPorts\"\n          :key=\"`out-${index}`\"\n          :color=\"port.color\"\n          :optional=\"port.optional\"\n          :type=\"port.type\"\n          :standalone=\"false\"\n          :transform=\"`translate(${NODE_SIZE + PORT_SIZE / 2}, ${yPortShift(index, visibleOutPorts.length)})`\"\n        />\n      </template>\n    </svg>\n    <div v-if=\"!hideIndicators\" class=\"indicators\">\n      <KdsIcon v-if=\"indicatorIcon\" :name=\"indicatorIcon\" size=\"small\" />\n      <KdsIcon\n        v-if=\"numberOfHiddenPorts > 0 && !hidePorts\"\n        name=\"more-connections\"\n        aria-label=\"Indication that some ports are hidden\"\n        size=\"small\"\n      />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.node-preview {\n  display: flex;\n  flex-direction: column;\n  gap: var(--kds-spacing-container-0-25x);\n  width: calc(v-bind(width) * 1px);\n\n  /*\n   * `zoom` is used instead of `transform: scale()` so that the shrunk size\n   * is also reflected in the layout box, e.g. when placed in a flex or grid\n   * container alongside other elements.\n   */\n  &[data-size=\"small\"] {\n    zoom: calc(12 / v-bind(NODE_SIZE));\n  }\n\n  &[data-size=\"medium\"] {\n    zoom: 0.5;\n  }\n\n  & .indicators {\n    display: flex;\n    gap: var(--kds-spacing-container-0-25x);\n    justify-content: center;\n    height: var(--kds-dimension-icon-0-75x);\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/src/nodes/NodeDescriptionTabs/PortTemplateInfo.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PortTemplateInfo.vue.d.ts","sourceRoot":"","sources":["../../../../src/nodes/NodeDescriptionTabs/PortTemplateInfo.vue"],"names":[],"mappings":"AAiEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,YAAY,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;CAC1B,CAAC;AAgFF,QAAA,MAAM,YAAY,sRAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"PortTemplateInfo.vue.d.ts","sourceRoot":"","sources":["../../../../src/nodes/NodeDescriptionTabs/PortTemplateInfo.vue"],"names":[],"mappings":"AA6DA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,YAAY,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;CAC1B,CAAC;AAmFF,QAAA,MAAM,YAAY,sRAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/src/nodes/NodeDescriptionTabs/types.d.ts

@@ -1,4 +1,4 @@
-import { PortType } from '../PortIcon/types';
+import { KdsPortType } from '@knime/kds-components';
 export type PortTemplate = {
     /**
      * Unique fully-qualified identifier for the port. Not user-supplied, comes from the backend
@@ -12,7 +12,7 @@ export type PortTemplate = {
     /**
      * General port type, which acts as an overall category and determines the rendered shape
      */
-    type: PortType;
+    type: KdsPortType;
     /**
      * Human readable name for the port `type`
      */

package/dist/src/nodes/NodeDescriptionTabs/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/nodes/NodeDescriptionTabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IACf;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,+CAA+C;IAC/C,IAAI,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,WAAW,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,MAAM,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CAC1E,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,sCAAsC;IACtC,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,uCAAuC;IACvC,WAAW,CAAC,EAAE,YAAY,EAAE,CAAC;IAC7B,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACvC,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACxC,qDAAqD;IACrD,WAAW,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACvC,gEAAgE;IAChE,SAAS,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAElC,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mGAAmG;IACnG,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,wEAAwE;IACxE,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/nodes/NodeDescriptionTabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEzD,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,EAAE,WAAW,CAAC;IAClB;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,+CAA+C;IAC/C,IAAI,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,WAAW,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,MAAM,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CAC1E,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,sCAAsC;IACtC,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,uCAAuC;IACvC,WAAW,CAAC,EAAE,YAAY,EAAE,CAAC;IAC7B,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACvC,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACxC,qDAAqD;IACrD,WAAW,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACvC,gEAAgE;IAChE,SAAS,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAElC,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mGAAmG;IACnG,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,wEAAwE;IACxE,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC"}

package/dist/src/nodes/NodePreview/NodePreview.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodePreview.vue.d.ts","sourceRoot":"","sources":["../../../../src/nodes/NodePreview/NodePreview.vue"],"names":[],"mappings":"AAkJA,OAAO,KAAK,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AAuMtD,QAAA,MAAM,YAAY,4SAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"NodePreview.vue.d.ts","sourceRoot":"","sources":["../../../../src/nodes/NodePreview/NodePreview.vue"],"names":[],"mappings":"AA8IA,OAAO,KAAK,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AAgNtD,QAAA,MAAM,YAAY,4SAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/src/nodes/NodePreview/types.d.ts

@@ -1,5 +1,4 @@
-import { KdsIconName } from '@knime/kds-components';
-import { PortType } from '../PortIcon';
+import { KdsIconName, KdsPortType } from '@knime/kds-components';
 import { NodePreviewSize, NodeTypes } from './enums';
 export type NodeType = (typeof NodeTypes)[number];
 export type NodePreviewSize = (typeof NodePreviewSize)[number];
@@ -23,7 +22,7 @@ export type Port = {
     /** CSS-compatible color string for type "other" and "generic" */
     color?: string;
     optional?: boolean;
-    type: PortType;
+    type: KdsPortType;
 };
 export type NodePreviewProps = {
     /**

package/dist/src/nodes/NodePreview/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/nodes/NodePreview/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1D,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAClD,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,IAAI,GAAG;IACjB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/nodes/NodePreview/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAE3E,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1D,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAClD,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,IAAI,GAAG;IACjB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,WAAW,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC"}

package/dist/src/nodes/index.d.ts

@@ -2,6 +2,4 @@ export * from './NodeDescriptionTabs';
 export type * from './NodeDescriptionTabs';
 export * from './NodePreview';
 export type * from './NodePreview';
-export * from './PortIcon';
-export type * from './PortIcon';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/nodes/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/nodes/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,mBAAmB,uBAAuB,CAAC;AAE3C,cAAc,eAAe,CAAC;AAC9B,mBAAmB,eAAe,CAAC;AAEnC,cAAc,YAAY,CAAC;AAC3B,mBAAmB,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/nodes/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,mBAAmB,uBAAuB,CAAC;AAE3C,cAAc,eAAe,CAAC;AAC9B,mBAAmB,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/product-features",
-  "version": "1.2.4",
+  "version": "2.0.0",
   "description": "Package containing composition patterns of KDS Components and KNIME business logic",
   "repository": {
     "type": "git",
@@ -54,8 +54,8 @@
   },
   "dependencies": {
     "consola": "^3.4.2",
-    "@knime/kds-components": "^2.5.1",
-    "@knime/kds-styles": "^2.5.1",
+    "@knime/kds-components": "^2.6.0",
+    "@knime/kds-styles": "^2.6.0",
     "@knime/utils": "^1.12.1"
   },
   "devDependencies": {

package/dist/src/nodes/PortIcon/PortIcon.vue.d.ts

@@ -1,5 +0,0 @@
-import { PortIconProps } from './types';
-declare const __VLS_export: import('vue').DefineComponent<PortIconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<PortIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;
-//# sourceMappingURL=PortIcon.vue.d.ts.map

package/dist/src/nodes/PortIcon/PortIcon.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PortIcon.vue.d.ts","sourceRoot":"","sources":["../../../../src/nodes/PortIcon/PortIcon.vue"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAiD7C,QAAA,MAAM,YAAY,sSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/src/nodes/PortIcon/SVGPortIcon.vue.d.ts

@@ -1,5 +0,0 @@
-import { PortIconProps } from './types';
-declare const __VLS_export: import('vue').DefineComponent<PortIconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<PortIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;
-//# sourceMappingURL=SVGPortIcon.vue.d.ts.map

package/dist/src/nodes/PortIcon/SVGPortIcon.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SVGPortIcon.vue.d.ts","sourceRoot":"","sources":["../../../../src/nodes/PortIcon/SVGPortIcon.vue"],"names":[],"mappings":"AAgHA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AA8F7C,QAAA,MAAM,YAAY,sSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/src/nodes/PortIcon/constants.d.ts

@@ -1,3 +0,0 @@
-export declare const PORT_SIZE = 8;
-export declare const PORT_STROKE_WIDTH = 1.4;
-//# sourceMappingURL=constants.d.ts.map

package/dist/src/nodes/PortIcon/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/nodes/PortIcon/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,IAAI,CAAC;AAC3B,eAAO,MAAM,iBAAiB,MAAM,CAAC"}

package/dist/src/nodes/PortIcon/enums.d.ts

@@ -1,8 +0,0 @@
-export declare const PortType: Readonly<{
-    readonly TABLE: "table";
-    readonly FLOW_VARIABLE: "flowVariable";
-    readonly OTHER: "other";
-    readonly GENERIC: "generic";
-}>;
-export declare const PortTypes: readonly ("table" | "flowVariable" | "other" | "generic")[];
-//# sourceMappingURL=enums.d.ts.map

package/dist/src/nodes/PortIcon/enums.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"enums.d.ts","sourceRoot":"","sources":["../../../../src/nodes/PortIcon/enums.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;;;EAKV,CAAC;AAEZ,eAAO,MAAM,SAAS,6DAAyC,CAAC"}

package/dist/src/nodes/PortIcon/index.d.ts

@@ -1,3 +0,0 @@
-export { default as PortIcon } from './PortIcon.vue';
-export type * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/src/nodes/PortIcon/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/nodes/PortIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAErD,mBAAmB,SAAS,CAAC"}

package/dist/src/nodes/PortIcon/types.d.ts

@@ -1,19 +0,0 @@
-import { PortTypes } from './enums';
-export type PortType = (typeof PortTypes)[number];
-export type PortIconProps = {
-    /**
-     * Distinguish between "table", "flowVariable", "generic" and "other" types of ports
-     * Determines the shape of the port:
-     *   table            -> triangle
-     *   flowVariable     -> circle
-     *   other | generic  -> square
-     */
-    type: PortType;
-    /**
-     * Shape fill color. Format has to be valid for css. Only used by "other" and "generic" type (square) ports.
-     * Tables are always black, flow variables always red.
-     */
-    color?: string;
-    filled?: boolean;
-};
-//# sourceMappingURL=types.d.ts.map

package/dist/src/nodes/PortIcon/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/nodes/PortIcon/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;;;OAMG;IACH,IAAI,EAAE,QAAQ,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC"}