diff --git a/org.knime.ui.js/package.json b/org.knime.ui.js/package.json
index a35eabf9b..d4842afbf 100644
--- a/org.knime.ui.js/package.json
+++ b/org.knime.ui.js/package.json
@@ -46,7 +46,7 @@
     "@knime/rich-text-editor": "^1.7.11",
     "@knime/styles": "^1.14.3",
     "@knime/ui-extension-renderer": "2.3.0",
-    "@knime/utils": "^1.7.1",
+    "@knime/utils": "^1.9.1",
     "@knime/virtual-tree": "^1.6.11",
     "@open-rpc/client-js": "^1.8.1",
     "@tiptap/extension-heading": "^2.26.1",
diff --git a/org.knime.ui.js/pnpm-lock.yaml b/org.knime.ui.js/pnpm-lock.yaml
index 25818e243..c002a1e33 100644
--- a/org.knime.ui.js/pnpm-lock.yaml
+++ b/org.knime.ui.js/pnpm-lock.yaml
@@ -51,8 +51,8 @@ importers:
         specifier: 2.3.0
         version: 2.3.0(@fontsource/roboto-mono@4.5.10)(@fontsource/roboto@4.5.8)(@popperjs/core@2.11.8)(consola@3.4.2)(focus-trap@7.6.4)(vue@3.5.18(typescript@5.8.3))
       '@knime/utils':
-        specifier: ^1.7.1
-        version: 1.7.1(@fontsource/roboto-mono@4.5.10)(@fontsource/roboto@4.5.8)(consola@3.4.2)
+        specifier: ^1.9.1
+        version: 1.9.1(consola@3.4.2)
       '@knime/virtual-tree':
         specifier: ^1.6.11
         version: 1.6.11(@fontsource/roboto-mono@4.5.10)(@fontsource/roboto@4.5.8)(@popperjs/core@2.11.8)(consola@3.4.2)(focus-trap@7.6.4)(vue@3.5.18(typescript@5.8.3))
@@ -1307,8 +1307,8 @@ packages:
     peerDependencies:
       consola: 3.x
 
-  '@knime/utils@1.8.0':
-    resolution: {integrity: sha512-XvOAVfaHQTML8l8mD5phmqsyCPXseLvaPxLB7AjAyMNw7Zd7ZjcwG4ki5Qnw1Z17/Xiy7QrQ3ktNb0u1PwA4jw==}
+  '@knime/utils@1.9.1':
+    resolution: {integrity: sha512-JnnudAxop5wziV7/YQEOFShHC08nn1bctYu7m1qbdI+Cr/ZtJlfPSJoDR+pAIUMe10Gg/GXH8kW2/HdFp8iEug==}
     engines: {node: '>=22 <25'}
     peerDependencies:
       consola: 3.x
@@ -2799,9 +2799,6 @@ packages:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
-  dompurify@3.2.7:
-    resolution: {integrity: sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==}
-
   dompurify@3.3.0:
     resolution: {integrity: sha512-r+f6MYR1gGN1eJv0TVQbhA7if/U7P87cdPl3HN5rikqaBSBxLiCb/b9O+2eG0cxz0ghyU+mU1QkbsOwERMYlWQ==}
 
@@ -7458,7 +7455,7 @@ snapshots:
   '@knime/kds-components@0.5.2(@vueuse/core@13.8.0(vue@3.5.18(typescript@5.8.3)))(vue@3.5.18(typescript@5.8.3))':
     dependencies:
       '@knime/kds-styles': 0.5.2
-      '@knime/utils': 1.8.0(consola@3.4.2)
+      '@knime/utils': 1.9.1(consola@3.4.2)
       '@vueuse/core': 13.8.0(vue@3.5.18(typescript@5.8.3))
       consola: 3.4.2
       vue: 3.5.18(typescript@5.8.3)
@@ -7608,12 +7605,12 @@ snapshots:
       consola: 3.4.2
       date-fns: 2.30.0
       date-fns-tz: 2.0.0(date-fns@2.30.0)
-      dompurify: 3.2.7
+      dompurify: 3.3.0
     transitivePeerDependencies:
       - '@fontsource/roboto'
       - '@fontsource/roboto-mono'
 
-  '@knime/utils@1.8.0(consola@3.4.2)':
+  '@knime/utils@1.9.1(consola@3.4.2)':
     dependencies:
       consola: 3.4.2
       date-fns: 2.30.0
@@ -9210,10 +9207,6 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
-  dompurify@3.2.7:
-    optionalDependencies:
-      '@types/trusted-types': 2.0.7
-
   dompurify@3.3.0:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
diff --git a/org.knime.ui.js/src/api/custom-types.ts b/org.knime.ui.js/src/api/custom-types.ts
index 1a8fc74bc..c83366b1f 100644
--- a/org.knime.ui.js/src/api/custom-types.ts
+++ b/org.knime.ui.js/src/api/custom-types.ts
@@ -4,9 +4,7 @@ import type {
   EditableMetadata,
   MetaNode,
   NativeNode,
-  NodeCategory,
   NodeDescription,
-  NodeTemplate,
   PortGroup,
   PortType,
   ProjectMetadata,
@@ -152,18 +150,6 @@ export interface Schedule {
   user: string;
   workflowPath: string;
 }
-
-export type ExtendedPortType = PortType & {
-  typeId: string;
-  type?: string;
-  description: string;
-};
-
-export type NodeTemplateWithExtendedPorts = NodeTemplate & {
-  inPorts: ExtendedPortType[];
-  outPorts: ExtendedPortType[];
-};
-
 export type WorkflowObject = XY & {
   id: string;
   type: "node" | "annotation" | "componentPlaceholder";
@@ -187,10 +173,6 @@ export type ExampleProject = {
 
 export type NodeRelation = "PREDECESSORS" | "SUCCESSORS";
 
-export type NodeCategoryWithExtendedPorts = NodeCategory & {
-  nodes?: NodeTemplateWithExtendedPorts[];
-};
-
 export type AncestorInfo = {
   ancestorItemIds: string[];
   itemName: string | null;
diff --git a/org.knime.ui.js/src/api/gateway-api/generated-api.ts b/org.knime.ui.js/src/api/gateway-api/generated-api.ts
index 5022eb915..696e93456 100644
--- a/org.knime.ui.js/src/api/gateway-api/generated-api.ts
+++ b/org.knime.ui.js/src/api/gateway-api/generated-api.ts
@@ -1212,6 +1212,118 @@ export interface ComponentPortDescription {
 }
 
 
+/**
+ * ...
+ * @export
+ * @interface ComponentSearchItem
+ */
+export interface ComponentSearchItem {
+
+    /**
+     * Space item ID of this component
+     * @type {string}
+     * @memberof ComponentSearchItem
+     */
+    id: string;
+    /**
+     * The name of the component as given by the component creator
+     * @type {string}
+     * @memberof ComponentSearchItem
+     */
+    name: string;
+    /**
+     * The description of the component as given by the component creator
+     * @type {string}
+     * @memberof ComponentSearchItem
+     */
+    description?: string;
+    /**
+     * serialised data of component icon
+     * @type {string}
+     * @memberof ComponentSearchItem
+     */
+    icon?: string;
+    /**
+     * The type (a.k.a. \&quot;kind\&quot;) of the component
+     * @type {string}
+     * @memberof ComponentSearchItem
+     */
+    type: ComponentSearchItem.TypeEnum;
+    /**
+     * The components&#39;s input ports.
+     * @type {Array<ComponentSearchItemPort>}
+     * @memberof ComponentSearchItem
+     */
+    inPorts?: Array<ComponentSearchItemPort>;
+    /**
+     * The node&#39;s output ports.
+     * @type {Array<ComponentSearchItemPort>}
+     * @memberof ComponentSearchItem
+     */
+    outPorts?: Array<ComponentSearchItemPort>;
+
+}
+
+
+/**
+ * @export
+ * @namespace ComponentSearchItem
+ */
+export namespace ComponentSearchItem {
+    /**
+     * @export
+     * @enum {string}
+     */
+    export enum TypeEnum {
+        Source = 'Source',
+        Manipulator = 'Manipulator',
+        Visualizer = 'Visualizer',
+        Learner = 'Learner',
+        Sink = 'Sink',
+        Other = 'Other'
+    }
+}
+/**
+ *
+ * @export
+ * @interface ComponentSearchItemPort
+ */
+export interface ComponentSearchItemPort {
+
+    /**
+     * The name of the port as given by the component creator. Not to be confused with the human-readable name of the port _type_.
+     * @type {string}
+     * @memberof ComponentSearchItemPort
+     */
+    name?: string;
+    /**
+     * The description of the component as given by the component creator.
+     * @type {string}
+     * @memberof ComponentSearchItemPort
+     */
+    description?: string;
+    /**
+     * The human-readable name of the port type. This is given by the port type implementation.
+     * @type {string}
+     * @memberof ComponentSearchItemPort
+     */
+    portTypeName: string;
+    /**
+     * Hex string of port type color
+     * @type {string}
+     * @memberof ComponentSearchItemPort
+     */
+    color?: string;
+    /**
+     * Whether the port is optional
+     * @type {boolean}
+     * @memberof ComponentSearchItemPort
+     */
+    optional?: boolean;
+
+}
+
+
 /**
  * Event that can consist of multiple generic events.
  * @export
@@ -6923,6 +7035,28 @@ const space = function(rpcClient: RPCClient) {
             
             return rpcClient.call('SpaceService.renameSpace', { ...defaultParams, ...params });
         },
+        /**
+         * Search among components in this provider
+         * @param {string} [params.query] 
+         * @param {number} [params.limit] 
+         * @param {number} [params.offset] 
+         * @param {*} [params.options] Override http request option.
+         * @throws {RequiredError}
+         * @throws {ServiceCallException} If a Gateway service call failed for some reason.
+         * @throws {LoggedOutException} If a web request could not be authorized because the space provider isn&#39;t logged in
+         * @throws {NetworkException} If a Gateway service call failed due to a network error.
+         */
+        async searchComponents(
+        	params: { query?: string,  limit?: number,  offset?: number  }
+        ): Promise<Array<ComponentSearchItem>> {
+            const defaultParams = { 
+                query: null,
+                limit: null,
+                offset: null,
+            }
+            
+            return rpcClient.call('SpaceService.searchComponents', { ...defaultParams, ...params });
+        },
     }
 };
 
diff --git a/org.knime.ui.js/src/components/common/InfiniteLoadingList/InfiniteLoadingList.vue b/org.knime.ui.js/src/components/common/InfiniteLoadingList/InfiniteLoadingList.vue
new file mode 100644
index 000000000..4cf277da3
--- /dev/null
+++ b/org.knime.ui.js/src/components/common/InfiniteLoadingList/InfiniteLoadingList.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { nextTick, ref, toRefs, useTemplateRef, watch } from "vue";
+
+import ScrollViewContainer from "@/components/common/ScrollViewContainer/ScrollViewContainer.vue";
+import { createStaggeredLoader } from "@/util/createStaggeredLoader";
+
+type Props = {
+  isLoading: boolean;
+  fetchMore: () => Promise<any>;
+};
+const props = defineProps<Props>();
+
+const searchScrollPosition = defineModel<number>({ default: 0 });
+
+const { isLoading } = toRefs(props);
+
+const isLoadingNextPage = ref(false);
+
+/**
+ * State used to mirror the loading state but with a small
+ * time offset, so as not to immediately show the loading state
+ * if the results arrive quickly
+ * */
+const isLoadingDeferred = ref(false);
+
+const setIsLoadingNextPage = createStaggeredLoader({
+  firstStageCallback: () => {
+    isLoadingNextPage.value = true;
+  },
+  resetCallback: () => {
+    isLoadingNextPage.value = false;
+  },
+});
+
+const setIsLoadingDeferred = createStaggeredLoader({
+  firstStageCallback: () => {
+    isLoadingDeferred.value = true;
+  },
+  resetCallback: () => {
+    isLoadingDeferred.value = false;
+  },
+});
+
+watch(
+  isLoading,
+  (value) => {
+    setIsLoadingDeferred(value);
+  },
+  { immediate: true },
+);
+
+const onSaveScrollPosition = (position: number) => {
+  searchScrollPosition.value = position;
+};
+
+const scroller = useTemplateRef("scroller");
+const scrollToTop = async () => {
+  // wait for new content to be displayed, then scroll to top
+  await nextTick();
+  if (scroller.value) {
+    scroller.value.$el.scrollTop = 0;
+  }
+};
+
+const loadMoreSearchResults = async () => {
+  setIsLoadingNextPage(true);
+  await props.fetchMore();
+  setIsLoadingNextPage(false);
+};
+
+defineExpose({ scrollToTop });
+</script>
+
+<template>
+  <ScrollViewContainer
+    ref="scroller"
+    class="results"
+    :initial-position="searchScrollPosition"
+    @save-position="onSaveScrollPosition"
+    @scroll-bottom="loadMoreSearchResults"
+  >
+    <div class="content">
+      <slot
+        :is-loading-next-page="isLoadingNextPage"
+        :is-loading-deferred="isLoadingDeferred"
+      />
+    </div>
+  </ScrollViewContainer>
+</template>
+
+<style lang="postcss" scoped>
+.results {
+  & .content {
+    padding: 0 var(--space-16) var(--space-16);
+
+    & .node-list {
+      margin-bottom: -11px;
+    }
+
+    & .node-list-skeleton {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: flex-start;
+    }
+  }
+}
+</style>
diff --git a/org.knime.ui.js/src/components/common/NodeList/InfiniteNodeList.vue b/org.knime.ui.js/src/components/common/NodeList/InfiniteNodeList.vue
new file mode 100644
index 000000000..cb20bf349
--- /dev/null
+++ b/org.knime.ui.js/src/components/common/NodeList/InfiniteNodeList.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { computed, toRefs, useTemplateRef } from "vue";
+
+import InfiniteLoadingList from "@/components/common/InfiniteLoadingList/InfiniteLoadingList.vue";
+import NodeList, {
+  type NavReachedEvent,
+} from "@/components/common/NodeList/NodeList.vue";
+import SkeletonNodes from "@/components/common/skeleton-loader/SkeletonNodes.vue";
+import type { NodeRepositoryDisplayModesType } from "@/store/settings";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
+
+type Props = {
+  nodes: NodeTemplateWithExtendedPorts[];
+  fetchMore: () => Promise<void>;
+  showDetailsFor?: NodeTemplateWithExtendedPorts | null;
+  highlightFirst?: boolean;
+  displayMode?: Exclude<NodeRepositoryDisplayModesType, "tree">;
+  isLoading: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  highlightFirst: false,
+  displayMode: "icon",
+  showDetailsFor: null,
+});
+
+const scrollPosition = defineModel<number>("scrollPosition");
+const selectedNode = defineModel<NodeTemplateWithExtendedPorts | null>(
+  "selectedNode",
+  { default: null },
+);
+
+const emit = defineEmits<{
+  navReachedTop: [event: NavReachedEvent];
+  itemEnterKey: [node: NodeTemplateWithExtendedPorts];
+  showNodeDetails: [node: NodeTemplateWithExtendedPorts];
+}>();
+
+const { nodes, displayMode, isLoading } = toRefs(props);
+
+const isEmpty = computed(() => nodes.value?.length === 0);
+
+const infiniteList = useTemplateRef("infiniteList");
+const scrollToTop = async () => {
+  await infiniteList.value?.scrollToTop();
+};
+
+const nodeList = useTemplateRef("nodeList");
+const focusFirst = () => {
+  nodeList.value?.focusFirst();
+};
+
+defineExpose({ focusFirst, scrollToTop });
+</script>
+
+<template>
+  <InfiniteLoadingList
+    ref="infiniteList"
+    v-model="scrollPosition"
+    :is-loading="isLoading"
+    :fetch-more="fetchMore"
+  >
+    <template #default="{ isLoadingNextPage, isLoadingDeferred }">
+      <div v-if="!isEmpty" class="node-list-wrapper">
+        <NodeList
+          ref="nodeList"
+          v-model:selected-node="selectedNode"
+          class="node-list"
+          :nodes="nodes!"
+          :highlight-first="highlightFirst"
+          :display-mode="displayMode"
+          :show-details-for="showDetailsFor"
+          @nav-reached-top="emit('navReachedTop', $event)"
+          @enter-key="emit('itemEnterKey', $event)"
+          @show-node-details="emit('showNodeDetails', $event)"
+        >
+          <template #item="slotProps">
+            <slot name="nodesTemplate" v-bind="slotProps" />
+          </template>
+        </NodeList>
+
+        <SkeletonNodes
+          v-if="isLoadingNextPage"
+          class="node-list-skeleton"
+          :number-of-nodes="5"
+          :display-mode="displayMode"
+        />
+      </div>
+
+      <SkeletonNodes
+        v-if="isLoadingDeferred"
+        class="node-list-skeleton"
+        :number-of-nodes="5"
+        :display-mode="displayMode"
+      />
+
+      <slot
+        name="listBottom"
+        :is-empty="isEmpty"
+        :is-loading="isLoading"
+        :is-loading-deferred="isLoadingDeferred"
+        :is-loading-next-page="isLoadingNextPage"
+      />
+    </template>
+  </InfiniteLoadingList>
+</template>
+
+<style lang="postcss" scoped>
+@import url("@/assets/mixins.css");
+
+.results {
+  & .content {
+    padding: 0 var(--space-16) var(--space-16);
+
+    & .node-list {
+      margin-bottom: -11px;
+    }
+
+    & .node-list-skeleton {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: flex-start;
+    }
+  }
+}
+</style>
diff --git a/org.knime.ui.js/src/components/common/NodeList/NodeList.vue b/org.knime.ui.js/src/components/common/NodeList/NodeList.vue
index dd4136aaf..069843866 100644
--- a/org.knime.ui.js/src/components/common/NodeList/NodeList.vue
+++ b/org.knime.ui.js/src/components/common/NodeList/NodeList.vue
@@ -5,9 +5,9 @@ import { useActiveElement } from "@vueuse/core";
 import { Button, useKeyPressedUntilMouseClick } from "@knime/components";
 import CircleArrowIcon from "@knime/styles/img/icons/circle-arrow-right.svg";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import NodeTemplate from "@/components/common/NodeTemplate/NodeTemplate.vue";
 import type { NodeRepositoryDisplayModesType } from "@/store/settings";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 
 const NODES_PER_ROW_ICON_MODE = 3;
 const NODES_PER_ROW_LIST_MODE = 1;
@@ -17,7 +17,7 @@ type Props = {
   hasMoreNodes?: boolean;
   displayMode?: NodeRepositoryDisplayModesType;
   selectedNode?: NodeTemplateWithExtendedPorts | null;
-  showDescriptionForNode?: NodeTemplateWithExtendedPorts | null;
+  showDetailsFor?: NodeTemplateWithExtendedPorts | null;
   highlightFirst?: boolean;
 };
 
@@ -35,13 +35,13 @@ const props = withDefaults(defineProps<Props>(), {
   hasMoreNodes: false,
   displayMode: "icon",
   selectedNode: null,
-  showDescriptionForNode: null,
+  showDetailsFor: null,
   highlightFirst: false,
 });
 
 const emit = defineEmits<{
   enterKey: [node: NodeTemplateWithExtendedPorts];
-  helpKey: [node: NodeTemplateWithExtendedPorts];
+  showNodeDetails: [node: NodeTemplateWithExtendedPorts];
   showMore: [];
   "update:selectedNode": [node: NodeTemplateWithExtendedPorts | null];
   navReachedTop: [event: NavReachedEvent];
@@ -73,7 +73,7 @@ const nodeTemplateProps = (
     isHighlighted:
       props.selectedNode === null && index === 0 && props.highlightFirst,
     isSelected: props.selectedNode?.id === node.id,
-    isDescriptionActive: props.showDescriptionForNode?.id === node.id,
+    isDescriptionActive: props.showDetailsFor?.id === node.id,
     displayMode: props.displayMode,
   };
 };
@@ -261,7 +261,7 @@ defineExpose({ focusFirst, focusLast });
         :aria-label="`Select node ${node.name}`"
         :data-index="index"
         @keydown.enter.stop.prevent="$emit('enterKey', node)"
-        @keydown.i.stop.prevent="$emit('helpKey', node)"
+        @keydown.i.stop.prevent="$emit('showNodeDetails', node)"
       >
         <slot name="item" v-bind="nodeTemplateProps(node, index)">
           <NodeTemplate v-bind="nodeTemplateProps(node, index)" />
diff --git a/org.knime.ui.js/src/components/common/NodeTemplate/DraggableNodeTemplate.vue b/org.knime.ui.js/src/components/common/NodeTemplate/DraggableNodeTemplate.vue
index e6542ec6b..a832c794a 100644
--- a/org.knime.ui.js/src/components/common/NodeTemplate/DraggableNodeTemplate.vue
+++ b/org.knime.ui.js/src/components/common/NodeTemplate/DraggableNodeTemplate.vue
@@ -2,11 +2,11 @@
 import { ref, useTemplateRef } from "vue";
 import { storeToRefs } from "pinia";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import { useAddNodeToWorkflow } from "@/composables/useAddNodeToWorkflow";
 import { useDragNodeIntoCanvas } from "@/composables/useDragNodeIntoCanvas";
 import { usePanelStore } from "@/store/panel";
 import type { NodeRepositoryDisplayModesType } from "@/store/settings";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 import NodeTemplate from "../NodeTemplate/NodeTemplate.vue";
 
 /**
@@ -32,7 +32,7 @@ const emit = defineEmits<{
   showNodeDescription: [];
 }>();
 
-const addNodeToWorkflow = useAddNodeToWorkflow();
+const { addNodeWithAutoPositioning } = useAddNodeToWorkflow();
 
 const panelStore = usePanelStore();
 const { isExtensionPanelOpen } = storeToRefs(panelStore);
@@ -100,7 +100,7 @@ const onDragEnd = (event: DragEvent) => {
     :show-floating-help-icon="true"
     @dragstart="onDragStart"
     @dragend="onDragEnd"
-    @dblclick="addNodeToWorkflow(nodeTemplate)"
+    @dblclick="addNodeWithAutoPositioning(nodeTemplate.nodeFactory!)"
     @drag="dragNodeIntoCanvas.onDrag"
     @help-icon-click="emit('showNodeDescription')"
   />
diff --git a/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplate.vue b/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplate.vue
index 402d063b8..9065bba54 100644
--- a/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplate.vue
+++ b/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplate.vue
@@ -3,8 +3,8 @@ import { computed, ref } from "vue";
 
 import { NodePreview } from "@knime/components";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import type { NodeRepositoryDisplayModesType } from "@/store/settings";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 
 import NodeTemplateIconMode from "./NodeTemplateIconMode.vue";
 import NodeTemplateListMode from "./NodeTemplateListMode.vue";
@@ -12,7 +12,7 @@ import NodeTemplateListMode from "./NodeTemplateListMode.vue";
 /**
  * Basic NodeTemplate without any drag or insert features. This component should stay reusable.
  */
-export interface Props {
+export type Props = {
   /**
    * Additional to the properties of the NodeTemplate from the gateway API, this object
    * contains the port information (color and kind) which was mapped from the store
@@ -23,7 +23,7 @@ export interface Props {
   isDescriptionActive?: boolean;
   isHighlighted?: boolean;
   showFloatingHelpIcon?: boolean;
-}
+};
 
 const props = withDefaults(defineProps<Props>(), {
   displayMode: "icon",
@@ -86,6 +86,7 @@ defineExpose({ getNodePreview });
         :in-ports="nodeTemplate.inPorts"
         :out-ports="nodeTemplate.outPorts"
         :icon="nodeTemplate.icon"
+        :is-component="nodeTemplate.component"
       />
     </template>
   </Component>
diff --git a/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplateIconMode.vue b/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplateIconMode.vue
index d783c2e4e..9957380ab 100644
--- a/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplateIconMode.vue
+++ b/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplateIconMode.vue
@@ -3,7 +3,7 @@ import { computed } from "vue";
 
 import ExtensionCommunityIcon from "@knime/styles/img/icons/extension-community.svg";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 
 import NodeTemplateHelpIcon from "./NodeTemplateHelpIcon.vue";
 
diff --git a/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplateListMode.vue b/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplateListMode.vue
index 5eadea16d..97c4c42bb 100644
--- a/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplateListMode.vue
+++ b/org.knime.ui.js/src/components/common/NodeTemplate/NodeTemplateListMode.vue
@@ -3,7 +3,7 @@ import { computed } from "vue";
 
 import ExtensionCommunityIcon from "@knime/styles/img/icons/extension-community.svg";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 
 import NodeTemplateHelpIcon from "./NodeTemplateHelpIcon.vue";
 
diff --git a/org.knime.ui.js/src/components/common/skeleton-loader/SkeletonNodes.vue b/org.knime.ui.js/src/components/common/skeleton-loader/SkeletonNodes.vue
index 825bcdd8d..d7cf353cf 100644
--- a/org.knime.ui.js/src/components/common/skeleton-loader/SkeletonNodes.vue
+++ b/org.knime.ui.js/src/components/common/skeleton-loader/SkeletonNodes.vue
@@ -3,7 +3,7 @@ import SkeletonItem from "./SkeletonItem.vue";
 
 type Props = {
   numberOfNodes?: number;
-  displayMode?: string;
+  displayMode?: "icon" | "list";
 };
 
 withDefaults(defineProps<Props>(), {
diff --git a/org.knime.ui.js/src/components/componentSearch/ComponentSearchResults.vue b/org.knime.ui.js/src/components/componentSearch/ComponentSearchResults.vue
new file mode 100644
index 000000000..eb0e10f84
--- /dev/null
+++ b/org.knime.ui.js/src/components/componentSearch/ComponentSearchResults.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { toRef, useTemplateRef, watch } from "vue";
+import { storeToRefs } from "pinia";
+
+import InfiniteNodeList from "@/components/common/NodeList/InfiniteNodeList.vue";
+import { useComponentSearchStore } from "@/store/componentSearch";
+import type { NavReachedEvent } from "../common/NodeList/NodeList.vue";
+import DraggableNodeTemplate from "../common/NodeTemplate/DraggableNodeTemplate.vue";
+
+type Props = {
+  active: boolean;
+};
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  navReachedTop: [event: NavReachedEvent];
+}>();
+
+const componentSearchStore = useComponentSearchStore();
+const { isLoading, hasLoaded, results, searchScrollPosition } =
+  storeToRefs(componentSearchStore);
+
+watch(toRef(props, "active"), () => {
+  if (props.active && !hasLoaded.value) {
+    componentSearchStore.searchComponents();
+  }
+});
+
+const infiniteList = useTemplateRef("infiniteList");
+const focusFirst = () => {
+  infiniteList.value?.focusFirst();
+};
+defineExpose({ focusFirst });
+</script>
+
+<template>
+  <InfiniteNodeList
+    ref="infiniteList"
+    v-model:scroll-position="searchScrollPosition"
+    :nodes="results"
+    :fetch-more="() => componentSearchStore.searchComponents({ append: true })!"
+    :is-loading="isLoading"
+    @nav-reached-top="emit('navReachedTop', $event)"
+  >
+    <template #nodesTemplate="slotProps">
+      <DraggableNodeTemplate v-bind="slotProps" />
+    </template>
+
+    <template #listBottom="{ isEmpty }">
+      <div v-if="isEmpty && !isLoading" class="empty-state">
+        No results were found. Please try a different search term.
+      </div>
+    </template>
+  </InfiniteNodeList>
+</template>
+
+<style lang="postcss" scoped>
+.empty-state {
+  display: flex;
+  justify-content: center;
+  padding: var(--space-32) var(--space-8);
+  font-size: 13px;
+  text-align: center;
+}
+</style>
diff --git a/org.knime.ui.js/src/components/kai/chat/message/SuggestedNodes.vue b/org.knime.ui.js/src/components/kai/chat/message/SuggestedNodes.vue
index 8500506f6..626436160 100644
--- a/org.knime.ui.js/src/components/kai/chat/message/SuggestedNodes.vue
+++ b/org.knime.ui.js/src/components/kai/chat/message/SuggestedNodes.vue
@@ -3,10 +3,10 @@ import { computed, ref } from "vue";
 
 import NodeIcon from "@knime/styles/img/icons/node.svg";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import NodeList from "@/components/common/NodeList/NodeList.vue";
 import DraggableNodeTemplate from "@/components/common/NodeTemplate/DraggableNodeTemplate.vue";
 import { useAddNodeToWorkflow } from "@/composables/useAddNodeToWorkflow";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 import { useKaiExtensionPanel } from "../../useKaiExtensionPanel";
 
 type Props = {
@@ -16,7 +16,7 @@ type Props = {
 const props = defineProps<Props>();
 
 const { toggleNodeDescription } = useKaiExtensionPanel();
-const addNodeToWorkflow = useAddNodeToWorkflow();
+const { addNodeWithAutoPositioning } = useAddNodeToWorkflow();
 
 const hasNodeTemplates = computed(() => props.nodeTemplates.length > 0);
 
@@ -24,7 +24,7 @@ const selectedNode = ref<NodeTemplateWithExtendedPorts | null>(null);
 
 const handleEnterKey = (node: NodeTemplateWithExtendedPorts) => {
   if (node.nodeFactory) {
-    addNodeToWorkflow({ nodeFactory: node.nodeFactory });
+    addNodeWithAutoPositioning(node.nodeFactory);
   }
 };
 </script>
diff --git a/org.knime.ui.js/src/components/kai/chat/message/useNodeTemplates.ts b/org.knime.ui.js/src/components/kai/chat/message/useNodeTemplates.ts
index 56eb7fbcb..3552d93b4 100644
--- a/org.knime.ui.js/src/components/kai/chat/message/useNodeTemplates.ts
+++ b/org.knime.ui.js/src/components/kai/chat/message/useNodeTemplates.ts
@@ -1,8 +1,8 @@
 import { type Ref, ref, watch } from "vue";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import { KaiMessage } from "@/api/gateway-api/generated-api";
 import { useNodeTemplatesStore } from "@/store/nodeTemplates/nodeTemplates";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 import type {
   ExtensionWithNodes,
   Extensions,
diff --git a/org.knime.ui.js/src/components/nodeDescription/NodeDescription.vue b/org.knime.ui.js/src/components/nodeDescription/NodeDescription.vue
index 917abf4db..4b01dcadc 100644
--- a/org.knime.ui.js/src/components/nodeDescription/NodeDescription.vue
+++ b/org.knime.ui.js/src/components/nodeDescription/NodeDescription.vue
@@ -12,7 +12,7 @@ import { useNodeDescriptionStore } from "@/store/nodeDescription/nodeDescription
 import type {
   ComponentNodeDescriptionWithExtendedPorts,
   NativeNodeDescriptionWithExtendedPorts,
-} from "@/util/portDataMapper";
+} from "@/util/dataMappers";
 import SidebarPanelLayout from "../common/side-panel/SidebarPanelLayout.vue";
 import SidebarPanelScrollContainer from "../common/side-panel/SidebarPanelScrollContainer.vue";
 
diff --git a/org.knime.ui.js/src/components/nodeDescription/NodeDescriptionContent.vue b/org.knime.ui.js/src/components/nodeDescription/NodeDescriptionContent.vue
index ba7431b3d..7912d07a3 100644
--- a/org.knime.ui.js/src/components/nodeDescription/NodeDescriptionContent.vue
+++ b/org.knime.ui.js/src/components/nodeDescription/NodeDescriptionContent.vue
@@ -8,7 +8,7 @@ import MetadataDescription from "@/components/workflowMetadata/MetadataDescripti
 import type {
   ComponentNodeDescriptionWithExtendedPorts,
   NativeNodeDescriptionWithExtendedPorts,
-} from "@/util/portDataMapper";
+} from "@/util/dataMappers";
 
 type Props = {
   descriptionData:
diff --git a/org.knime.ui.js/src/components/nodeDescription/NodeDescriptionExtensionInfo.vue b/org.knime.ui.js/src/components/nodeDescription/NodeDescriptionExtensionInfo.vue
index b6bc68a94..f1d75cc86 100644
--- a/org.knime.ui.js/src/components/nodeDescription/NodeDescriptionExtensionInfo.vue
+++ b/org.knime.ui.js/src/components/nodeDescription/NodeDescriptionExtensionInfo.vue
@@ -2,7 +2,7 @@
 import KNIMETriangleIcon from "@knime/styles/img/KNIME_Triangle.svg";
 import ExtensionIcon from "@knime/styles/img/icons/extension.svg";
 
-import type { NativeNodeDescriptionWithExtendedPorts } from "@/util/portDataMapper";
+import type { NativeNodeDescriptionWithExtendedPorts } from "@/util/dataMappers";
 
 type Props = {
   descriptionData: NativeNodeDescriptionWithExtendedPorts;
diff --git a/org.knime.ui.js/src/components/nodeRepository/NodeRepository.vue b/org.knime.ui.js/src/components/nodeRepository/NodeRepository.vue
index 1c51c6306..521d619a6 100644
--- a/org.knime.ui.js/src/components/nodeRepository/NodeRepository.vue
+++ b/org.knime.ui.js/src/components/nodeRepository/NodeRepository.vue
@@ -1,19 +1,20 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref, useTemplateRef, watch } from "vue";
 import { storeToRefs } from "pinia";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import type { NavigationKey } from "@/components/common/NodeList/NodeList.vue";
 import NodeDescription from "@/components/nodeDescription/NodeDescription.vue";
-import SidebarSearchResults from "@/components/nodeRepository/NodeSearchResults/SidebarSearchResults.vue";
+import SidebarNodeSearchResults from "@/components/nodeRepository/NodeSearchResults/SidebarNodeSearchResults.vue";
 import { useApplicationStore } from "@/store/application/application";
 import { useLifecycleStore } from "@/store/application/lifecycle";
 import { useNodeRepositoryStore } from "@/store/nodeRepository";
 import { usePanelStore } from "@/store/panel";
 import { useSettingsStore } from "@/store/settings";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
+import ComponentSearchResults from "../componentSearch/ComponentSearchResults.vue";
 
-import CategoryTree from "./CategoryTree.vue";
 import NodeRepositoryLoader from "./NodeRepositoryLoader.vue";
+import NodeRepositoryTree from "./NodeRepositoryTree/NodeRepositoryTree.vue";
 import NodesGroupedByTag from "./NodesGroupedByTag/NodesGroupedByTag.vue";
 import NodeRepositoryHeader from "./header/NodeRepositoryHeader.vue";
 
@@ -21,8 +22,6 @@ const nodeRepositoryStore = useNodeRepositoryStore();
 const { nodesPerTag, showDescriptionForNode, searchIsActive } =
   storeToRefs(nodeRepositoryStore);
 
-const categoryTree = ref<InstanceType<typeof CategoryTree>>();
-
 const displayMode = computed(
   () => useSettingsStore().settings.nodeRepositoryDisplayMode,
 );
@@ -86,24 +85,30 @@ const toggleNodeDescription = ({
   panelStore.closeExtensionPanel();
 };
 
-const header = ref<InstanceType<typeof NodeRepositoryHeader>>();
+const searchContext = ref<"nodes" | "components">("nodes");
 
-const searchResults = ref<InstanceType<typeof SidebarSearchResults>>();
-const nodesGroupedByTag = ref<InstanceType<typeof NodesGroupedByTag>>();
+const header = useTemplateRef("header");
+const nodeSearchResults = useTemplateRef("nodeSearchResults");
+const nodesGroupedByTag = useTemplateRef("nodesGroupedByTag");
+const nodeRepositoryTree = useTemplateRef("nodeRepositoryTree");
+const componentSearchResults = useTemplateRef("componentSearchResults");
 
 const onSearchBarDownKey = () => {
-  // search (regardless of display mode)
+  if (searchContext.value === "components") {
+    componentSearchResults.value?.focusFirst();
+    return;
+  }
+
   if (searchIsActive.value) {
-    searchResults.value?.focusFirst();
+    nodeSearchResults.value?.focusFirst();
     return;
   }
 
-  // tree
   if (displayMode.value === "tree") {
-    categoryTree.value?.focusFirst();
+    nodeRepositoryTree.value?.focusFirst();
     return;
   }
-  // tag
+
   nodesGroupedByTag.value?.focusFirst();
 };
 
@@ -118,29 +123,39 @@ const handleNavReachedTop = (event: { key: NavigationKey }) => {
   <div class="node-repo">
     <NodeRepositoryHeader
       ref="header"
+      v-model="searchContext"
       @search-bar-down-key="onSearchBarDownKey"
     />
 
     <template v-if="nodeRepositoryLoaded">
-      <SidebarSearchResults
-        v-if="searchIsActive"
-        ref="searchResults"
-        :display-mode="displayMode"
-        @nav-reached-top="handleNavReachedTop($event)"
-        @show-node-description="toggleNodeDescription"
-      />
-      <NodesGroupedByTag
-        v-else-if="displayMode !== 'tree'"
-        ref="nodesGroupedByTag"
-        :display-mode="displayMode"
-        @nav-reached-top="handleNavReachedTop($event)"
-        @show-node-description="toggleNodeDescription"
-      />
-      <CategoryTree
-        v-else
-        ref="categoryTree"
+      <div v-show="searchContext === 'nodes'" style="height: 100%">
+        <SidebarNodeSearchResults
+          v-if="searchIsActive"
+          ref="nodeSearchResults"
+          :display-mode="displayMode"
+          @nav-reached-top="handleNavReachedTop($event)"
+          @show-node-description="toggleNodeDescription"
+        />
+        <NodesGroupedByTag
+          v-else-if="displayMode !== 'tree'"
+          ref="nodesGroupedByTag"
+          :display-mode="displayMode"
+          @nav-reached-top="handleNavReachedTop($event)"
+          @show-node-description="toggleNodeDescription"
+        />
+        <NodeRepositoryTree
+          v-else
+          ref="nodeRepositoryTree"
+          @nav-reached-top="handleNavReachedTop($event)"
+          @show-node-description="toggleNodeDescription"
+        />
+      </div>
+
+      <ComponentSearchResults
+        v-show="searchContext === 'components'"
+        ref="componentSearchResults"
+        :active="searchContext === 'components'"
         @nav-reached-top="handleNavReachedTop($event)"
-        @show-node-description="toggleNodeDescription"
       />
     </template>
 
diff --git a/org.knime.ui.js/src/components/nodeRepository/CategoryTree.vue b/org.knime.ui.js/src/components/nodeRepository/NodeRepositoryTree/NodeRepositoryTree.vue
similarity index 94%
rename from org.knime.ui.js/src/components/nodeRepository/CategoryTree.vue
rename to org.knime.ui.js/src/components/nodeRepository/NodeRepositoryTree/NodeRepositoryTree.vue
index 20d213a7f..c15e9d4f8 100644
--- a/org.knime.ui.js/src/components/nodeRepository/CategoryTree.vue
+++ b/org.knime.ui.js/src/components/nodeRepository/NodeRepositoryTree/NodeRepositoryTree.vue
@@ -10,17 +10,16 @@ import {
   type TreeNodeOptions,
 } from "@knime/virtual-tree";
 
-import type {
-  NodeCategoryWithExtendedPorts,
-  NodeTemplateWithExtendedPorts,
-} from "@/api/custom-types";
 import type { CategoryMetadata } from "@/api/gateway-api/generated-api";
 import type { NavigationKey } from "@/components/common/NodeList/NodeList.vue";
+import DraggableNodeTemplate from "@/components/common/NodeTemplate/DraggableNodeTemplate.vue";
 import { useAddNodeToWorkflow } from "@/composables/useAddNodeToWorkflow";
 import { useApplicationSettingsStore } from "@/store/application/settings";
 import { useNodeRepositoryStore } from "@/store/nodeRepository";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 import { hasAllObjectPropertiesDefined } from "@/util/hasAllObjectPropertiesDefined";
-import DraggableNodeTemplate from "../common/NodeTemplate/DraggableNodeTemplate.vue";
+
+import type { NodeCategoryWithExtendedPorts } from "./types";
 
 type ExtendedTreeNodeOptions = TreeNodeOptions & {
   nodeTemplate?: NodeTemplateWithExtendedPorts;
@@ -162,13 +161,13 @@ const onShowNodeDescription = (treeNode: BaseTreeNode) => {
   }
 };
 
-const addNodeToWorkflow = useAddNodeToWorkflow();
+const { addNodeWithAutoPositioning } = useAddNodeToWorkflow();
 const addTreeNodeToWorkflow = (treeNode: BaseTreeNode) => {
   const nodeFactory = (treeNode.origin as ExtendedTreeNodeOptions)?.nodeTemplate
     ?.nodeFactory;
 
   if (nodeFactory) {
-    addNodeToWorkflow({ nodeFactory });
+    addNodeWithAutoPositioning(nodeFactory);
   }
 };
 
diff --git a/org.knime.ui.js/src/components/nodeRepository/NodeRepositoryTree/types.ts b/org.knime.ui.js/src/components/nodeRepository/NodeRepositoryTree/types.ts
new file mode 100644
index 000000000..82a721eb6
--- /dev/null
+++ b/org.knime.ui.js/src/components/nodeRepository/NodeRepositoryTree/types.ts
@@ -0,0 +1,6 @@
+import type { NodeCategory } from "@/api/gateway-api/generated-api";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
+
+export type NodeCategoryWithExtendedPorts = NodeCategory & {
+  nodes?: NodeTemplateWithExtendedPorts[];
+};
diff --git a/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/SidebarSearchResults.vue b/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/SidebarNodeSearchResults.vue
similarity index 89%
rename from org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/SidebarSearchResults.vue
rename to org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/SidebarNodeSearchResults.vue
index dd56386d1..40cce4b9c 100644
--- a/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/SidebarSearchResults.vue
+++ b/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/SidebarNodeSearchResults.vue
@@ -2,13 +2,13 @@
 import { computed, ref } from "vue";
 import { storeToRefs } from "pinia";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import type { NavReachedEvent } from "@/components/common/NodeList/NodeList.vue";
 import DraggableNodeTemplate from "@/components/common/NodeTemplate/DraggableNodeTemplate.vue";
 import SearchResults from "@/components/nodeSearch/SearchResults.vue";
 import { useAddNodeToWorkflow } from "@/composables/useAddNodeToWorkflow";
 import { useNodeRepositoryStore } from "@/store/nodeRepository";
 import type { NodeRepositoryDisplayModesType } from "@/store/settings";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 /**
  * Search results that use nodeRepository store and the draggable node template (which also uses the store)
  */
@@ -44,7 +44,7 @@ const {
   selectedNode,
 } = storeToRefs(nodeRepositoryStore);
 
-const addNodeToWorkflow = useAddNodeToWorkflow();
+const { addNodeWithAutoPositioning } = useAddNodeToWorkflow();
 
 const searchActions = {
   searchNodesNextPage: () => nodeRepositoryStore.searchNodesNextPage(),
@@ -56,7 +56,7 @@ const focusFirst = () => {
   searchResults.value?.focusFirst();
 };
 
-const onHelpKey = (node: NodeTemplateWithExtendedPorts) => {
+const onShowNodeDetails = (node: NodeTemplateWithExtendedPorts) => {
   emit("showNodeDescription", {
     nodeTemplate: node,
     isDescriptionActive: showDescriptionForNode.value?.id === node.id,
@@ -86,8 +86,8 @@ const displayModeSupported = computed(() => {
     :nodes="nodes"
     :num-filtered-out-nodes="totalNumFilteredNodesFound"
     :is-loading-search-results="isLoadingSearchResults"
-    @item-enter-key="addNodeToWorkflow({ nodeFactory: $event.nodeFactory! })"
-    @help-key="onHelpKey"
+    @item-enter-key="addNodeWithAutoPositioning($event.nodeFactory!)"
+    @show-node-details="onShowNodeDetails"
     @nav-reached-top="$emit('navReachedTop', $event)"
   >
     <template #nodesTemplate="slotProps">
diff --git a/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/__tests__/SidebarSearchResults.test.js b/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/__tests__/SidebarNodeSearchResults.test.ts
similarity index 90%
rename from org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/__tests__/SidebarSearchResults.test.js
rename to org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/__tests__/SidebarNodeSearchResults.test.ts
index dc490b142..309861569 100644
--- a/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/__tests__/SidebarSearchResults.test.js
+++ b/org.knime.ui.js/src/components/nodeRepository/NodeSearchResults/__tests__/SidebarNodeSearchResults.test.ts
@@ -5,9 +5,9 @@ import { mount } from "@vue/test-utils";
 import SearchResults from "@/components/nodeSearch/SearchResults.vue";
 import { createNodeTemplateWithExtendedPorts } from "@/test/factories";
 import { mockStores } from "@/test/utils/mockStores";
-import SidebarSearchResults from "../SidebarSearchResults.vue";
+import SidebarNodeSearchResults from "../SidebarNodeSearchResults.vue";
 
-describe("SidebarSearchResults", () => {
+describe("SidebarNodeSearchResults", () => {
   const doMount = () => {
     const { nodeRepositoryStore, testingPinia } = mockStores();
 
@@ -32,11 +32,11 @@ describe("SidebarSearchResults", () => {
 
     nodeRepositoryStore.isLoadingSearchResults = false;
 
-    vi.mocked(nodeRepositoryStore.searchNodesNextPage).mockImplementation(
-      () => {},
+    vi.mocked(nodeRepositoryStore.searchNodesNextPage).mockImplementation(() =>
+      Promise.resolve(),
     );
 
-    const wrapper = mount(SidebarSearchResults, {
+    const wrapper = mount(SidebarNodeSearchResults, {
       props: { displayMode: "icon" },
       global: { plugins: [testingPinia] },
     });
diff --git a/org.knime.ui.js/src/components/nodeRepository/NodesGroupedByTag/NodesGroupedByTag.vue b/org.knime.ui.js/src/components/nodeRepository/NodesGroupedByTag/NodesGroupedByTag.vue
index c807f8435..33e391d7a 100644
--- a/org.knime.ui.js/src/components/nodeRepository/NodesGroupedByTag/NodesGroupedByTag.vue
+++ b/org.knime.ui.js/src/components/nodeRepository/NodesGroupedByTag/NodesGroupedByTag.vue
@@ -4,7 +4,6 @@ import { storeToRefs } from "pinia";
 
 import { Tag } from "@knime/components";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import type { NavReachedEvent } from "@/components/common/NodeList/NodeList.vue";
 import NodeList from "@/components/common/NodeList/NodeList.vue";
 import DraggableNodeTemplate from "@/components/common/NodeTemplate/DraggableNodeTemplate.vue";
@@ -12,6 +11,7 @@ import ScrollViewContainer from "@/components/common/ScrollViewContainer/ScrollV
 import { useAddNodeToWorkflow } from "@/composables/useAddNodeToWorkflow";
 import { useNodeRepositoryStore } from "@/store/nodeRepository";
 import type { NodeRepositoryDisplayModesType } from "@/store/settings";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 
 const TAG_LIMIT = 8;
 
@@ -23,7 +23,7 @@ const props = withDefaults(defineProps<Props>(), { displayMode: "icon" });
 
 const emit = defineEmits(["showNodeDescription", "navReachedTop"]);
 
-const addNodeToWorkflow = useAddNodeToWorkflow();
+const { addNodeWithAutoPositioning } = useAddNodeToWorkflow();
 
 const nodeRepositoryStore = useNodeRepositoryStore();
 const { showDescriptionForNode, tagScrollPosition, nodesPerTag, selectedNode } =
@@ -56,7 +56,7 @@ const onSelectTag = (tag: string) => {
   nodeRepositoryStore.updateSelectedTags([tag]);
 };
 
-const onHelpKey = (node: NodeTemplateWithExtendedPorts) => {
+const onShowNodeDetails = (node: NodeTemplateWithExtendedPorts) => {
   emit("showNodeDescription", {
     nodeTemplate: node,
     isDescriptionActive: showDescriptionForNode.value?.id === node.id,
@@ -117,11 +117,11 @@ defineExpose({ focusFirst });
             :nodes="nodes"
             class="tag-node-list"
             :has-more-nodes="nodes.length >= TAG_LIMIT"
-            :show-description-for-node="showDescriptionForNode"
+            :show-details-for="showDescriptionForNode"
             :display-mode="displayMode"
             @show-more="onSelectTag(tag)"
-            @enter-key="addNodeToWorkflow"
-            @help-key="onHelpKey"
+            @enter-key="addNodeWithAutoPositioning($event.nodeFactory!)"
+            @show-node-details="onShowNodeDetails"
             @nav-reached-top="onNavReachedTop(index, $event)"
             @nav-reached-end="onNavReachedEnd(index, $event)"
           >
diff --git a/org.knime.ui.js/src/components/nodeRepository/header/NodeRepositoryHeader.vue b/org.knime.ui.js/src/components/nodeRepository/header/NodeRepositoryHeader.vue
index 8a459a305..768655c81 100644
--- a/org.knime.ui.js/src/components/nodeRepository/header/NodeRepositoryHeader.vue
+++ b/org.knime.ui.js/src/components/nodeRepository/header/NodeRepositoryHeader.vue
@@ -3,32 +3,33 @@ import { computed, ref } from "vue";
 import { storeToRefs } from "pinia";
 
 import {
-  type BreadcrumbItem,
   type MenuItem,
   SearchInput,
   SubMenu,
+  ValueSwitch,
 } from "@knime/components";
 import DisplayModeListIcon from "@knime/styles/img/icons/list.svg";
 import DisplayModeTreeIcon from "@knime/styles/img/icons/unordered-list.svg";
 import DisplayModeGridIcon from "@knime/styles/img/icons/view-cards.svg";
 
-import ActionBreadcrumb from "@/components/common/ActionBreadcrumb.vue";
 import { useApplicationStore } from "@/store/application/application";
 import { useApplicationSettingsStore } from "@/store/application/settings";
+import { useComponentSearchStore } from "@/store/componentSearch";
 import { useNodeRepositoryStore } from "@/store/nodeRepository";
 import {
   type NodeRepositoryDisplayModesType,
   useSettingsStore,
 } from "@/store/settings";
+import { getToastPresets } from "@/toastPresets";
 
 import CloseableTagList from "./CloseableTagList.vue";
 
+const { toastPresets } = getToastPresets();
 const nodeRepositoryStore = useNodeRepositoryStore();
-const {
-  searchIsActive,
-  tagsOfVisibleNodes: tags,
-  query,
-} = storeToRefs(nodeRepositoryStore);
+const { searchIsActive, tagsOfVisibleNodes: tags } =
+  storeToRefs(nodeRepositoryStore);
+
+const componentSearchStore = useComponentSearchStore();
 
 const selectedTags = computed({
   get() {
@@ -49,19 +50,35 @@ const { hasNodeCollectionActive, activeNodeCollection } = storeToRefs(
 );
 const { nodeRepositoryLoaded } = storeToRefs(useApplicationStore());
 
-const breadcrumbItems = computed<BreadcrumbItem[]>(() => {
-  // If search results are shown, it's possible to navigate back
-  return searchIsActive.value
-    ? [{ text: "Nodes", id: "clear" }, { text: "Results" }]
-    : [{ text: "Nodes" }];
+const searchContext = defineModel<"nodes" | "components">();
+const isComponentSearch = computed(() => searchContext.value === "components");
+
+const currentSearchQuery = computed(() => {
+  if (isComponentSearch.value) {
+    return componentSearchStore.query;
+  } else {
+    return nodeRepositoryStore.query;
+  }
 });
 
-const onBreadcrumbClick = (event: { id: string }) => {
-  if (event.id === "clear") {
-    nodeRepositoryStore.clearSearchParams();
+const updateSearchQuery = async (value: string) => {
+  try {
+    const updateQueryFn = isComponentSearch.value
+      ? componentSearchStore.updateQuery
+      : nodeRepositoryStore.updateQuery;
+    await updateQueryFn(value);
+  } catch (error) {
+    const handler = isComponentSearch.value
+      ? toastPresets.search.componentSearch
+      : toastPresets.search.nodeSearch;
+    handler({ error });
   }
 };
 
+const switchSearchContext = (value: "nodes" | "components") => {
+  searchContext.value = value;
+};
+
 type MenuItemWithDisplayMode = MenuItem<{
   displayMode: NodeRepositoryDisplayModesType;
 }>;
@@ -101,20 +118,36 @@ const focusSearchInput = () => {
   searchBar.value?.focus();
 };
 defineExpose({ focusSearchInput });
+
+const searchPlaceholderText = computed(() => {
+  if (isComponentSearch.value) {
+    return "Search components in the KNIME Hub";
+  }
+
+  return hasNodeCollectionActive.value
+    ? `Search in ${activeNodeCollection} nodes`
+    : "Search all nodes";
+});
 </script>
 
 <template>
   <div class="header">
     <div class="title-and-search">
-      <div class="search-header" style="margin-bottom: 8px">
-        <ActionBreadcrumb
-          :items="breadcrumbItems"
-          class="repo-breadcrumb"
-          @click="onBreadcrumbClick"
+      <div class="search-header">
+        <ValueSwitch
+          compact
+          :disabled="!nodeRepositoryLoaded"
+          :model-value="searchContext"
+          :possible-values="[
+            { id: 'nodes', text: 'Nodes' },
+            { id: 'components', text: 'Components' },
+          ]"
+          @update:model-value="switchSearchContext"
         />
 
         <div class="actions">
           <SubMenu
+            v-if="!isComponentSearch"
             :items="displayModeSubMenuItems"
             :teleport-to-body="false"
             class="display-modes-sub-menu"
@@ -134,26 +167,24 @@ defineExpose({ focusSearchInput });
           </SubMenu>
         </div>
       </div>
+
       <SearchInput
         ref="searchBar"
-        :model-value="query"
+        :model-value="currentSearchQuery"
         spellcheck="false"
         compact
         :maxlength="$characterLimits.searchFields"
         :disabled="!nodeRepositoryLoaded"
-        :placeholder="
-          hasNodeCollectionActive
-            ? `Search in ${activeNodeCollection} nodes`
-            : 'Search all nodes'
-        "
+        :placeholder="searchPlaceholderText"
         class="search-bar"
         @keydown.down.prevent="$emit('searchBarDownKey')"
         @clear="nodeRepositoryStore.clearSearchParams"
-        @update:model-value="nodeRepositoryStore.updateQuery($event)"
+        @update:model-value="updateSearchQuery"
       />
     </div>
+
     <CloseableTagList
-      v-if="searchIsActive && tags.length"
+      v-if="searchIsActive && tags.length && !isComponentSearch"
       v-model="selectedTags"
       :tags="tags"
     />
@@ -176,12 +207,11 @@ defineExpose({ focusSearchInput });
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: var(--space-8);
+      margin: var(--space-12) 0;
+      min-height: 30px;
 
       & .actions {
         display: flex;
-        margin-top: var(--space-4);
-        gap: var(--space-4);
         align-items: center;
       }
 
diff --git a/org.knime.ui.js/src/components/nodeSearch/SearchResults.vue b/org.knime.ui.js/src/components/nodeSearch/SearchResults.vue
index 3d97be172..afb088524 100644
--- a/org.knime.ui.js/src/components/nodeSearch/SearchResults.vue
+++ b/org.knime.ui.js/src/components/nodeSearch/SearchResults.vue
@@ -1,15 +1,11 @@
 <script setup lang="ts">
-import { computed, nextTick, ref, toRefs, watch } from "vue";
-
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
-import NodeList, {
-  type NavReachedEvent,
-} from "@/components/common/NodeList/NodeList.vue";
-import ScrollViewContainer from "@/components/common/ScrollViewContainer/ScrollViewContainer.vue";
-import SkeletonNodes from "@/components/common/skeleton-loader/SkeletonNodes.vue";
+import { computed, toRefs, useTemplateRef, watch } from "vue";
+
+import { type NavReachedEvent } from "@/components/common/NodeList/NodeList.vue";
 import { knimeExternalUrls } from "@/plugins/knimeExternalUrls";
 import type { NodeRepositoryDisplayModesType } from "@/store/settings";
-import { createStaggeredLoader } from "@/util/createStaggeredLoader";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
+import InfiniteNodeList from "../common/NodeList/InfiniteNodeList.vue";
 
 import SearchResultsInfo from "./SearchResultsInfo.vue";
 
@@ -24,20 +20,17 @@ type Props = {
   nodes: NodeTemplateWithExtendedPorts[] | null;
   query: string;
   selectedTags?: string[];
-  searchScrollPosition?: number;
-  selectedNode: NodeTemplateWithExtendedPorts | null;
   showDescriptionForNode?: NodeTemplateWithExtendedPorts | null;
   searchActions: SearchActions;
   numFilteredOutNodes: number;
   highlightFirst?: boolean;
-  displayMode?: NodeRepositoryDisplayModesType;
+  displayMode?: Exclude<NodeRepositoryDisplayModesType, "tree">;
   isLoadingSearchResults: boolean;
   isQuickAddNodeMenu?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   selectedTags: () => [],
-  searchScrollPosition: 0,
   highlightFirst: false,
   displayMode: "icon",
   isQuickAddNodeMenu: false,
@@ -45,16 +38,13 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-  (e: "navReachedTop", event: NavReachedEvent): void;
-  (e: "update:searchScrollPosition", position: number): void;
-  (e: "update:selectedNode", value: NodeTemplateWithExtendedPorts | null): void;
-  (e: "itemEnterKey", node: NodeTemplateWithExtendedPorts): void;
-  (e: "helpKey", node: NodeTemplateWithExtendedPorts): void;
+  navReachedTop: [event: NavReachedEvent];
+  itemEnterKey: [node: NodeTemplateWithExtendedPorts];
+  showNodeDetails: [node: NodeTemplateWithExtendedPorts];
 }>();
 
 const {
   nodes,
-  selectedNode,
   query,
   selectedTags,
   searchActions,
@@ -62,133 +52,62 @@ const {
   isLoadingSearchResults,
 } = toRefs(props);
 
-const isLoadingNextPage = ref(false);
-const isLoadingSearchResultsDeferred = ref(false);
 const { KNIME_HUB_SEARCH_URL } = knimeExternalUrls;
 
-const setIsLoadingNextPage = createStaggeredLoader({
-  firstStageCallback: () => {
-    isLoadingNextPage.value = true;
-  },
-  resetCallback: () => {
-    isLoadingNextPage.value = false;
-  },
-});
-
-const setIsLoadingSearchResultsDeferred = createStaggeredLoader({
-  firstStageCallback: () => {
-    isLoadingSearchResultsDeferred.value = true;
-  },
-  resetCallback: () => {
-    isLoadingSearchResultsDeferred.value = false;
-  },
-});
-
-watch(
-  isLoadingSearchResults,
-  (value) => {
-    setIsLoadingSearchResultsDeferred(value);
-  },
-  { immediate: true },
+const scrollPosition = defineModel<number>("scrollPosition", { default: 0 });
+const selectedNode = defineModel<NodeTemplateWithExtendedPorts | null>(
+  "selectedNode",
+  { default: null },
 );
 
-const isNodeListEmpty = computed(() => nodes.value?.length === 0);
-const selectedNodeModel = computed({
-  get() {
-    return selectedNode.value;
-  },
-  set(value) {
-    emit("update:selectedNode", value);
-  },
-});
 const searchHubLink = computed(() =>
   KNIME_HUB_SEARCH_URL.replace("%s", encodeURIComponent(query.value)),
 );
 
-const onSaveScrollPosition = (position: number) => {
-  emit("update:searchScrollPosition", position);
-};
+const infiniteList = useTemplateRef("infiniteList");
 
-const scroller = ref<InstanceType<typeof ScrollViewContainer> | null>(null);
 const onSearchChanged = async () => {
-  // wait for new content to be displayed, then scroll to top
-  await nextTick();
-  if (scroller.value) {
-    scroller.value.$el.scrollTop = 0;
-  }
-};
-
-const loadMoreSearchResults = async () => {
-  setIsLoadingNextPage(true);
-  await searchActions.value.searchNodesNextPage();
-  setIsLoadingNextPage(false);
+  await infiniteList.value?.scrollToTop();
 };
+watch(query, onSearchChanged);
+watch(selectedTags, onSearchChanged);
 
-const nodeList = ref<InstanceType<typeof NodeList> | null>(null);
 const focusFirst = () => {
-  nodeList.value?.focusFirst();
+  infiniteList.value?.focusFirst();
 };
 
-watch(query, onSearchChanged);
-watch(selectedTags, onSearchChanged);
-
 defineExpose({ focusFirst });
 </script>
 
 <template>
-  <ScrollViewContainer
-    ref="scroller"
-    class="results"
-    :initial-position="searchScrollPosition"
-    @save-position="onSaveScrollPosition"
-    @scroll-bottom="loadMoreSearchResults"
+  <InfiniteNodeList
+    ref="infiniteList"
+    v-model:selected-node="selectedNode"
+    v-model:scroll-position="scrollPosition"
+    :nodes="nodes ?? []"
+    :highlight-first="highlightFirst"
+    :display-mode="displayMode"
+    :show-details-for="showDescriptionForNode"
+    :fetch-more="searchActions.searchNodesNextPage"
+    :is-loading="isLoadingSearchResults"
+    @nav-reached-top="emit('navReachedTop', $event)"
+    @enter-key="emit('itemEnterKey', $event)"
+    @show-node-details="emit('showNodeDetails', $event)"
   >
-    <div class="content">
-      <div
-        v-if="!isNodeListEmpty && !isLoadingSearchResults"
-        class="node-list-wrapper"
-      >
-        <NodeList
-          ref="nodeList"
-          v-model:selected-node="selectedNodeModel"
-          class="node-list"
-          :nodes="nodes!"
-          :highlight-first="highlightFirst"
-          :display-mode="displayMode"
-          :show-description-for-node="showDescriptionForNode"
-          @nav-reached-top="emit('navReachedTop', $event)"
-          @enter-key="emit('itemEnterKey', $event)"
-          @help-key="emit('helpKey', $event)"
-        >
-          <template #item="slotProps">
-            <slot name="nodesTemplate" v-bind="slotProps" />
-          </template>
-        </NodeList>
-
-        <SkeletonNodes
-          v-if="isLoadingNextPage"
-          class="node-list-skeleton"
-          :number-of-nodes="5"
-          :display-mode="displayMode"
-        />
-      </div>
-
-      <SkeletonNodes
-        v-if="isLoadingSearchResultsDeferred"
-        class="node-list-skeleton"
-        :number-of-nodes="5"
-        :display-mode="displayMode"
-      />
+    <template #nodesTemplate="slotProps">
+      <slot name="nodesTemplate" v-bind="slotProps" />
+    </template>
 
+    <template #listBottom="{ isEmpty, isLoading }">
       <SearchResultsInfo
-        v-if="!isLoadingSearchResults"
+        v-if="!isLoading"
         :num-filtered-out-nodes="numFilteredOutNodes"
-        :is-node-list-empty="isNodeListEmpty"
+        :is-node-list-empty="isEmpty"
         :search-hub-link="searchHubLink"
         :mini="isQuickAddNodeMenu"
       />
-    </div>
-  </ScrollViewContainer>
+    </template>
+  </InfiniteNodeList>
 </template>
 
 <style lang="postcss" scoped>
diff --git a/org.knime.ui.js/src/components/uiExtensions/ValidationInfo.vue b/org.knime.ui.js/src/components/uiExtensions/ValidationInfo.vue
index a6dcae2f7..5f845813f 100644
--- a/org.knime.ui.js/src/components/uiExtensions/ValidationInfo.vue
+++ b/org.knime.ui.js/src/components/uiExtensions/ValidationInfo.vue
@@ -8,8 +8,8 @@ import { useApplicationStore } from "@/store/application/application";
 import { useNodeConfigurationStore } from "@/store/nodeConfiguration/nodeConfiguration";
 import { useUIControlsStore } from "@/store/uiControls/uiControls";
 import { useExecutionStore } from "@/store/workflow/execution";
+import { ports } from "@/util/dataMappers";
 import * as nodeUtils from "@/util/nodeUtil";
-import { toExtendedPortObject } from "@/util/portDataMapper";
 
 import ExecuteButton from "./ExecuteButton.vue";
 import LegacyPortViewButtons from "./LegacyPortViewButtons.vue";
@@ -40,7 +40,9 @@ const fullPortObject = computed(() => {
 
     const selectedPort = props.selectedNode.outPorts[props.selectedPortIndex];
 
-    return toExtendedPortObject(availablePortTypes.value)(selectedPort.typeId);
+    return ports.toExtendedPortObject(availablePortTypes.value)(
+      selectedPort.typeId,
+    );
   } catch (_error) {
     return null;
   }
diff --git a/org.knime.ui.js/src/components/uiExtensions/portViews/PortViewTabOutput.vue b/org.knime.ui.js/src/components/uiExtensions/portViews/PortViewTabOutput.vue
index eabc69f72..be923ea13 100644
--- a/org.knime.ui.js/src/components/uiExtensions/portViews/PortViewTabOutput.vue
+++ b/org.knime.ui.js/src/components/uiExtensions/portViews/PortViewTabOutput.vue
@@ -3,7 +3,7 @@ import { computed, watch } from "vue";
 import { API } from "@api";
 
 import type { AvailablePortTypes, KnimeNode } from "@/api/custom-types";
-import { toExtendedPortObject } from "@/util/portDataMapper";
+import { ports } from "@/util/dataMappers";
 import {
   buildMiddleware,
   validateNodeConfigurationState,
@@ -116,7 +116,7 @@ const portViews = computed(() => {
     return null;
   }
 
-  const fullPortObject = toExtendedPortObject(props.availablePortTypes)(
+  const fullPortObject = ports.toExtendedPortObject(props.availablePortTypes)(
     selectedPort.value.typeId,
   );
 
diff --git a/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/ContextMenu/ContextMenu.vue b/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/ContextMenu/ContextMenu.vue
index dcad689df..da3df0934 100644
--- a/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/ContextMenu/ContextMenu.vue
+++ b/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/ContextMenu/ContextMenu.vue
@@ -7,7 +7,7 @@ import { MenuItems } from "@knime/components";
 import { type MenuItem } from "@knime/components";
 import FlowVariableIcon from "@knime/styles/img/icons/expose-flow-variables.svg";
 
-import type { ExtendedPortType, KnimeNode } from "@/api/custom-types";
+import type { KnimeNode } from "@/api/custom-types";
 import {
   ComponentPlaceholder,
   type NodePort,
@@ -23,6 +23,7 @@ import { useUIControlsStore } from "@/store/uiControls/uiControls";
 import { useExecutionStore } from "@/store/workflow/execution";
 import { useWorkflowStore } from "@/store/workflow/workflow";
 import * as $shapes from "@/style/shapes";
+import { type ExtendedPortType, ports } from "@/util/dataMappers";
 import { getPortViewByViewDescriptors } from "@/util/getPortViewByViewDescriptors";
 import { menuGroupsBuilder } from "@/util/menuGroupsBuilder";
 import {
@@ -31,7 +32,6 @@ import {
   isNodeComponent,
   isNodeMetaNode,
 } from "@/util/nodeUtil";
-import { toExtendedPortObject } from "@/util/portDataMapper";
 import { getFloatingMenuComponent } from "../getFloatingMenuComponent";
 
 type ShortcutItem = { name: ShortcutName; isVisible: boolean };
@@ -117,7 +117,7 @@ const portViews = (): MenuItem[] => {
 
   const nodeId = node.id;
   const allOutPorts = node.outPorts.map((port: NodePort) =>
-    toExtendedPortObject(availablePortTypes.value)(port),
+    ports.toExtendedPortObject(availablePortTypes.value)(port),
   );
 
   return allOutPorts.flatMap((port, portIndex) => {
diff --git a/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeMenu.vue b/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeMenu.vue
index 8552eeea3..5c0db1141 100644
--- a/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeMenu.vue
+++ b/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeMenu.vue
@@ -4,12 +4,7 @@ import { storeToRefs } from "pinia";
 
 import { SearchInput } from "@knime/components";
 
-import type {
-  AvailablePortTypes,
-  ExtendedPortType,
-  NodeRelation,
-  NodeTemplateWithExtendedPorts,
-} from "@/api/custom-types";
+import type { AvailablePortTypes, NodeRelation } from "@/api/custom-types";
 import {
   AddNodeCommand,
   type NodePort,
@@ -25,6 +20,10 @@ import { useSettingsStore } from "@/store/settings";
 import { useNodeInteractionsStore } from "@/store/workflow/nodeInteractions";
 import { useWorkflowStore } from "@/store/workflow/workflow";
 import { checkPortCompatibility } from "@/util/compatibleConnections";
+import type {
+  ExtendedPortType,
+  NodeTemplateWithExtendedPorts,
+} from "@/util/dataMappers";
 import { portPositions } from "@/util/portShift";
 
 import QuickAddNodeDisabledWorkflowCoach from "./QuickAddNodeDisabledWorkflowCoach.vue";
diff --git a/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeRecommendations.vue b/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeRecommendations.vue
index eabd70efc..455256c65 100644
--- a/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeRecommendations.vue
+++ b/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeRecommendations.vue
@@ -2,11 +2,11 @@
 import { computed, ref } from "vue";
 import { storeToRefs } from "pinia";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import NodeList from "@/components/common/NodeList/NodeList.vue";
 import NodeTemplate from "@/components/common/NodeTemplate/NodeTemplate.vue";
 import { useQuickAddNodesStore } from "@/store/quickAddNodes";
 import type { NodeRepositoryDisplayModesType } from "@/store/settings";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 
 type Props = {
   selectedNode: NodeTemplateWithExtendedPorts | null;
diff --git a/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeSearchResults.vue b/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeSearchResults.vue
index 00c094974..2db04db87 100644
--- a/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeSearchResults.vue
+++ b/org.knime.ui.js/src/components/workflowEditor/CanvasAnchoredComponents/QuickActionMenu/quickAdd/QuickAddNodeSearchResults.vue
@@ -2,15 +2,15 @@
 import { computed, ref } from "vue";
 import { storeToRefs } from "pinia";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import NodeTemplate from "@/components/common/NodeTemplate/NodeTemplate.vue";
 import SearchResults from "@/components/nodeSearch/SearchResults.vue";
 import { useQuickAddNodesStore } from "@/store/quickAddNodes";
 import type { NodeRepositoryDisplayModesType } from "@/store/settings";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 
 type Props = {
   selectedNode: NodeTemplateWithExtendedPorts | null;
-  displayMode?: NodeRepositoryDisplayModesType;
+  displayMode?: Exclude<NodeRepositoryDisplayModesType, "tree">;
 };
 
 withDefaults(defineProps<Props>(), {
diff --git a/org.knime.ui.js/src/components/workflowEditor/SVGKanvas/connectors/useConnectionReplacement.ts b/org.knime.ui.js/src/components/workflowEditor/SVGKanvas/connectors/useConnectionReplacement.ts
index e3eb3aa1d..4e360080e 100644
--- a/org.knime.ui.js/src/components/workflowEditor/SVGKanvas/connectors/useConnectionReplacement.ts
+++ b/org.knime.ui.js/src/components/workflowEditor/SVGKanvas/connectors/useConnectionReplacement.ts
@@ -1,7 +1,6 @@
 import { type Ref, ref } from "vue";
 import { storeToRefs } from "pinia";
 
-import type { ExtendedPortType } from "@/api/custom-types";
 import type { NodeFactoryKey } from "@/api/gateway-api/generated-api";
 import { useConnectedNodeObjects } from "@/composables/useConnectedNodeObjects";
 import { KNIME_MIME } from "@/composables/useDragNodeIntoCanvas";
@@ -13,6 +12,7 @@ import { useNodeInteractionsStore } from "@/store/workflow/nodeInteractions";
 import { useWorkflowStore } from "@/store/workflow/workflow";
 import * as $shapes from "@/style/shapes";
 import { checkPortCompatibility } from "@/util/compatibleConnections";
+import type { ExtendedPortType } from "@/util/dataMappers";
 
 type UseConnectionReplacementOptions = {
   /**
diff --git a/org.knime.ui.js/src/components/workflowEditor/SVGKanvas/ports/NodePort/NodePort.vue b/org.knime.ui.js/src/components/workflowEditor/SVGKanvas/ports/NodePort/NodePort.vue
index a0020743f..f9d50cb46 100644
--- a/org.knime.ui.js/src/components/workflowEditor/SVGKanvas/ports/NodePort/NodePort.vue
+++ b/org.knime.ui.js/src/components/workflowEditor/SVGKanvas/ports/NodePort/NodePort.vue
@@ -11,7 +11,7 @@ import { useApplicationStore } from "@/store/application/application";
 import { useCanvasAnchoredComponentsStore } from "@/store/canvasAnchoredComponents/canvasAnchoredComponents";
 import { useWorkflowStore } from "@/store/workflow/workflow";
 import * as $shapes from "@/style/shapes";
-import { toExtendedPortObject } from "@/util/portDataMapper";
+import { ports } from "@/util/dataMappers";
 import NodePortActiveConnector from "../NodePortActiveConnector.vue";
 
 import NodePortActions from "./NodePortActions.vue";
@@ -45,7 +45,7 @@ const anchorPoint = inject<XY>("anchorPoint");
 const { availablePortTypes } = storeToRefs(useApplicationStore());
 
 const portTemplate = computed(() => {
-  const template = toExtendedPortObject(availablePortTypes.value)(
+  const template = ports.toExtendedPortObject(availablePortTypes.value)(
     props.port.typeId,
   );
   if (!template) {
diff --git a/org.knime.ui.js/src/components/workflowEditor/WebGLKanvas/ports/NodePort.vue b/org.knime.ui.js/src/components/workflowEditor/WebGLKanvas/ports/NodePort.vue
index 35ffd1421..99dec0b23 100644
--- a/org.knime.ui.js/src/components/workflowEditor/WebGLKanvas/ports/NodePort.vue
+++ b/org.knime.ui.js/src/components/workflowEditor/WebGLKanvas/ports/NodePort.vue
@@ -12,7 +12,7 @@ import { useCanvasAnchoredComponentsStore } from "@/store/canvasAnchoredComponen
 import { useFloatingConnectorStore } from "@/store/floatingConnector/floatingConnector";
 import { portSize } from "@/style/shapes";
 import * as $shapes from "@/style/shapes";
-import { toExtendedPortObject } from "@/util/portDataMapper";
+import { ports } from "@/util/dataMappers";
 import { type ContainerInst, type GraphicsInst } from "@/vue3-pixi";
 import type { TooltipDefinition } from "../../types";
 import { useAnimatePixiContainer } from "../common/useAnimatePixiContainer";
@@ -56,7 +56,7 @@ const hitArea = new Rectangle(
 );
 
 const portTemplate = computed(() => {
-  const template = toExtendedPortObject(availablePortTypes.value)(
+  const template = ports.toExtendedPortObject(availablePortTypes.value)(
     props.port.typeId,
   );
   if (!template) {
diff --git a/org.knime.ui.js/src/components/workflowMetadata/ComponentMetadata.vue b/org.knime.ui.js/src/components/workflowMetadata/ComponentMetadata.vue
index d0c3a53b1..b8566dc34 100644
--- a/org.knime.ui.js/src/components/workflowMetadata/ComponentMetadata.vue
+++ b/org.knime.ui.js/src/components/workflowMetadata/ComponentMetadata.vue
@@ -15,7 +15,7 @@ import {
 import ExternalResourcesList from "@/components/common/ExternalResourcesList.vue";
 import ComponentIconEditor from "@/components/workflowMetadata/ComponentIconEditor.vue";
 import ComponentTypeEditor from "@/components/workflowMetadata/ComponentTypeEditor.vue";
-import { toExtendedPortObject } from "@/util/portDataMapper";
+import { ports } from "@/util/dataMappers";
 import { recreateLinebreaks } from "@/util/recreateLineBreaks";
 import SidebarPanelLayout from "../common/side-panel/SidebarPanelLayout.vue";
 import SidebarPanelScrollContainer from "../common/side-panel/SidebarPanelScrollContainer.vue";
@@ -53,8 +53,10 @@ const nodeFeatures = computed(() => {
   } = componentMetadata.value;
 
   return {
-    inPorts: inPorts.map(toExtendedPortObject(props.availablePortTypes)),
-    outPorts: outPorts.map(toExtendedPortObject(props.availablePortTypes)),
+    inPorts: inPorts.map(ports.toExtendedPortObject(props.availablePortTypes)),
+    outPorts: outPorts.map(
+      ports.toExtendedPortObject(props.availablePortTypes),
+    ),
     views,
     options,
   };
@@ -143,8 +145,10 @@ const nodePreview = computed(() => {
   const icon = getMetadataFieldValue("icon") || null;
 
   return {
-    inPorts: inPorts.map(toExtendedPortObject(props.availablePortTypes)),
-    outPorts: outPorts.map(toExtendedPortObject(props.availablePortTypes)),
+    inPorts: inPorts.map(ports.toExtendedPortObject(props.availablePortTypes)),
+    outPorts: outPorts.map(
+      ports.toExtendedPortObject(props.availablePortTypes),
+    ),
     icon,
     type,
     isComponent: true,
diff --git a/org.knime.ui.js/src/components/workflowMonitor/WorkflowMonitorMessage.vue b/org.knime.ui.js/src/components/workflowMonitor/WorkflowMonitorMessage.vue
index 2000f9dc9..186f779ca 100644
--- a/org.knime.ui.js/src/components/workflowMonitor/WorkflowMonitorMessage.vue
+++ b/org.knime.ui.js/src/components/workflowMonitor/WorkflowMonitorMessage.vue
@@ -5,12 +5,12 @@ import { FunctionButton, NodePreview } from "@knime/components";
 import ArrowNextIcon from "@knime/styles/img/icons/arrow-next.svg";
 import ArrowRightIcon from "@knime/styles/img/icons/arrow-right.svg";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import type {
   ComponentNodeAndDescription,
   WorkflowMonitorMessage,
 } from "@/api/gateway-api/generated-api";
 import SkeletonItem from "@/components/common/skeleton-loader/SkeletonItem.vue";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
 
 type Props = {
   message?: WorkflowMonitorMessage | null;
diff --git a/org.knime.ui.js/src/composables/useAddNodeToWorkflow.ts b/org.knime.ui.js/src/composables/useAddNodeToWorkflow.ts
index 9c4d81a90..3cec20145 100644
--- a/org.knime.ui.js/src/composables/useAddNodeToWorkflow.ts
+++ b/org.knime.ui.js/src/composables/useAddNodeToWorkflow.ts
@@ -1,25 +1,53 @@
+/* eslint-disable no-undefined */
 import { storeToRefs } from "pinia";
 
 import {
   AddNodeCommand,
   type NodeFactoryKey,
+  type XY,
 } from "@/api/gateway-api/generated-api";
 import { useCurrentCanvasStore } from "@/store/canvas/useCurrentCanvasStore";
 import { useSelectionStore } from "@/store/selection";
 import { useNodeInteractionsStore } from "@/store/workflow/nodeInteractions";
 import { useWorkflowStore } from "@/store/workflow/workflow";
+import { getToastPresets } from "@/toastPresets";
 import { geometry } from "@/util/geometry";
 
-/**
- * Add a node to the workflow by a node template factory.
- * It will automatically position the node in the canvas according to available
- * space and inside the visible frame as well as connecting the newly added node
- * to a selected node (if any)
- */
 export const useAddNodeToWorkflow = () => {
   const { isWritable, activeWorkflow } = storeToRefs(useWorkflowStore());
+  const { toastPresets } = getToastPresets();
 
-  return ({ nodeFactory }: { nodeFactory?: NodeFactoryKey }) => {
+  const nodeInteractionsStore = useNodeInteractionsStore();
+
+  const handleError = (error: unknown) => {
+    consola.error({
+      message: "Error adding node to canvas with auto-placement",
+      error,
+    });
+    toastPresets.workflow.addNodeToCanvas({ error });
+  };
+
+  const addNodeByPosition = async (
+    position: XY,
+    nodeFactory: NodeFactoryKey,
+    autoConnectOptions?: {
+      sourceNodeId: string;
+      nodeRelation: AddNodeCommand.NodeRelationEnum;
+    },
+  ) => {
+    try {
+      await nodeInteractionsStore.addNode({
+        position,
+        nodeFactory,
+        sourceNodeId: autoConnectOptions?.sourceNodeId,
+        nodeRelation: autoConnectOptions?.nodeRelation,
+      });
+    } catch (error) {
+      handleError(error);
+    }
+  };
+
+  const addNodeWithAutoPositioning = async (nodeFactory: NodeFactoryKey) => {
     // do not try to add a node to a read only workflow
     if (!isWritable.value) {
       return;
@@ -38,18 +66,19 @@ export const useAddNodeToWorkflow = () => {
           visibleFrame: canvasStore.value.getVisibleFrame,
           nodes: activeWorkflow.value!.nodes,
         });
-    // eslint-disable-next-line no-undefined
-    const sourceNodeId = singleSelectedNode.value?.id ?? undefined;
-    const nodeRelation = singleSelectedNode.value
-      ? AddNodeCommand.NodeRelationEnum.SUCCESSORS
-      : // eslint-disable-next-line no-undefined
-        undefined;
-
-    useNodeInteractionsStore().addNode({
-      position,
-      nodeFactory,
-      sourceNodeId,
-      nodeRelation,
-    });
+
+    const autoConnectOptions = singleSelectedNode.value
+      ? {
+          sourceNodeId: singleSelectedNode.value.id,
+          nodeRelation: AddNodeCommand.NodeRelationEnum.SUCCESSORS,
+        }
+      : undefined;
+
+    await addNodeByPosition(position, nodeFactory, autoConnectOptions);
+  };
+
+  return {
+    addNodeByPosition,
+    addNodeWithAutoPositioning,
   };
 };
diff --git a/org.knime.ui.js/src/composables/useDragNodeIntoCanvas.ts b/org.knime.ui.js/src/composables/useDragNodeIntoCanvas.ts
index 79542febc..4e76f5aea 100644
--- a/org.knime.ui.js/src/composables/useDragNodeIntoCanvas.ts
+++ b/org.knime.ui.js/src/composables/useDragNodeIntoCanvas.ts
@@ -1,6 +1,5 @@
 import { storeToRefs } from "pinia";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import type { NodeFactoryKey, XY } from "@/api/gateway-api/generated-api";
 import { useNodeReplacementOrInsertion } from "@/components/workflowEditor/WebGLKanvas/common/useNodeReplacementOrInsertion";
 import { useDragNearEdgePanning } from "@/components/workflowEditor/WebGLKanvas/kanvas/useDragNearEdgePanning";
@@ -11,7 +10,9 @@ import { useNodeTemplatesStore } from "@/store/nodeTemplates/nodeTemplates";
 import { useNodeInteractionsStore } from "@/store/workflow/nodeInteractions";
 import { useWorkflowStore } from "@/store/workflow/workflow";
 import * as $shapes from "@/style/shapes";
-import { getToastPresets } from "@/toastPresets";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
+
+import { useAddNodeToWorkflow } from "./useAddNodeToWorkflow";
 
 export const KNIME_MIME = "application/vnd.knime.ap.noderepo+json";
 
@@ -26,8 +27,8 @@ const getNodeFactoryFromEvent = (event: DragEvent) => {
 };
 
 // One key characteristic of this composable, which can be confusing at first glance,
-// is that the dragStart and onDrag handlers to not happen at the same location in the code.
-// This is because the drag start handler, which mainly manipulates that event will likely
+// is that the dragStart and onDrag handlers are not bound/called at the same location in the code.
+// This is because the drag start handler, which mainly manipulates that event, will likely
 // be bound at a separate location than the onDrag. This means that the variables declared
 // inside this composable are not stable across usages, unless declared outside of it
 
@@ -35,10 +36,10 @@ let dragStartTime: number | null;
 
 const DRAG_TO_EDGE_BUFFER_MS = 300;
 
-export const useDragNodeIntoCanvas = () => {
-  const isKnimeNode = (event: DragEvent) =>
-    event.dataTransfer?.types.includes(KNIME_MIME);
+const isKnimeNode = (event: DragEvent) =>
+  event.dataTransfer?.types.includes(KNIME_MIME);
 
+export const useDragNodeIntoCanvas = () => {
   const { isWritable } = storeToRefs(useWorkflowStore());
 
   const canvasStore = useCurrentCanvasStore();
@@ -46,7 +47,7 @@ export const useDragNodeIntoCanvas = () => {
   const nodeInteractionsStore = useNodeInteractionsStore();
   const webglCanvasStore = useWebGLCanvasStore();
   const { isWebGLRenderer } = useCanvasRendererUtils();
-  const { toastPresets } = getToastPresets();
+  const { addNodeByPosition } = useAddNodeToWorkflow();
   const nodeReplacementOrInsertion = useNodeReplacementOrInsertion();
 
   const { startPanningToEdge, stopPanningToEdge } = useDragNearEdgePanning();
@@ -135,15 +136,6 @@ export const useDragNodeIntoCanvas = () => {
     }
   };
 
-  const addNodeToCanvas = async (position: XY, nodeFactory: NodeFactoryKey) => {
-    try {
-      await nodeInteractionsStore.addNode({ position, nodeFactory });
-    } catch (error) {
-      consola.error({ message: "Error adding node to workflow", error });
-      toastPresets.workflow.addNodeToCanvas({ error });
-    }
-  };
-
   const onDrop = async (event: DragEvent) => {
     dragStartTime = null;
     stopPanningToEdge();
@@ -177,7 +169,7 @@ export const useDragNodeIntoCanvas = () => {
         nodeFactory,
       });
     } else {
-      await addNodeToCanvas(dropPosition, nodeFactory);
+      await addNodeByPosition(dropPosition, nodeFactory);
     }
   };
 
diff --git a/org.knime.ui.js/src/store/common/useNodeSearch.ts b/org.knime.ui.js/src/store/common/useNodeSearch.ts
index 9ca0947d2..189a3f598 100644
--- a/org.knime.ui.js/src/store/common/useNodeSearch.ts
+++ b/org.knime.ui.js/src/store/common/useNodeSearch.ts
@@ -2,14 +2,12 @@ import { computed, ref } from "vue";
 import { API } from "@api";
 import { debounce } from "lodash-es";
 
-import type {
-  NodeRelation,
-  NodeTemplateWithExtendedPorts,
-} from "@/api/custom-types";
+import type { NodeRelation } from "@/api/custom-types";
 import { createAbortablePromise } from "@/api/utils";
 import { useApplicationStore } from "@/store/application/application";
 import { useNodeTemplatesStore } from "@/store/nodeTemplates/nodeTemplates";
-import { toNodeTemplateWithExtendedPorts } from "@/util/portDataMapper";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
+import { nodeTemplate } from "@/util/dataMappers";
 
 /**
  * This composable is meant to be shared and used by other stores
@@ -188,7 +186,7 @@ export const useNodeSearch = () => {
       } = searchResponse;
 
       const withMappedPorts = fetchedNodes.map(
-        toNodeTemplateWithExtendedPorts(
+        nodeTemplate.toNodeTemplateWithExtendedPorts(
           useApplicationStore().availablePortTypes,
         ),
       );
diff --git a/org.knime.ui.js/src/store/componentSearch/index.ts b/org.knime.ui.js/src/store/componentSearch/index.ts
new file mode 100644
index 000000000..0deb74814
--- /dev/null
+++ b/org.knime.ui.js/src/store/componentSearch/index.ts
@@ -0,0 +1,93 @@
+import { readonly, ref } from "vue";
+import { useDebounceFn } from "@vueuse/core";
+import { API } from "@api";
+import { defineStore } from "pinia";
+
+import { promise } from "@knime/utils";
+
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
+import { componentSearch } from "@/util/dataMappers";
+
+const PAGE_SIZE = 50;
+const SEARCH_DEBOUNCE_MS = 300;
+
+export const useComponentSearchStore = defineStore("componentSearch", () => {
+  const isLoading = ref(false);
+  const hasLoaded = ref(false);
+  const query = ref("");
+  const currentOffset = ref(0);
+  const searchScrollPosition = ref(0);
+
+  const results = ref<NodeTemplateWithExtendedPorts[]>([]);
+
+  let abortController: AbortController;
+
+  const searchComponents = async (
+    params: { append?: boolean } = {},
+  ): Promise<void> => {
+    const { append = false } = params;
+
+    isLoading.value = true;
+
+    const { abortController: newAbortController, runAbortablePromise } =
+      promise.createAbortablePromise();
+
+    if (abortController) {
+      abortController.abort();
+    }
+
+    abortController = newAbortController;
+
+    try {
+      consola.info("componentSearch:: Fetching results", {
+        query: query.value,
+        offset: currentOffset.value,
+        limit: PAGE_SIZE,
+      });
+
+      const response = await runAbortablePromise(async () => {
+        const apiResponse = await API.space.searchComponents({
+          query: query.value,
+          offset: currentOffset.value * PAGE_SIZE,
+          limit: PAGE_SIZE,
+        });
+
+        return apiResponse.map(componentSearch.toNodeTemplateWithExtendedPorts);
+      });
+
+      results.value = append ? results.value.concat(response) : response;
+
+      hasLoaded.value = true;
+      currentOffset.value++;
+    } catch (error) {
+      if (error instanceof promise.AbortError) {
+        return;
+      }
+
+      throw error;
+    } finally {
+      isLoading.value = false;
+    }
+  };
+
+  const debouncedSearch = useDebounceFn(searchComponents, SEARCH_DEBOUNCE_MS);
+
+  const updateQuery = async (value: string) => {
+    query.value = value;
+    currentOffset.value = 0;
+    results.value = [];
+    hasLoaded.value = false;
+    isLoading.value = true;
+    await debouncedSearch();
+  };
+
+  return {
+    searchScrollPosition,
+    query: readonly(query),
+    isLoading: readonly(isLoading),
+    hasLoaded: readonly(hasLoaded),
+    results,
+    searchComponents,
+    updateQuery,
+  };
+});
diff --git a/org.knime.ui.js/src/store/nodeDescription/nodeDescription.ts b/org.knime.ui.js/src/store/nodeDescription/nodeDescription.ts
index 8fdfda18f..0bddb502f 100644
--- a/org.knime.ui.js/src/store/nodeDescription/nodeDescription.ts
+++ b/org.knime.ui.js/src/store/nodeDescription/nodeDescription.ts
@@ -10,9 +10,9 @@ import { useWorkflowStore } from "@/store/workflow/workflow";
 import {
   type ComponentNodeDescriptionWithExtendedPorts,
   type NativeNodeDescriptionWithExtendedPorts,
-  toComponentNodeDescriptionWithExtendedPorts,
-  toNativeNodeDescriptionWithExtendedPorts,
-} from "@/util/portDataMapper";
+  componentDescription,
+  nodeDescription,
+} from "@/util/dataMappers";
 
 /**
  * Store that manages state for node and component descriptions.
@@ -47,12 +47,12 @@ export const useNodeDescriptionStore = defineStore("nodeDescription", {
       };
 
       try {
-        const nodeDescription = await API.node.getNodeDescription(params);
+        const nativeNodeDescription = await API.node.getNodeDescription(params);
 
         const nodeDescriptionWithExtendedPorts =
-          toNativeNodeDescriptionWithExtendedPorts(
+          nodeDescription.toNativeNodeDescriptionWithExtendedPorts(
             useApplicationStore().availablePortTypes,
-          )(nodeDescription);
+          )(nativeNodeDescription);
 
         this.cache.set(factoryId, nodeDescriptionWithExtendedPorts);
 
@@ -83,14 +83,13 @@ export const useNodeDescriptionStore = defineStore("nodeDescription", {
       };
 
       try {
-        const componentDescription =
-          (await API.component.getComponentDescription(
-            params,
-          )) as ComponentNodeDescription; // TODO: NXT-2023 - remove type cast
+        const rawDescription = (await API.component.getComponentDescription(
+          params,
+        )) as ComponentNodeDescription; // TODO: NXT-2023 - remove type cast
 
-        return toComponentNodeDescriptionWithExtendedPorts(
+        return componentDescription.toComponentNodeDescriptionWithExtendedPorts(
           useApplicationStore().availablePortTypes,
-        )(componentDescription);
+        )(rawDescription);
       } catch (error) {
         consola.error(
           "action::getComponentDescription -> Error calling API.node.getComponentDescription",
diff --git a/org.knime.ui.js/src/store/nodeRepository.ts b/org.knime.ui.js/src/store/nodeRepository.ts
index 1c34bc739..d3126adb9 100644
--- a/org.knime.ui.js/src/store/nodeRepository.ts
+++ b/org.knime.ui.js/src/store/nodeRepository.ts
@@ -2,12 +2,10 @@ import { reactive, ref } from "vue";
 import { API } from "@api";
 import { defineStore } from "pinia";
 
-import type {
-  NodeCategoryWithExtendedPorts,
-  NodeTemplateWithExtendedPorts,
-} from "@/api/custom-types";
+import type { NodeCategoryWithExtendedPorts } from "@/components/nodeRepository/NodeRepositoryTree/types";
 import { useNodeSearch } from "@/store/common/useNodeSearch";
-import { toNodeTemplateWithExtendedPorts } from "@/util/portDataMapper";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
+import { nodeTemplate } from "@/util/dataMappers";
 
 import { useApplicationStore } from "./application/application";
 import { useNodeTemplatesStore } from "./nodeTemplates/nodeTemplates";
@@ -139,7 +137,9 @@ export const useNodeRepositoryStore = defineStore("nodeRepository", () => {
     });
 
     const nodesWithMappedPorts = (nodeCategoryResult.nodes ?? []).map(
-      toNodeTemplateWithExtendedPorts(useApplicationStore().availablePortTypes),
+      nodeTemplate.toNodeTemplateWithExtendedPorts(
+        useApplicationStore().availablePortTypes,
+      ),
     );
 
     useNodeTemplatesStore().updateCacheFromSearchResults({
@@ -182,7 +182,7 @@ export const useNodeRepositoryStore = defineStore("nodeRepository", () => {
 
     const withMappedPorts = groups.map(({ nodes, tag }) => ({
       nodes: nodes.map(
-        toNodeTemplateWithExtendedPorts(
+        nodeTemplate.toNodeTemplateWithExtendedPorts(
           useApplicationStore().availablePortTypes,
         ),
       ),
diff --git a/org.knime.ui.js/src/store/nodeTemplates/nodeTemplates.ts b/org.knime.ui.js/src/store/nodeTemplates/nodeTemplates.ts
index 930d8df50..9ae961e3f 100644
--- a/org.knime.ui.js/src/store/nodeTemplates/nodeTemplates.ts
+++ b/org.knime.ui.js/src/store/nodeTemplates/nodeTemplates.ts
@@ -1,13 +1,11 @@
 import { API } from "@api";
 import { defineStore } from "pinia";
 
-import type {
-  AvailablePortTypes,
-  NodeTemplateWithExtendedPorts,
-} from "@/api/custom-types";
+import type { AvailablePortTypes } from "@/api/custom-types";
 import type { NodeTemplate } from "@/api/gateway-api/generated-api";
 import { useApplicationStore } from "@/store/application/application";
-import { toNodeTemplateWithExtendedPorts } from "@/util/portDataMapper";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
+import { nodeTemplate } from "@/util/dataMappers";
 
 type NodeTemplateDictionary = Record<string, NodeTemplateWithExtendedPorts>;
 
@@ -34,7 +32,7 @@ const toNodeTemplateDictionary = (
   return arrayToDictionary(
     Object.values(nodeTemplates)
       // add expanded port information
-      .map(toNodeTemplateWithExtendedPorts(availablePortTypes)),
+      .map(nodeTemplate.toNodeTemplateWithExtendedPorts(availablePortTypes)),
     "id",
   );
 };
diff --git a/org.knime.ui.js/src/store/quickAddNodes.ts b/org.knime.ui.js/src/store/quickAddNodes.ts
index d0312103d..e0c10204c 100644
--- a/org.knime.ui.js/src/store/quickAddNodes.ts
+++ b/org.knime.ui.js/src/store/quickAddNodes.ts
@@ -2,14 +2,12 @@ import { computed, ref } from "vue";
 import { API } from "@api";
 import { defineStore } from "pinia";
 
-import type {
-  NodeRelation,
-  NodeTemplateWithExtendedPorts,
-} from "@/api/custom-types";
+import type { NodeRelation } from "@/api/custom-types";
 import { useApplicationStore } from "@/store/application/application";
 import { useNodeSearch } from "@/store/common/useNodeSearch";
 import { useWorkflowStore } from "@/store/workflow/workflow";
-import { toNodeTemplateWithExtendedPorts } from "../util/portDataMapper";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
+import { nodeTemplate } from "@/util/dataMappers";
 
 /**
  * Store that manages quick add nodes menu states.
@@ -62,7 +60,7 @@ export const useQuickAddNodesStore = defineStore("quick", () => {
 
     setRecommendedNodes(
       recommendedNodesResult.map(
-        toNodeTemplateWithExtendedPorts(
+        nodeTemplate.toNodeTemplateWithExtendedPorts(
           useApplicationStore().availablePortTypes,
         ),
       ),
diff --git a/org.knime.ui.js/src/test/factories/componentSearch.ts b/org.knime.ui.js/src/test/factories/componentSearch.ts
new file mode 100644
index 000000000..fc0e8c863
--- /dev/null
+++ b/org.knime.ui.js/src/test/factories/componentSearch.ts
@@ -0,0 +1,30 @@
+import { merge } from "lodash-es";
+
+import { ComponentSearchItem } from "@/api/gateway-api/generated-api";
+import type { DeepPartial } from "../utils";
+
+import { PORT_TYPE_IDS } from "./common";
+
+export const createComponentSearchItem = (
+  data: DeepPartial<ComponentSearchItem>,
+) => {
+  return merge(
+    {
+      id: "foo",
+      type: ComponentSearchItem.TypeEnum.Manipulator,
+      description: "This is the component description",
+      name: "Awesome component",
+      inPorts: [
+        {
+          name: PORT_TYPE_IDS.BufferedDataTable,
+          color: "#000",
+          description: "This is the first port",
+          optional: false,
+          portTypeName: "table",
+        },
+      ],
+      outPorts: [],
+    } satisfies ComponentSearchItem,
+    data,
+  );
+};
diff --git a/org.knime.ui.js/src/test/factories/nodeRepository.ts b/org.knime.ui.js/src/test/factories/nodeRepository.ts
index 78a4dd764..f9707a23e 100644
--- a/org.knime.ui.js/src/test/factories/nodeRepository.ts
+++ b/org.knime.ui.js/src/test/factories/nodeRepository.ts
@@ -1,13 +1,13 @@
 import { merge } from "lodash-es";
 
-import type { NodeTemplateWithExtendedPorts } from "@/api/custom-types";
 import {
   NativeNodeInvariants,
   type NodePortTemplate,
   type NodeTemplate,
   PortType,
 } from "@/api/gateway-api/generated-api";
-import { toNodeTemplateWithExtendedPorts } from "@/util/portDataMapper";
+import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
+import { nodeTemplate } from "@/util/dataMappers";
 
 import { PORT_TYPE_IDS, type PortTypeId } from "./common";
 import { createAvailablePortTypes } from "./ports";
@@ -59,5 +59,7 @@ export const createNodeTemplateWithExtendedPorts = (
 
   const template = createNodeTemplate(data);
 
-  return toNodeTemplateWithExtendedPorts(availablePortTypes)(template);
+  return nodeTemplate.toNodeTemplateWithExtendedPorts(availablePortTypes)(
+    template,
+  );
 };
diff --git a/org.knime.ui.js/src/toastPresets/index.ts b/org.knime.ui.js/src/toastPresets/index.ts
index 0d5008731..1359c7d66 100644
--- a/org.knime.ui.js/src/toastPresets/index.ts
+++ b/org.knime.ui.js/src/toastPresets/index.ts
@@ -14,6 +14,10 @@ import {
   type ConnectivityPresets,
   getPresets as getConnectivityPresets,
 } from "./connectivity";
+import {
+  type SearchToastPresets,
+  getPresets as getSearchPresets,
+} from "./search";
 import {
   type SpacesToastPresets,
   getPresets as getSpacesPresets,
@@ -30,6 +34,7 @@ import {
 type ToastPresetRegistry = {
   app: ApplicationToastPresets;
   connectivity: ConnectivityPresets;
+  search: SearchToastPresets;
   spaces: SpacesToastPresets;
   versions: VersionsToastPresets;
   workflow: WorkflowToastPresets;
@@ -42,6 +47,7 @@ const initToastPresets = ($toastService: ToastServiceProvider) => {
   registry = Object.freeze({
     app: getApplicationPresets($toastService),
     connectivity: getConnectivityPresets($toastService),
+    search: getSearchPresets($toastService),
     spaces: getSpacesPresets($toastService),
     versions: getVersionsPresets($toastService),
     workflow: getWorkflowPresets($toastService),
diff --git a/org.knime.ui.js/src/toastPresets/search.ts b/org.knime.ui.js/src/toastPresets/search.ts
new file mode 100644
index 000000000..7b2d31dbb
--- /dev/null
+++ b/org.knime.ui.js/src/toastPresets/search.ts
@@ -0,0 +1,26 @@
+import type { ToastServiceProvider } from "@knime/components";
+
+import { defaultAPIErrorHandler } from "./defaultAPIErrorHandler";
+import { type ToastPresetErrorHandler } from "./types";
+
+export type SearchToastPresets = {
+  nodeSearch: ToastPresetErrorHandler;
+  componentSearch: ToastPresetErrorHandler;
+};
+
+export const getPresets = (
+  $toast: ToastServiceProvider,
+): SearchToastPresets => {
+  return {
+    nodeSearch: ({ error }) =>
+      defaultAPIErrorHandler($toast, error, {
+        type: "error",
+        headline: "Failed to search for nodes",
+      }),
+    componentSearch: ({ error }) =>
+      defaultAPIErrorHandler($toast, error, {
+        type: "error",
+        headline: "Failed to search for components",
+      }),
+  };
+};
diff --git a/org.knime.ui.js/src/util/compatibleConnections.ts b/org.knime.ui.js/src/util/compatibleConnections.ts
index 523db5095..27369a8a9 100644
--- a/org.knime.ui.js/src/util/compatibleConnections.ts
+++ b/org.knime.ui.js/src/util/compatibleConnections.ts
@@ -4,7 +4,7 @@ import type {
   Workflow,
 } from "@/api/custom-types";
 import type { Connection, NodePort } from "@/api/gateway-api/generated-api";
-import { toExtendedPortObject } from "@/util/portDataMapper";
+import { ports } from "@/util/dataMappers";
 
 export type Direction = "in" | "out";
 
@@ -102,8 +102,10 @@ export const checkPortCompatibility = ({
   toPort: { typeId: string };
   availablePortTypes: AvailablePortTypes;
 }) => {
-  const fromPortObjectInfo = toExtendedPortObject(availablePortTypes)(fromPort);
-  const toPortObjectInfo = toExtendedPortObject(availablePortTypes)(toPort);
+  const fromPortObjectInfo =
+    ports.toExtendedPortObject(availablePortTypes)(fromPort);
+  const toPortObjectInfo =
+    ports.toExtendedPortObject(availablePortTypes)(toPort);
   const { compatibleTypes } = toPortObjectInfo;
   const { kind: fromPortKind } = fromPortObjectInfo;
   const { kind: toPortKind } = toPortObjectInfo;
diff --git a/org.knime.ui.js/src/util/dataMappers/__tests__/componentDescription.test.ts b/org.knime.ui.js/src/util/dataMappers/__tests__/componentDescription.test.ts
new file mode 100644
index 000000000..ae7d5e9ba
--- /dev/null
+++ b/org.knime.ui.js/src/util/dataMappers/__tests__/componentDescription.test.ts
@@ -0,0 +1,143 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  createAvailablePortTypes,
+  createComponentNodeDescription,
+} from "@/test/factories";
+import { componentDescription } from "../componentDescription";
+
+describe("componentDescription data mapper", () => {
+  it("adds port information to the component description", () => {
+    const availablePortTypes = createAvailablePortTypes();
+    const data = createComponentNodeDescription();
+    const result =
+      componentDescription.toComponentNodeDescriptionWithExtendedPorts(
+        availablePortTypes,
+      )(data);
+    expect(result).toStrictEqual({
+      description: {
+        contentType: "text/html",
+        value: "<p>Awesome description</p>",
+      },
+      inPorts: [
+        {
+          color: "#FF4B4B",
+          description: "No description available",
+          kind: "flowVariable",
+          name: "Port 1",
+          optional: false,
+          type: "flowVariable",
+          typeId:
+            "org.knime.core.node.port.flowvariable.FlowVariablePortObject",
+          typeName: "Flow Variable",
+          views: {
+            descriptorMapping: {
+              configured: [0, 2],
+              executed: [1, 2],
+            },
+            descriptors: [
+              {
+                isSpecView: true,
+                label: "Flow variables",
+              },
+              {
+                label: "Flow variables",
+              },
+              {
+                label: "Statistics",
+              },
+            ],
+          },
+        },
+        {
+          color: "#9B9B9B",
+          description: "No description available",
+          kind: "generic",
+          name: "Port 2",
+          optional: false,
+          type: "generic",
+          typeId: "org.knime.core.node.port.PortObject",
+          typeName: "Generic Port",
+          views: {
+            descriptorMapping: {
+              configured: [0, 2],
+              executed: [1, 2],
+            },
+            descriptors: [
+              {
+                isSpecView: true,
+                label: "Table",
+              },
+              {
+                label: "Table",
+              },
+              {
+                label: "Statistics",
+              },
+            ],
+          },
+        },
+      ],
+      metadataType: "component",
+      name: "Component",
+      outPorts: [
+        {
+          color: "#000000",
+          description: "No description available",
+          kind: "table",
+          name: "Port 1",
+          optional: false,
+          type: "table",
+          typeId: "org.knime.core.node.BufferedDataTable",
+          typeName: "Table",
+          views: {
+            descriptorMapping: {
+              configured: [0, 2],
+              executed: [1, 2],
+            },
+            descriptors: [
+              {
+                isSpecView: true,
+                label: "Table",
+              },
+              {
+                label: "Table",
+              },
+              {
+                label: "Statistics",
+              },
+            ],
+          },
+        },
+        {
+          color: "#000000",
+          description: "No description available",
+          kind: "table",
+          name: "Port 2",
+          optional: false,
+          type: "table",
+          typeId: "org.knime.core.node.BufferedDataTable",
+          typeName: "Table",
+          views: {
+            descriptorMapping: {
+              configured: [0, 2],
+              executed: [1, 2],
+            },
+            descriptors: [
+              {
+                isSpecView: true,
+                label: "Table",
+              },
+              {
+                label: "Table",
+              },
+              {
+                label: "Statistics",
+              },
+            ],
+          },
+        },
+      ],
+    });
+  });
+});
diff --git a/org.knime.ui.js/src/util/dataMappers/__tests__/nodeDescription.test.ts b/org.knime.ui.js/src/util/dataMappers/__tests__/nodeDescription.test.ts
new file mode 100644
index 000000000..c8f6701d0
--- /dev/null
+++ b/org.knime.ui.js/src/util/dataMappers/__tests__/nodeDescription.test.ts
@@ -0,0 +1,144 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  createAvailablePortTypes,
+  createNativeNodeDescription,
+} from "@/test/factories";
+import { nodeDescription } from "../nodeDescription";
+
+describe("nodeDescription data mapper", () => {
+  it("adds port information to the NativeNode description", () => {
+    const availablePortTypes = createAvailablePortTypes();
+    const data = createNativeNodeDescription();
+    const result =
+      nodeDescription.toNativeNodeDescriptionWithExtendedPorts(
+        availablePortTypes,
+      )(data);
+
+    expect(result).toStrictEqual({
+      description: "This is a node.",
+      dynInPorts: [
+        {
+          groupDescription: "No description available",
+          groupName: "inGroupName",
+          types: [
+            {
+              color: "#000000",
+              description: "No description available",
+              kind: "table",
+              name: "Table",
+              type: "table",
+              typeId: "org.knime.core.node.BufferedDataTable",
+              typeName: "Table",
+              views: {
+                descriptorMapping: {
+                  configured: [0, 2],
+                  executed: [1, 2],
+                },
+                descriptors: [
+                  {
+                    isSpecView: true,
+                    label: "Table",
+                  },
+                  {
+                    label: "Table",
+                  },
+                  {
+                    label: "Statistics",
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      ],
+      dynOutPorts: [
+        {
+          groupDescription: "This is the description",
+          groupName: "outGroupName",
+          types: [
+            {
+              color: "#000000",
+              description: "No description available",
+              kind: "table",
+              name: "Table",
+              type: "table",
+              typeId: "org.knime.core.node.BufferedDataTable",
+              typeName: "Table",
+              views: {
+                descriptorMapping: {
+                  configured: [0, 2],
+                  executed: [1, 2],
+                },
+                descriptors: [
+                  {
+                    isSpecView: true,
+                    label: "Table",
+                  },
+                  {
+                    label: "Table",
+                  },
+                  {
+                    label: "Statistics",
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      ],
+      dynamicInPortGroupDescriptions: [
+        {
+          identifier: "inGroupName",
+          name: "table",
+          supportedPortTypes: [
+            {
+              typeId: "org.knime.core.node.BufferedDataTable",
+            },
+          ],
+        },
+      ],
+      dynamicOutPortGroupDescriptions: [
+        {
+          description: "This is the description",
+          identifier: "outGroupName",
+          name: "table",
+          supportedPortTypes: [
+            {
+              typeId: "org.knime.core.node.BufferedDataTable",
+            },
+          ],
+        },
+      ],
+      inPorts: [
+        {
+          color: "#000000",
+          description: "No description available",
+          kind: "table",
+          name: "Table",
+          type: "table",
+          typeId: "org.knime.core.node.BufferedDataTable",
+          views: {
+            descriptorMapping: {
+              configured: [0, 2],
+              executed: [1, 2],
+            },
+            descriptors: [
+              {
+                isSpecView: true,
+                label: "Table",
+              },
+              {
+                label: "Table",
+              },
+              {
+                label: "Statistics",
+              },
+            ],
+          },
+        },
+      ],
+      outPorts: [],
+    });
+  });
+});
diff --git a/org.knime.ui.js/src/util/dataMappers/__tests__/nodeTemplate.test.ts b/org.knime.ui.js/src/util/dataMappers/__tests__/nodeTemplate.test.ts
new file mode 100644
index 000000000..dcced093a
--- /dev/null
+++ b/org.knime.ui.js/src/util/dataMappers/__tests__/nodeTemplate.test.ts
@@ -0,0 +1,112 @@
+import { describe, expect, it } from "vitest";
+
+import { createAvailablePortTypes, createNodeTemplate } from "@/test/factories";
+import { nodeTemplate } from "../nodeTemplate";
+
+describe("nodeTemplate data mapper", () => {
+  it("extends the port information in a NodeTemplate", () => {
+    const availablePortTypes = createAvailablePortTypes();
+    const nodeTemplateData = createNodeTemplate();
+
+    const result =
+      nodeTemplate.toNodeTemplateWithExtendedPorts(availablePortTypes)(
+        nodeTemplateData,
+      );
+    expect(result).toStrictEqual({
+      component: false,
+      icon: "data:image/png;base64,xxx",
+      id: "org.knime.base.node.preproc.filter.column.DataColumnSpecFilterNodeFactory",
+      inPorts: [
+        {
+          color: "#000000",
+          description: "No description available",
+          kind: "table",
+          name: "Table",
+          optional: false,
+          type: "table",
+          typeId: "org.knime.core.node.BufferedDataTable",
+          views: {
+            descriptorMapping: {
+              configured: [0, 2],
+              executed: [1, 2],
+            },
+            descriptors: [
+              {
+                isSpecView: true,
+                label: "Table",
+              },
+              {
+                label: "Table",
+              },
+              {
+                label: "Statistics",
+              },
+            ],
+          },
+        },
+      ],
+      name: "Column Filter",
+      nodeFactory: {
+        className:
+          "org.knime.base.node.preproc.filter.column.DataColumnSpecFilterNodeFactory",
+      },
+      outPorts: [
+        {
+          color: "#000000",
+          description: "No description available",
+          kind: "table",
+          name: "Table",
+          optional: false,
+          type: "table",
+          typeId: "org.knime.core.node.BufferedDataTable",
+          views: {
+            descriptorMapping: {
+              configured: [0, 2],
+              executed: [1, 2],
+            },
+            descriptors: [
+              {
+                isSpecView: true,
+                label: "Table",
+              },
+              {
+                label: "Table",
+              },
+              {
+                label: "Statistics",
+              },
+            ],
+          },
+        },
+        {
+          color: "#FF4B4B",
+          description: "No description available",
+          kind: "other",
+          name: "Table",
+          optional: false,
+          type: "other",
+          typeId: "org.some.otherPorType",
+          views: {
+            descriptorMapping: {
+              configured: [0, 2],
+              executed: [1, 2],
+            },
+            descriptors: [
+              {
+                isSpecView: true,
+                label: "Table",
+              },
+              {
+                label: "Table",
+              },
+              {
+                label: "Statistics",
+              },
+            ],
+          },
+        },
+      ],
+      type: "Manipulator",
+    });
+  });
+});
diff --git a/org.knime.ui.js/src/util/dataMappers/__tests__/ports.test.ts b/org.knime.ui.js/src/util/dataMappers/__tests__/ports.test.ts
new file mode 100644
index 000000000..228a57b6e
--- /dev/null
+++ b/org.knime.ui.js/src/util/dataMappers/__tests__/ports.test.ts
@@ -0,0 +1,86 @@
+import { describe, expect, it } from "vitest";
+
+import { PORT_TYPE_IDS, createAvailablePortTypes } from "@/test/factories";
+import { ports } from "../ports";
+
+describe("ports data mapper", () => {
+  const availablePortTypes = createAvailablePortTypes();
+
+  it("maps to extended port from a single typeId string", () => {
+    const typeId = PORT_TYPE_IDS.BufferedDataTable;
+
+    const result = ports.toExtendedPortObject(availablePortTypes)(typeId);
+    expect(result).toStrictEqual({
+      color: "#000000",
+      description: "No description available",
+      kind: "table",
+      name: "Table",
+      type: "table",
+      typeId: "org.knime.core.node.BufferedDataTable",
+      views: {
+        descriptorMapping: {
+          configured: [0, 2],
+          executed: [1, 2],
+        },
+        descriptors: [
+          { isSpecView: true, label: "Table" },
+          { label: "Table" },
+          { label: "Statistics" },
+        ],
+      },
+    });
+  });
+
+  it("maps to extended port from an object containint a typeId string property", () => {
+    const typeId = PORT_TYPE_IDS.BufferedDataTable;
+
+    const result = ports.toExtendedPortObject(availablePortTypes)({ typeId });
+    expect(result).toStrictEqual({
+      color: "#000000",
+      description: "No description available",
+      kind: "table",
+      name: "Table",
+      type: "table",
+      typeId: "org.knime.core.node.BufferedDataTable",
+      views: {
+        descriptorMapping: {
+          configured: [0, 2],
+          executed: [1, 2],
+        },
+        descriptors: [
+          { isSpecView: true, label: "Table" },
+          { label: "Table" },
+          { label: "Statistics" },
+        ],
+      },
+    });
+  });
+
+  it("can exclude the `type` property", () => {
+    const typeId = PORT_TYPE_IDS.BufferedDataTable;
+
+    const result = ports.toExtendedPortObject(
+      availablePortTypes,
+      false,
+    )({ typeId });
+
+    expect(result).toStrictEqual({
+      color: "#000000",
+      description: "No description available",
+      kind: "table",
+      name: "Table",
+      typeId: "org.knime.core.node.BufferedDataTable",
+      views: {
+        descriptorMapping: {
+          configured: [0, 2],
+          executed: [1, 2],
+        },
+        descriptors: [
+          { isSpecView: true, label: "Table" },
+          { label: "Table" },
+          { label: "Statistics" },
+        ],
+      },
+    });
+  });
+});
diff --git a/org.knime.ui.js/src/util/dataMappers/common.ts b/org.knime.ui.js/src/util/dataMappers/common.ts
new file mode 100644
index 000000000..8dd5798f8
--- /dev/null
+++ b/org.knime.ui.js/src/util/dataMappers/common.ts
@@ -0,0 +1,12 @@
+import type { NodeTemplate, PortType } from "@/api/gateway-api/generated-api";
+
+export type ExtendedPortType = PortType & {
+  typeId: string;
+  type?: string;
+  description: string;
+};
+
+export type NodeTemplateWithExtendedPorts = NodeTemplate & {
+  inPorts: ExtendedPortType[];
+  outPorts: ExtendedPortType[];
+};
diff --git a/org.knime.ui.js/src/util/dataMappers/componentDescription.ts b/org.knime.ui.js/src/util/dataMappers/componentDescription.ts
new file mode 100644
index 000000000..a385a101d
--- /dev/null
+++ b/org.knime.ui.js/src/util/dataMappers/componentDescription.ts
@@ -0,0 +1,31 @@
+import type {
+  AvailablePortTypes,
+  ComponentNodeDescription,
+} from "@/api/custom-types";
+
+import type { ExtendedPortType } from "./common";
+import { ports } from "./ports";
+
+export type ComponentNodeDescriptionWithExtendedPorts =
+  ComponentNodeDescription & {
+    inPorts: ExtendedPortType[];
+    outPorts: ExtendedPortType[];
+  };
+
+const toComponentNodeDescriptionWithExtendedPorts =
+  (availablePortTypes: AvailablePortTypes) =>
+  (
+    node: ComponentNodeDescription,
+  ): ComponentNodeDescriptionWithExtendedPorts => {
+    const { inPorts = [], outPorts = [] } = node;
+
+    return {
+      ...node,
+      inPorts: inPorts.map(ports.toExtendedPortObject(availablePortTypes)),
+      outPorts: outPorts.map(ports.toExtendedPortObject(availablePortTypes)),
+    };
+  };
+
+export const componentDescription = {
+  toComponentNodeDescriptionWithExtendedPorts,
+};
diff --git a/org.knime.ui.js/src/util/dataMappers/componentSearch.ts b/org.knime.ui.js/src/util/dataMappers/componentSearch.ts
new file mode 100644
index 000000000..870efd395
--- /dev/null
+++ b/org.knime.ui.js/src/util/dataMappers/componentSearch.ts
@@ -0,0 +1,47 @@
+import {
+  ComponentSearchItem,
+  type NodePortTemplate,
+  PortType,
+} from "@/api/gateway-api/generated-api";
+
+import type { ExtendedPortType, NodeTemplateWithExtendedPorts } from "./common";
+
+const toNodeTemplateWithExtendedPorts = (
+  input: ComponentSearchItem,
+): NodeTemplateWithExtendedPorts => {
+  const inPorts = (input.inPorts ?? []).map((port) => {
+    return {
+      name: port.name ?? "",
+      typeId: port.portTypeName,
+      optional: port.optional,
+      color: port.color,
+      type: port.portTypeName,
+      description: port.description ?? "",
+      kind: PortType.KindEnum.Other, // TODO: add port info
+    } satisfies NodePortTemplate & ExtendedPortType;
+  });
+
+  const outPorts = (input.outPorts ?? []).map((port) => {
+    return {
+      name: port.name ?? "",
+      typeId: port.portTypeName,
+      optional: port.optional,
+      color: port.color,
+      type: port.portTypeName,
+      description: port.description ?? "",
+      kind: PortType.KindEnum.Other, // TODO: add port info
+    } satisfies NodePortTemplate & ExtendedPortType;
+  });
+
+  return {
+    id: input.id,
+    name: input.name,
+    type: input.type,
+    component: true,
+    icon: input.icon,
+    inPorts,
+    outPorts,
+  };
+};
+
+export const componentSearch = { toNodeTemplateWithExtendedPorts };
diff --git a/org.knime.ui.js/src/util/dataMappers/index.ts b/org.knime.ui.js/src/util/dataMappers/index.ts
new file mode 100644
index 000000000..1ed3f5ff4
--- /dev/null
+++ b/org.knime.ui.js/src/util/dataMappers/index.ts
@@ -0,0 +1,19 @@
+/**
+ * The purpose of these helpers is to map information that
+ * is not directly provided by the API, particularly around ports. Normally, port objects
+ * have limited information and only list their typeId which uniquely identifies that port.
+ * Any other information on ports, such as color, kind, and other properties declared in
+ * PortType are only available by accessing the global dictionary of
+ * installed ports via the global application state property `availablePortTypes` and then
+ * indexing in using the unique port typeId.
+ *
+ * These mapping utilities are tailored to different features that in one way or another
+ * need port information. Thus, new mappers should be created accordingly based on this principle
+ */
+
+export * from "./ports";
+export * from "./nodeTemplate";
+export * from "./nodeDescription";
+export * from "./componentDescription";
+export * from "./componentSearch";
+export * from "./common";
diff --git a/org.knime.ui.js/src/util/dataMappers/nodeDescription.ts b/org.knime.ui.js/src/util/dataMappers/nodeDescription.ts
new file mode 100644
index 000000000..23df1949a
--- /dev/null
+++ b/org.knime.ui.js/src/util/dataMappers/nodeDescription.ts
@@ -0,0 +1,80 @@
+import type { AvailablePortTypes } from "@/api/custom-types";
+import type {
+  DynamicPortGroupDescription,
+  NativeNodeDescription,
+} from "@/api/gateway-api/generated-api";
+
+import type { ExtendedPortType } from "./common";
+import { ports } from "./ports";
+
+type PortGroupDescription = {
+  groupName: string;
+  groupDescription: string;
+  types: Array<ExtendedPortType & { typeName: string }>;
+};
+
+/**
+ * Processes a dynamic port group description so it can be rendered.
+ * @param availablePortTypes Dictionary of all available port types and their information
+ * @returns A function that maps the raw port group description as it was received to the format needed to
+ * to render it.
+ */
+const toPortGroupDescriptionWithExtendedPorts =
+  (availablePortTypes: AvailablePortTypes) =>
+  (portGroupDescription: DynamicPortGroupDescription): PortGroupDescription => {
+    const {
+      identifier,
+      description = "No description available",
+      supportedPortTypes = [],
+    } = portGroupDescription;
+
+    const types: PortGroupDescription["types"] = supportedPortTypes
+      .map(ports.toExtendedPortObject(availablePortTypes))
+      .map((fullPortType) => ({
+        ...fullPortType,
+        typeName: fullPortType.name,
+      }));
+
+    return {
+      groupName: identifier,
+      groupDescription: description,
+      types,
+    };
+  };
+
+export type NativeNodeDescriptionWithExtendedPorts = NativeNodeDescription & {
+  inPorts: ExtendedPortType[];
+  outPorts: ExtendedPortType[];
+  dynInPorts: PortGroupDescription[];
+  dynOutPorts: PortGroupDescription[];
+};
+
+/**
+ * Maps a node object and adds to every of its ports all the properties of the PortObject schema from the API
+ * @param availablePortTypes Dictionary of all available port types and their information
+ * @returns mapping function that takes a node to which all the port information will be added
+ */
+const toNativeNodeDescriptionWithExtendedPorts =
+  (availablePortTypes: AvailablePortTypes) =>
+  (node: NativeNodeDescription): NativeNodeDescriptionWithExtendedPorts => {
+    const {
+      inPorts = [],
+      outPorts = [],
+      dynamicInPortGroupDescriptions = [],
+      dynamicOutPortGroupDescriptions = [],
+    } = node;
+
+    return {
+      ...node,
+      inPorts: inPorts.map(ports.toExtendedPortObject(availablePortTypes)),
+      outPorts: outPorts.map(ports.toExtendedPortObject(availablePortTypes)),
+      dynInPorts: dynamicInPortGroupDescriptions.map(
+        toPortGroupDescriptionWithExtendedPorts(availablePortTypes),
+      ),
+      dynOutPorts: dynamicOutPortGroupDescriptions.map(
+        toPortGroupDescriptionWithExtendedPorts(availablePortTypes),
+      ),
+    };
+  };
+
+export const nodeDescription = { toNativeNodeDescriptionWithExtendedPorts };
diff --git a/org.knime.ui.js/src/util/dataMappers/nodeTemplate.ts b/org.knime.ui.js/src/util/dataMappers/nodeTemplate.ts
new file mode 100644
index 000000000..677ea84d0
--- /dev/null
+++ b/org.knime.ui.js/src/util/dataMappers/nodeTemplate.ts
@@ -0,0 +1,24 @@
+import type { AvailablePortTypes } from "@/api/custom-types";
+import type { NodeTemplate } from "@/api/gateway-api/generated-api";
+
+import type { NodeTemplateWithExtendedPorts } from "./common";
+import { ports } from "./ports";
+
+/**
+ * Maps a node object and adds to every of its ports all the properties of the PortObject schema from the API
+ * @param availablePortTypes Dictionary of all available port types and their information
+ * @returns mapping function that takes a node to which all the port information will be added
+ */
+const toNodeTemplateWithExtendedPorts =
+  (availablePortTypes: AvailablePortTypes) =>
+  (node: NodeTemplate): NodeTemplateWithExtendedPorts => {
+    const { inPorts = [], outPorts = [] } = node;
+
+    return {
+      ...node,
+      inPorts: inPorts.map(ports.toExtendedPortObject(availablePortTypes)),
+      outPorts: outPorts.map(ports.toExtendedPortObject(availablePortTypes)),
+    };
+  };
+
+export const nodeTemplate = { toNodeTemplateWithExtendedPorts };
diff --git a/org.knime.ui.js/src/util/dataMappers/ports.ts b/org.knime.ui.js/src/util/dataMappers/ports.ts
new file mode 100644
index 000000000..632b8ab36
--- /dev/null
+++ b/org.knime.ui.js/src/util/dataMappers/ports.ts
@@ -0,0 +1,41 @@
+import type { AvailablePortTypes } from "@/api/custom-types";
+
+import type { ExtendedPortType } from "./common";
+
+/**
+ * Maps a port `typeId` string or a object with a `typeId` property to a port object with all the properties of the
+ * PortObject schema from the API
+ * @param availablePortTypes Dictionary of all available port types and their information
+ * @param includeType whether to include a `type` property holding the value of the port kind.
+ * This is necessary when the data will injected (down the line) into the PortIcon component from webapps-common
+ * which uses a `type` prop instead of a `kind`
+ * @returns mapping function that takes either a string that represents the port type id, or an object
+ * with a `typeId` property. This mapping function will return the whole port object with information about color, kind,
+ * etc
+ */
+const toExtendedPortObject =
+  (availablePortTypes: AvailablePortTypes, includeType = true) =>
+  (input: string | { typeId: string }): ExtendedPortType => {
+    const isStringInput = typeof input === "string";
+    const fullPortObject = isStringInput
+      ? availablePortTypes[input]
+      : availablePortTypes[input.typeId];
+
+    const result: ExtendedPortType = {
+      ...fullPortObject,
+      description: "No description available",
+      typeId: isStringInput ? input : input?.typeId,
+    };
+
+    return includeType
+      ? {
+          ...result,
+          // NodePreview component in webapps-common uses a `type` prop instead of kind.
+          // See: WorkflowMetadata.vue or NodeTemplate.vue
+          type: fullPortObject.kind,
+          ...(typeof input === "string" ? {} : input),
+        }
+      : result;
+  };
+
+export const ports = { toExtendedPortObject };
diff --git a/org.knime.ui.js/src/util/fuzzyPortTypeSearch.js b/org.knime.ui.js/src/util/fuzzyPortTypeSearch.js
index 921ff5666..bddcb9dff 100644
--- a/org.knime.ui.js/src/util/fuzzyPortTypeSearch.js
+++ b/org.knime.ui.js/src/util/fuzzyPortTypeSearch.js
@@ -1,6 +1,6 @@
 import Fuse from "fuse.js";
 
-import { toExtendedPortObject } from "@/util/portDataMapper";
+import { ports } from "@/util/dataMappers";
 
 const fuseOptions = {
   shouldSort: true,
@@ -47,11 +47,11 @@ export const makeTypeSearch = ({
 }) => {
   const includeType = false;
   const suggestedPorts = suggestedTypeIds.map(
-    toExtendedPortObject(availablePortTypes, includeType),
+    ports.toExtendedPortObject(availablePortTypes, includeType),
   );
 
   const otherPorts = typeIds
-    .map(toExtendedPortObject(availablePortTypes, includeType))
+    .map(ports.toExtendedPortObject(availablePortTypes, includeType))
     // sort non-suggested ports by name
     .sort((a, b) => a.name.localeCompare(b.name));
 
diff --git a/org.knime.ui.js/src/util/portDataMapper.ts b/org.knime.ui.js/src/util/portDataMapper.ts
deleted file mode 100644
index 1caf628ba..000000000
--- a/org.knime.ui.js/src/util/portDataMapper.ts
+++ /dev/null
@@ -1,166 +0,0 @@
-import type {
-  AvailablePortTypes,
-  ComponentNodeDescription,
-  ExtendedPortType,
-  NodeTemplateWithExtendedPorts,
-} from "@/api/custom-types";
-import type {
-  DynamicPortGroupDescription,
-  NativeNodeDescription,
-  NodeTemplate,
-} from "@/api/gateway-api/generated-api";
-
-/**
- * The purpose of these helpers is to map all required information on ports that
- * is not directly provided by the API. Normally, port objects
- * have limited information and only list their typeId which uniquely identifies that port.
- * Any other information on ports, such as color, kind, and other properties declared in
- * PortType are only available by accessing the global dictionary of
- * installed ports via the global application state property `availablePortTypes` and then
- * indexing in using the unique port typeId. These mapping utilities provide reusable
- * functionality to do just that, returning `ExtendedPort`s that contain all the information
- * from their corresponding PortTypes
- */
-
-/**
- * Maps a port `typeId` string or a object with a `typeId` property to a port object with all the properties of the
- * PortObject schema from the API
- * @param availablePortTypes Dictionary of all available port types and their information
- * @param includeType whether to include a `type` property holding the value of the port kind.
- * This is necessary when the data will injected (down the line) into the PortIcon component from webapps-common
- * which uses a `type` prop instead of a `kind`
- * @returns mapping function that takes either a string that represents the port type id, or an object
- * with a `typeId` property. This mapping function will return the whole port object with information about color, kind,
- * etc
- */
-export const toExtendedPortObject =
-  (availablePortTypes: AvailablePortTypes, includeType = true) =>
-  (input: string | { typeId: string }): ExtendedPortType => {
-    const isStringInput = typeof input === "string";
-    const fullPortObject = isStringInput
-      ? availablePortTypes[input]
-      : availablePortTypes[input.typeId];
-
-    const result: ExtendedPortType = {
-      ...fullPortObject,
-      description: "No description available",
-      typeId: isStringInput ? input : input?.typeId,
-    };
-
-    return includeType
-      ? {
-          ...result,
-          // NodePreview component in webapps-common uses a `type` prop instead of kind.
-          // See: WorkflowMetadata.vue or NodeTemplate.vue
-          type: fullPortObject.kind,
-          ...(typeof input === "string" ? {} : input),
-        }
-      : result;
-  };
-
-/**
- * Maps a node object and adds to every of its ports all the properties of the PortObject schema from the API
- * @param availablePortTypes Dictionary of all available port types and their information
- * @returns mapping function that takes a node to which all the port information will be added
- */
-export const toNodeTemplateWithExtendedPorts =
-  (availablePortTypes: AvailablePortTypes) =>
-  (node: NodeTemplate): NodeTemplateWithExtendedPorts => {
-    const { inPorts = [], outPorts = [] } = node;
-
-    return {
-      ...node,
-      inPorts: inPorts.map(toExtendedPortObject(availablePortTypes)),
-      outPorts: outPorts.map(toExtendedPortObject(availablePortTypes)),
-    };
-  };
-
-type PortGroupDescription = {
-  groupName: string;
-  groupDescription: string;
-  types: Array<ExtendedPortType & { typeName: string }>;
-};
-
-/**
- * Processes a dynamic port group description so it can be rendered.
- * @param availablePortTypes Dictionary of all available port types and their information
- * @returns A function that maps the raw port group description as it was received to the format needed to
- * to render it.
- */
-const toPortGroupDescriptionWithExtendedPorts =
-  (availablePortTypes: AvailablePortTypes) =>
-  (portGroupDescription: DynamicPortGroupDescription): PortGroupDescription => {
-    const {
-      identifier,
-      description = "No description available",
-      supportedPortTypes = [],
-    } = portGroupDescription;
-
-    const types: PortGroupDescription["types"] = supportedPortTypes
-      .map(toExtendedPortObject(availablePortTypes))
-      .map((fullPortType) => ({
-        ...fullPortType,
-        typeName: fullPortType.name,
-      }));
-
-    return {
-      groupName: identifier,
-      groupDescription: description,
-      types,
-    };
-  };
-
-export type NativeNodeDescriptionWithExtendedPorts = NativeNodeDescription & {
-  inPorts: ExtendedPortType[];
-  outPorts: ExtendedPortType[];
-  dynInPorts: PortGroupDescription[];
-  dynOutPorts: PortGroupDescription[];
-};
-
-/**
- * Maps a node object and adds to every of its ports all the properties of the PortObject schema from the API
- * @param availablePortTypes Dictionary of all available port types and their information
- * @returns mapping function that takes a node to which all the port information will be added
- */
-export const toNativeNodeDescriptionWithExtendedPorts =
-  (availablePortTypes: AvailablePortTypes) =>
-  (node: NativeNodeDescription): NativeNodeDescriptionWithExtendedPorts => {
-    const {
-      inPorts = [],
-      outPorts = [],
-      dynamicInPortGroupDescriptions = [],
-      dynamicOutPortGroupDescriptions = [],
-    } = node;
-
-    return {
-      ...node,
-      inPorts: inPorts.map(toExtendedPortObject(availablePortTypes)),
-      outPorts: outPorts.map(toExtendedPortObject(availablePortTypes)),
-      dynInPorts: dynamicInPortGroupDescriptions.map(
-        toPortGroupDescriptionWithExtendedPorts(availablePortTypes),
-      ),
-      dynOutPorts: dynamicOutPortGroupDescriptions.map(
-        toPortGroupDescriptionWithExtendedPorts(availablePortTypes),
-      ),
-    };
-  };
-
-export type ComponentNodeDescriptionWithExtendedPorts =
-  ComponentNodeDescription & {
-    inPorts: ExtendedPortType[];
-    outPorts: ExtendedPortType[];
-  };
-
-export const toComponentNodeDescriptionWithExtendedPorts =
-  (availablePortTypes: AvailablePortTypes) =>
-  (
-    node: ComponentNodeDescription,
-  ): ComponentNodeDescriptionWithExtendedPorts => {
-    const { inPorts = [], outPorts = [] } = node;
-
-    return {
-      ...node,
-      inPorts: inPorts.map(toExtendedPortObject(availablePortTypes)),
-      outPorts: outPorts.map(toExtendedPortObject(availablePortTypes)),
-    };
-  };