refactor: finalize new node position before adding to graph

Resolve overlap during node construction instead of mutating node.pos
after graph.add, keeping placement out of the post-add mutation path.

Co-authored-by: linear-code[bot] <222613912+linear-code[bot]@users.noreply.github.com>

src/components/searchbox/LinkReleaseContextMenu.test.ts

@@ -0,0 +1,109 @@
+import { createTestingPinia } from '@pinia/testing'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+
+import LinkReleaseContextMenu from './LinkReleaseContextMenu.vue'
+import type {
+  LinkReleaseNodeCategory,
+  LinkReleaseSearchResultGroup
+} from './linkReleaseMenuModel'
+
+const { groups } = vi.hoisted(() => ({
+  groups: {
+    suggestions: [] as ComfyNodeDefImpl[],
+    categories: [] as LinkReleaseNodeCategory[],
+    searchResultGroups: [] as LinkReleaseSearchResultGroup[]
+  }
+}))
+
+vi.mock('./linkReleaseMenuModel', () => ({
+  getLinkReleaseHeaderLabel: () => '',
+  getLinkReleaseSuggestions: () => groups.suggestions,
+  buildLinkReleaseNodeCategories: () => groups.categories,
+  groupLinkReleaseSearchResults: () => groups.searchResultGroups,
+  searchLinkReleaseNodes: () =>
+    groups.searchResultGroups.flatMap((group) =>
+      group.nodes.map((node) => ({ category: group.category, node }))
+    ),
+  filterNodesByName: () => []
+}))
+
+const i18n = createI18n({ legacy: false, locale: 'en', messages: { en: {} } })
+
+const stubs = {
+  DropdownMenuRoot: { template: '<div><slot /></div>' },
+  DropdownMenuTrigger: { template: '<div><slot /></div>' },
+  DropdownMenuPortal: { template: '<div><slot /></div>' },
+  DropdownMenuContent: { template: '<div><slot /></div>' },
+  DropdownMenuLabel: { template: '<div><slot /></div>' },
+  DropdownMenuItem: { template: '<div role="menuitem"><slot /></div>' },
+  DropdownMenuSeparator: { template: '<hr data-testid="menu-separator" />' },
+  LinkReleaseNodeSubmenu: { template: '<div data-testid="submenu" />' },
+  MiddleTruncate: { template: '<span>{{ text }}</span>', props: ['text'] }
+}
+
+function suggestion(name: string): ComfyNodeDefImpl {
+  return { name, display_name: name } as ComfyNodeDefImpl
+}
+
+function nodeCategory(
+  key: 'comfy' | 'extensions' | 'partner',
+  labelKey: string = key
+): LinkReleaseNodeCategory {
+  return { key, labelKey, icon: '', nodes: [suggestion('Node')] }
+}
+
+function renderMenu() {
+  return render(LinkReleaseContextMenu, {
+    props: { context: null },
+    global: { plugins: [i18n, createTestingPinia()], stubs }
+  })
+}
+
+describe('LinkReleaseContextMenu group divider', () => {
+  beforeEach(() => {
+    groups.suggestions = []
+    groups.categories = []
+    groups.searchResultGroups = []
+  })
+
+  it('renders a divider between the suggestions and categories groups', () => {
+    groups.suggestions = [suggestion('KSampler')]
+    groups.categories = [nodeCategory('comfy')]
+    renderMenu()
+
+    expect(screen.getAllByTestId('menu-separator')).toHaveLength(3)
+  })
+
+  it('omits the group divider when only one group is present', () => {
+    groups.suggestions = []
+    groups.categories = [nodeCategory('comfy')]
+    renderMenu()
+
+    expect(screen.getAllByTestId('menu-separator')).toHaveLength(2)
+  })
+
+  it('renders a divider between search result groups', async () => {
+    groups.suggestions = []
+    groups.categories = []
+    groups.searchResultGroups = [
+      {
+        category: nodeCategory('extensions', 'contextMenu.Extensions'),
+        nodes: [suggestion('Ext Node')]
+      },
+      {
+        category: nodeCategory('partner', 'contextMenu.Partner Nodes'),
+        nodes: [suggestion('Partner Node')]
+      }
+    ]
+    renderMenu()
+
+    await userEvent.type(screen.getByRole('textbox'), 'na')
+
+    expect(screen.getAllByTestId('menu-separator')).toHaveLength(2)
+  })
+})

src/components/searchbox/LinkReleaseContextMenu.vue

@@ -0,0 +1,382 @@
+<template>
+  <DropdownMenuRoot :open="open" :modal="false" @update:open="onOpenChange">
+    <DropdownMenuTrigger as-child>
+      <div
+        aria-hidden="true"
+        class="pointer-events-none fixed size-0"
+        :style="{ left: `${position.x}px`, top: `${position.y}px` }"
+      />
+    </DropdownMenuTrigger>
+    <DropdownMenuPortal>
+      <DropdownMenuContent
+        side="bottom"
+        align="start"
+        :side-offset="SIDE_OFFSET"
+        :collision-padding="VIEWPORT_MARGIN"
+        :avoid-collisions="false"
+        :class="contentClass"
+        :style="menuMaxHeight ? { maxHeight: `${menuMaxHeight}px` } : undefined"
+        @open-auto-focus.prevent="focusSearch"
+        @close-auto-focus.prevent
+        @entry-focus="onEntryFocus"
+        @keydown.capture="redirectTypingToSearch"
+      >
+        <DropdownMenuLabel
+          v-if="headerLabel"
+          class="flex shrink-0 items-center gap-2 p-2 text-xs font-medium text-muted-foreground uppercase"
+        >
+          <span class="flex size-4 shrink-0 items-center justify-center">
+            <span
+              class="size-4 rounded-full"
+              :style="{ backgroundColor: slotColor }"
+            />
+          </span>
+          <span class="truncate">{{ headerLabel }}</span>
+        </DropdownMenuLabel>
+        <div data-search-field class="p-.5 shrink-0">
+          <div
+            class="flex h-9 items-center gap-2 rounded-lg bg-secondary-background px-2"
+          >
+            <i
+              class="icon-[lucide--search] size-4 shrink-0 text-muted-foreground"
+            />
+            <input
+              ref="searchInput"
+              v-model="query"
+              type="text"
+              :placeholder="t('contextMenu.Search')"
+              class="size-full min-w-0 appearance-none border-none bg-transparent text-sm text-base-foreground outline-none placeholder:text-muted-foreground"
+              @keydown="onRootSearchKeydown"
+            />
+          </div>
+        </div>
+        <DropdownMenuSeparator
+          class="-mx-1 my-1 h-px shrink-0 bg-border-subtle"
+        />
+
+        <div :class="scrollClass">
+          <template v-if="trimmedQuery">
+            <template
+              v-for="(group, groupIndex) in searchResultGroups"
+              :key="group.category.key"
+            >
+              <DropdownMenuSeparator
+                v-if="groupIndex > 0"
+                class="-mx-1 my-1 h-px shrink-0 bg-border-subtle"
+              />
+              <DropdownMenuItem
+                v-for="node in group.nodes"
+                :key="node.name"
+                :class="itemClass"
+                @select="selectNode(node)"
+              >
+                <i
+                  :class="cn(group.category.icon, 'size-4 shrink-0 opacity-80')"
+                />
+                <span class="flex min-w-0 flex-1 items-center gap-1">
+                  <span class="shrink-0 text-muted-foreground">
+                    {{ t(group.category.labelKey) }}:
+                  </span>
+                  <MiddleTruncate
+                    :text="node.display_name"
+                    class="min-w-0 flex-1"
+                  />
+                </span>
+              </DropdownMenuItem>
+            </template>
+            <div
+              v-if="searchResults.length === 0"
+              class="p-2 text-sm text-muted-foreground"
+            >
+              {{ t('g.noResults') }}
+            </div>
+          </template>
+
+          <template v-else>
+            <template v-if="suggestions.length">
+              <DropdownMenuLabel
+                class="block truncate p-2 text-xs font-medium text-muted-foreground uppercase"
+              >
+                {{ t('contextMenu.Most Relevant') }}
+              </DropdownMenuLabel>
+              <DropdownMenuItem
+                v-for="nodeDef in suggestions"
+                :key="nodeDef.name"
+                :class="itemClass"
+                @select="selectNode(nodeDef)"
+              >
+                <MiddleTruncate
+                  :text="nodeDef.display_name"
+                  class="min-w-0 flex-1"
+                />
+              </DropdownMenuItem>
+            </template>
+
+            <DropdownMenuSeparator
+              v-if="suggestions.length && categories.length"
+              class="-mx-1 my-1 h-px shrink-0 bg-border-subtle"
+            />
+
+            <template v-if="categories.length">
+              <DropdownMenuLabel
+                class="block truncate p-2 text-xs font-medium text-muted-foreground uppercase"
+              >
+                {{ t('contextMenu.Compatible Nodes') }}
+              </DropdownMenuLabel>
+              <LinkReleaseNodeSubmenu
+                v-for="category in categories"
+                :key="category.key"
+                :category
+                :item-class="itemClass"
+                :content-class="submenuContentClass"
+                :scroll-class="submenuScrollClass"
+                @select="selectNode"
+              />
+            </template>
+          </template>
+        </div>
+
+        <template v-if="!trimmedQuery">
+          <DropdownMenuSeparator
+            class="-mx-1 my-1 h-px shrink-0 bg-border-subtle"
+          />
+          <DropdownMenuItem
+            :class="cn(itemClass, 'shrink-0')"
+            @select="addReroute"
+          >
+            <i class="icon-[lucide--git-fork] size-4 shrink-0 opacity-80" />
+            <span class="flex-1 truncate">
+              {{ t('contextMenu.Add Reroute') }}
+            </span>
+          </DropdownMenuItem>
+        </template>
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+import {
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRoot,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from 'reka-ui'
+import { computed, nextTick, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { getSlotColor } from '@/constants/slotColors'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+
+import LinkReleaseNodeSubmenu from './LinkReleaseNodeSubmenu.vue'
+import MiddleTruncate from './MiddleTruncate.vue'
+import {
+  buildLinkReleaseNodeCategories,
+  computeContextMenuTop,
+  estimateLinkReleaseMenuHeight,
+  getLinkReleaseHeaderLabel,
+  getLinkReleaseSuggestions,
+  groupLinkReleaseSearchResults,
+  searchLinkReleaseNodes
+} from './linkReleaseMenuModel'
+import type {
+  LinkReleaseContext,
+  LinkReleaseNodeMatch
+} from './linkReleaseMenuModel'
+
+const { context } = defineProps<{ context: LinkReleaseContext | null }>()
+
+const emit = defineEmits<{
+  selectNode: [nodeDef: ComfyNodeDefImpl]
+  addReroute: []
+  dismiss: []
+}>()
+
+const { t } = useI18n()
+const nodeDefStore = useNodeDefStore()
+
+const open = ref(false)
+const position = ref({ x: 0, y: 0 })
+const searchInput = ref<HTMLInputElement>()
+const query = ref('')
+const menuMaxHeight = ref<number>()
+let actionTaken = false
+
+const VIEWPORT_MARGIN = 8
+const SIDE_OFFSET = 4
+const MENU_WIDTH = 384
+
+const contentClass =
+  'z-1700 flex min-w-[260px] max-w-sm flex-col overflow-hidden rounded-lg border border-interface-menu-stroke bg-interface-menu-surface p-1 shadow-interface'
+const scrollClass =
+  'flex-1 min-h-0 overflow-y-auto overflow-x-hidden scrollbar-custom'
+const submenuContentClass =
+  'z-1700 flex w-sm flex-col overflow-hidden rounded-lg border border-interface-menu-stroke bg-interface-menu-surface p-1 shadow-interface'
+const submenuScrollClass =
+  'flex-1 min-h-0 overflow-y-auto overflow-x-hidden scrollbar-custom'
+const itemClass =
+  'flex cursor-pointer items-center gap-2 rounded-lg px-2 py-2 text-sm text-base-foreground outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-interface-menu-component-surface-hovered'
+
+const headerLabel = computed(() =>
+  context ? getLinkReleaseHeaderLabel(context) : ''
+)
+
+const slotColor = computed(() => getSlotColor(context?.dataType?.split(',')[0]))
+
+const trimmedQuery = computed(() => query.value.trim())
+
+const typeFilter = computed(() => {
+  if (!context) return null
+  const svc = nodeDefStore.nodeSearchService
+  return {
+    filterDef: context.isFromOutput
+      ? svc.inputTypeFilter
+      : svc.outputTypeFilter,
+    value: context.dataType
+  }
+})
+
+const compatibleNodes = computed<ComfyNodeDefImpl[]>(() => {
+  if (!typeFilter.value) return []
+  return nodeDefStore.nodeSearchService.searchNode('', [typeFilter.value], {
+    limit: 500
+  })
+})
+
+const defaultNodeDefs = computed<ComfyNodeDefImpl[]>(() => {
+  if (!context?.dataType) return []
+  const table = context.isFromOutput
+    ? LiteGraph.slot_types_default_out
+    : LiteGraph.slot_types_default_in
+  const types = table?.[context.dataType] ?? []
+  return types
+    .map((type) => nodeDefStore.allNodeDefsByName[type])
+    .filter((nodeDef): nodeDef is ComfyNodeDefImpl => Boolean(nodeDef))
+})
+
+const suggestions = computed(() =>
+  getLinkReleaseSuggestions(defaultNodeDefs.value)
+)
+const categories = computed(() =>
+  buildLinkReleaseNodeCategories(compatibleNodes.value)
+)
+
+const searchResultGroups = computed(() =>
+  groupLinkReleaseSearchResults(categories.value, trimmedQuery.value)
+)
+const searchResults = computed<LinkReleaseNodeMatch[]>(() =>
+  searchLinkReleaseNodes(categories.value, trimmedQuery.value)
+)
+
+function selectNode(nodeDef: ComfyNodeDefImpl) {
+  actionTaken = true
+  emit('selectNode', nodeDef)
+  hide()
+}
+
+function addReroute() {
+  actionTaken = true
+  emit('addReroute')
+  hide()
+}
+
+function focusSearch() {
+  searchInput.value?.focus()
+}
+
+function isPrintableKey(event: KeyboardEvent) {
+  return (
+    event.key.length === 1 &&
+    event.key !== ' ' &&
+    !event.ctrlKey &&
+    !event.metaKey &&
+    !event.altKey
+  )
+}
+
+// When the keyboard focus is on a menu item, funnel printable keystrokes into
+// the search field instead of letting Reka run its item type-ahead.
+function redirectTypingToSearch(event: KeyboardEvent) {
+  if (event.target === searchInput.value || !isPrintableKey(event)) return
+  event.preventDefault()
+  event.stopPropagation()
+  query.value += event.key
+  focusSearch()
+}
+
+// Reka refocuses the first item (scrolling the list to the top) whenever the
+// menu regains focus, which fires as the pointer leaves an item while scrolling.
+function onEntryFocus(event: Event) {
+  event.preventDefault()
+}
+
+function focusFirstItem(target: HTMLElement) {
+  const menu = target.closest<HTMLElement>('[role="menu"]')
+  menu
+    ?.querySelector<HTMLElement>('[role="menuitem"]:not([data-disabled])')
+    ?.focus()
+}
+
+function onRootSearchKeydown(event: KeyboardEvent) {
+  // Let Reka close the menu natively on Escape.
+  if (event.key === 'Escape') return
+  event.stopPropagation()
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    focusFirstItem(event.currentTarget as HTMLElement)
+  } else if (event.key === 'Enter' && trimmedQuery.value) {
+    const first = searchResults.value[0]
+    if (first) selectNode(first.node)
+  }
+}
+
+function show(event: MouseEvent) {
+  actionTaken = false
+  query.value = ''
+  const menuHeight = estimateLinkReleaseMenuHeight({
+    hasHeader: Boolean(headerLabel.value),
+    suggestionCount: suggestions.value.length,
+    categoryCount: categories.value.length,
+    searchResultCount: 0,
+    showReroute: true
+  })
+  const menuTop = computeContextMenuTop({
+    cursorY: event.clientY,
+    menuHeight,
+    viewportHeight: window.innerHeight,
+    margin: VIEWPORT_MARGIN,
+    sideOffset: SIDE_OFFSET
+  })
+  menuMaxHeight.value = window.innerHeight - menuTop - VIEWPORT_MARGIN
+  const maxX = Math.max(
+    VIEWPORT_MARGIN,
+    window.innerWidth - MENU_WIDTH - VIEWPORT_MARGIN
+  )
+  position.value = {
+    x: Math.min(maxX, Math.max(VIEWPORT_MARGIN, event.clientX)),
+    y: menuTop - SIDE_OFFSET
+  }
+  void nextTick(() => {
+    open.value = true
+  })
+}
+
+function hide() {
+  open.value = false
+}
+
+function onOpenChange(value: boolean) {
+  open.value = value
+  if (value) return
+  if (!actionTaken) emit('dismiss')
+  actionTaken = false
+}
+
+defineExpose({ show, hide })
+</script>

src/components/searchbox/LinkReleaseNodeSubmenu.stories.ts

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import {
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRoot,
+  DropdownMenuTrigger
+} from 'reka-ui'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+
+import LinkReleaseNodeSubmenu from './LinkReleaseNodeSubmenu.vue'
+import type { LinkReleaseNodeCategory } from './linkReleaseMenuModel'
+
+const contentClass =
+  'z-1700 flex max-h-[min(80vh,var(--reka-dropdown-menu-content-available-height))] min-w-[260px] max-w-sm flex-col overflow-hidden rounded-lg border border-interface-menu-stroke bg-interface-menu-surface p-1 shadow-interface'
+const submenuContentClass =
+  'z-1700 flex w-sm max-h-[min(80vh,var(--reka-dropdown-menu-content-available-height))] flex-col overflow-hidden rounded-lg border border-interface-menu-stroke bg-interface-menu-surface p-1 shadow-interface'
+const submenuScrollClass =
+  'overflow-y-auto scrollbar-custom max-h-[min(calc(var(--reka-dropdown-menu-content-available-height)-3.5rem),80vh)]'
+const itemClass =
+  'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 text-sm text-base-foreground outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-interface-menu-component-surface-hovered'
+
+function node(name: string, display_name = name): ComfyNodeDefImpl {
+  return { name, display_name } as ComfyNodeDefImpl
+}
+
+const category: LinkReleaseNodeCategory = {
+  key: 'comfy',
+  labelKey: 'contextMenu.Comfy Nodes',
+  icon: 'icon-[lucide--box]',
+  nodes: [
+    node('KSampler'),
+    node('VAEDecode', 'VAE Decode'),
+    node('VAEEncode', 'VAE Encode'),
+    node('CLIPTextEncode', 'CLIP Text Encode'),
+    node('LoadImage', 'Load Image'),
+    node('SaveImage', 'Save Image'),
+    node('EmptyLatentImage', 'Empty Latent Image'),
+    node(
+      'StableCascade_StageB_Conditioning',
+      'StableCascade_StageB_Conditioning'
+    )
+  ]
+}
+
+const meta: Meta<typeof LinkReleaseNodeSubmenu> = {
+  title: 'Components/Searchbox/LinkReleaseNodeSubmenu',
+  component: LinkReleaseNodeSubmenu
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+function renderAnchored(side: 'left' | 'right'): Story['render'] {
+  return () => ({
+    components: {
+      DropdownMenuRoot,
+      DropdownMenuTrigger,
+      DropdownMenuPortal,
+      DropdownMenuContent,
+      DropdownMenuLabel,
+      LinkReleaseNodeSubmenu
+    },
+    setup() {
+      const anchorStyle =
+        side === 'right'
+          ? 'position: fixed; top: 64px; right: 16px;'
+          : 'position: fixed; top: 64px; left: 16px;'
+      return {
+        anchorStyle,
+        contentClass,
+        submenuContentClass,
+        submenuScrollClass,
+        itemClass,
+        category,
+        side
+      }
+    },
+    template: `
+      <div style="height: 480px;">
+        <DropdownMenuRoot default-open>
+          <DropdownMenuTrigger as-child>
+            <button :style="anchorStyle" class="rounded-md border border-interface-menu-stroke bg-interface-menu-surface px-3 py-1.5 text-sm text-base-foreground">
+              Compatible Nodes
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuContent
+              :class="contentClass"
+              :side="side === 'right' ? 'bottom' : 'bottom'"
+              :align="side === 'right' ? 'end' : 'start'"
+              :side-offset="4"
+            >
+              <DropdownMenuLabel class="block truncate px-3 pt-2 pb-1 text-xs font-medium text-muted-foreground uppercase">
+                Compatible Nodes
+              </DropdownMenuLabel>
+              <LinkReleaseNodeSubmenu
+                :category="category"
+                :item-class="itemClass"
+                :content-class="submenuContentClass"
+                :scroll-class="submenuScrollClass"
+              />
+            </DropdownMenuContent>
+          </DropdownMenuPortal>
+        </DropdownMenuRoot>
+      </div>
+    `
+  })
+}
+
+/** Anchored near the LEFT edge: the submenu opens to the RIGHT (normal). */
+export const OpensRight: Story = { render: renderAnchored('left') }
+
+/**
+ * Anchored near the RIGHT edge: with no room on the right, Floating UI flips the
+ * submenu to the LEFT, landing flush against the parent menu's left edge.
+ */
+export const FlipsLeft: Story = { render: renderAnchored('right') }

src/components/searchbox/LinkReleaseNodeSubmenu.test.ts

@@ -0,0 +1,85 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+import type { Slots } from 'vue'
+import { computed, h, inject, nextTick, provide } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+
+import LinkReleaseNodeSubmenu from './LinkReleaseNodeSubmenu.vue'
+import type { LinkReleaseNodeCategory } from './linkReleaseMenuModel'
+
+const i18n = createI18n({ legacy: false, locale: 'en', messages: { en: {} } })
+
+const category: LinkReleaseNodeCategory = {
+  key: 'comfy',
+  labelKey: 'Comfy Nodes',
+  icon: 'icon-[lucide--box]',
+  nodes: [{ name: 'KSampler', display_name: 'KSampler' } as ComfyNodeDefImpl]
+}
+
+const SUB_OPEN = Symbol('subOpen')
+
+const stubs = {
+  DropdownMenuSub: {
+    props: ['open'],
+    setup(props: { open?: boolean }, { slots }: { slots: Slots }) {
+      provide(
+        SUB_OPEN,
+        computed(() => props.open ?? false)
+      )
+      return () => h('div', slots.default?.())
+    }
+  },
+  DropdownMenuSubTrigger: {
+    template: '<button data-testid="sub-trigger"><slot /></button>'
+  },
+  DropdownMenuPortal: { template: '<div><slot /></div>' },
+  DropdownMenuSubContent: {
+    setup(_: unknown, { slots }: { slots: Slots }) {
+      const open = inject<{ value: boolean }>(SUB_OPEN)
+      return () =>
+        open?.value ? h('div', { role: 'menu' }, slots.default?.()) : null
+    }
+  },
+  DropdownMenuSeparator: { template: '<hr />' },
+  DropdownMenuItem: { template: '<div role="menuitem"><slot /></div>' },
+  MiddleTruncate: { template: '<span>{{ text }}</span>', props: ['text'] }
+}
+
+function renderSubmenu() {
+  return render(LinkReleaseNodeSubmenu, {
+    props: { category, itemClass: '', contentClass: '', scrollClass: '' },
+    global: { plugins: [i18n], stubs }
+  })
+}
+
+describe('LinkReleaseNodeSubmenu keyboard handling', () => {
+  it('steps into the submenu search on ArrowRight', async () => {
+    renderSubmenu()
+    await userEvent.click(screen.getByTestId('sub-trigger'))
+    await userEvent.keyboard('{ArrowRight}')
+    await nextTick()
+
+    expect(screen.getByRole('textbox')).toHaveFocus()
+  })
+
+  it('steps into the submenu search on Enter', async () => {
+    renderSubmenu()
+    await userEvent.click(screen.getByTestId('sub-trigger'))
+    await userEvent.keyboard('{Enter}')
+    await nextTick()
+
+    expect(screen.getByRole('textbox')).toHaveFocus()
+  })
+
+  it('does not move focus to the search on other keys', async () => {
+    renderSubmenu()
+    await userEvent.click(screen.getByTestId('sub-trigger'))
+    await userEvent.keyboard('a')
+    await nextTick()
+
+    expect(screen.getByRole('textbox')).not.toHaveFocus()
+  })
+})

src/components/searchbox/LinkReleaseNodeSubmenu.vue

@@ -0,0 +1,242 @@
+<template>
+  <DropdownMenuSub v-model:open="open">
+    <DropdownMenuSubTrigger
+      ref="triggerRef"
+      :class="triggerClass"
+      @focus="open = true"
+      @keydown="onTriggerKeydown"
+      @blur="onTriggerBlur"
+    >
+      <i :class="cn(category.icon, 'size-4 shrink-0 opacity-80')" />
+      <span class="flex-1 truncate">{{ t(category.labelKey) }}</span>
+      <span
+        class="rounded-full bg-interface-menu-keybind-surface-default px-1.5 text-xs text-muted-foreground"
+      >
+        {{ category.nodes.length }}
+      </span>
+      <i class="icon-[lucide--chevron-right] size-4 shrink-0 opacity-60" />
+    </DropdownMenuSubTrigger>
+    <DropdownMenuPortal>
+      <!--
+        Opens to the right of the trigger; when there's no room, Floating UI
+        flips it to the LEFT. align-offset is computed per-open
+        (alignToContextMenu) so the submenu's search field lines up with the
+        root search field instead of the hovered trigger row. The height is also
+        pinned per-open: maxHeight grows into the viewport space below the
+        submenu top but never drops under the context menu height, so the panel
+        scrolls internally instead of letting Floating UI shift it upward.
+      -->
+      <DropdownMenuSubContent
+        :class="contentClass"
+        :style="maxHeight ? { maxHeight: `${maxHeight}px` } : undefined"
+        side="right"
+        align="start"
+        :side-offset="-2"
+        :align-offset="alignOffset"
+        :collision-padding="8"
+        update-position-strategy="optimized"
+        @open-auto-focus.prevent
+        @entry-focus="onEntryFocus"
+        @keydown.capture="redirectTypingToSearch"
+      >
+        <div class="shrink-0 p-0.5">
+          <div
+            class="flex h-9 items-center gap-2 rounded-lg bg-secondary-background px-2"
+          >
+            <i
+              class="icon-[lucide--search] size-4 shrink-0 text-muted-foreground"
+            />
+            <input
+              ref="searchInput"
+              v-model="query"
+              type="text"
+              :aria-label="
+                t('g.searchPlaceholder', { subject: t(category.labelKey) })
+              "
+              :placeholder="
+                t('g.searchPlaceholder', { subject: t(category.labelKey) })
+              "
+              class="size-full min-w-0 appearance-none border-none bg-transparent text-sm text-base-foreground outline-none placeholder:text-muted-foreground"
+              @keydown="onSearchKeydown"
+            />
+          </div>
+        </div>
+        <DropdownMenuSeparator
+          class="-mx-1 my-1 h-px shrink-0 bg-border-subtle"
+        />
+        <div :class="scrollClass">
+          <DropdownMenuItem
+            v-for="nodeDef in filteredNodes"
+            :key="nodeDef.name"
+            :class="itemClass"
+            @select="emit('select', nodeDef)"
+          >
+            <MiddleTruncate
+              :text="nodeDef.display_name"
+              class="min-w-0 flex-1 self-stretch"
+            />
+          </DropdownMenuItem>
+          <div
+            v-if="filteredNodes.length === 0"
+            class="px-3 py-2 text-sm text-muted-foreground"
+          >
+            {{ t('g.noResults') }}
+          </div>
+        </div>
+      </DropdownMenuSubContent>
+    </DropdownMenuPortal>
+  </DropdownMenuSub>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+import {
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger
+} from 'reka-ui'
+import { computed, nextTick, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+
+import MiddleTruncate from './MiddleTruncate.vue'
+import {
+  computeSubmenuAlignOffset,
+  computeSubmenuMaxHeight,
+  filterNodesByName
+} from './linkReleaseMenuModel'
+import type { LinkReleaseNodeCategory } from './linkReleaseMenuModel'
+
+const { category, itemClass, contentClass, scrollClass } = defineProps<{
+  category: LinkReleaseNodeCategory
+  itemClass: string
+  contentClass: string
+  scrollClass: string
+}>()
+
+const emit = defineEmits<{
+  select: [nodeDef: ComfyNodeDefImpl]
+}>()
+
+const { t } = useI18n()
+
+const open = ref(false)
+const query = ref('')
+const searchInput = ref<HTMLInputElement>()
+const triggerRef = ref<InstanceType<typeof DropdownMenuSubTrigger>>()
+// Pin the submenu's search field to the root search field rather than to the
+// hovered trigger row; both recomputed each time the submenu opens.
+const alignOffset = ref(-5)
+const maxHeight = ref<number>()
+
+const VIEWPORT_MARGIN = 8
+
+const triggerClass = computed(() =>
+  cn(itemClass, 'data-[state=open]:bg-interface-menu-component-surface-hovered')
+)
+
+const filteredNodes = computed(() =>
+  filterNodesByName(category.nodes, query.value)
+)
+
+function alignToContextMenu() {
+  const triggerEl = triggerRef.value?.$el as HTMLElement | undefined
+  const rootMenu = triggerEl?.closest<HTMLElement>('[role="menu"]')
+  const rootSearch = rootMenu?.querySelector<HTMLElement>('[data-search-field]')
+  if (!triggerEl || !rootMenu || !rootSearch) return
+  const triggerTop = triggerEl.getBoundingClientRect().top
+  const rootRect = rootMenu.getBoundingClientRect()
+  const rootSearchTop = rootSearch.getBoundingClientRect().top
+  const contentPaddingTop = parseFloat(getComputedStyle(rootMenu).paddingTop)
+  alignOffset.value = computeSubmenuAlignOffset({
+    triggerTop,
+    rootSearchTop,
+    contentPaddingTop
+  })
+  maxHeight.value = computeSubmenuMaxHeight({
+    submenuTop: rootSearchTop - contentPaddingTop,
+    contextMenuHeight: rootRect.height,
+    viewportHeight: window.innerHeight,
+    margin: VIEWPORT_MARGIN
+  })
+}
+
+watch(open, (isOpen) => {
+  if (isOpen) alignToContextMenu()
+  else query.value = ''
+})
+
+function focusSearch() {
+  searchInput.value?.focus()
+}
+
+function submenuContent() {
+  return searchInput.value?.closest<HTMLElement>('[role="menu"]') ?? null
+}
+
+// Step into the open submenu, landing on its search field.
+function onTriggerKeydown(event: KeyboardEvent) {
+  if (event.key !== 'ArrowRight' && event.key !== 'Enter') return
+  event.preventDefault()
+  open.value = true
+  void nextTick(focusSearch)
+}
+
+// Close the preview when focus leaves the trigger to a sibling item rather
+// than into the submenu content.
+function onTriggerBlur(event: FocusEvent) {
+  const next = event.relatedTarget
+  if (next instanceof Node && submenuContent()?.contains(next)) return
+  open.value = false
+}
+
+function isPrintableKey(event: KeyboardEvent) {
+  return (
+    event.key.length === 1 &&
+    event.key !== ' ' &&
+    !event.ctrlKey &&
+    !event.metaKey &&
+    !event.altKey
+  )
+}
+
+// When the keyboard focus is on a submenu item, funnel printable keystrokes
+// into this submenu's search field instead of Reka's item type-ahead.
+function redirectTypingToSearch(event: KeyboardEvent) {
+  if (event.target === searchInput.value || !isPrintableKey(event)) return
+  event.preventDefault()
+  event.stopPropagation()
+  query.value += event.key
+  focusSearch()
+}
+
+// Reka refocuses the first item (scrolling the list to the top) whenever the
+// menu regains focus, which fires as the pointer leaves an item while scrolling.
+function onEntryFocus(event: Event) {
+  event.preventDefault()
+}
+
+function focusFirstNode(target: HTMLElement) {
+  const panel = target.closest<HTMLElement>('[role="menu"]')
+  panel
+    ?.querySelector<HTMLElement>('[role="menuitem"]:not([data-disabled])')
+    ?.focus()
+}
+
+function onSearchKeydown(event: KeyboardEvent) {
+  // Let Reka handle submenu/menu navigation keys natively.
+  if (event.key === 'Escape' || event.key === 'ArrowLeft') return
+  event.stopPropagation()
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    focusFirstNode(event.currentTarget as HTMLElement)
+  } else if (event.key === 'Enter') {
+    const first = filteredNodes.value[0]
+    if (first) emit('select', first)
+  }
+}
+</script>

src/components/searchbox/MiddleTruncate.test.ts

@@ -0,0 +1,150 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import MiddleTruncate from './MiddleTruncate.vue'
+import * as overflow from './isTextOverflowing'
+
+function stubRect(el: HTMLElement, rect: Partial<DOMRect>) {
+  el.getBoundingClientRect = () =>
+    ({
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+      ...rect
+    }) as DOMRect
+}
+
+describe('MiddleTruncate', () => {
+  beforeEach(() => {
+    Object.defineProperty(document.documentElement, 'clientWidth', {
+      configurable: true,
+      value: 1024
+    })
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    Reflect.deleteProperty(document.documentElement, 'clientWidth')
+  })
+
+  it('renders the full text inline', () => {
+    render(MiddleTruncate, { props: { text: 'KSampler' } })
+    expect(screen.getByText('KSampler')).toBeInTheDocument()
+  })
+
+  it('does not reveal a tooltip when the text fits', async () => {
+    vi.spyOn(overflow, 'measureTextWidth').mockReturnValue(0)
+    render(MiddleTruncate, { props: { text: 'KSampler' } })
+    await userEvent.hover(screen.getByText('KSampler'))
+    expect(screen.queryByRole('tooltip')).toBeNull()
+  })
+
+  it('reveals the full text on hover when truncated', async () => {
+    vi.spyOn(overflow, 'measureTextWidth').mockReturnValue(500)
+    const longName = 'ONNX Detector (SEGS/legacy) - use BBOXDetector'
+    render(MiddleTruncate, { props: { text: longName } })
+    const el = screen.getByText(longName)
+    stubRect(el, { left: 10, top: 20, width: 100, height: 20 })
+    await userEvent.hover(el)
+    expect(screen.getByRole('tooltip')).toHaveTextContent(longName)
+  })
+
+  it('reveals when hovering anywhere on the parent menu item', async () => {
+    vi.spyOn(overflow, 'measureTextWidth').mockReturnValue(500)
+    const longName = 'ONNX Detector (SEGS/legacy) - use BBOXDetector'
+    render({
+      components: { MiddleTruncate },
+      template: `<div role="menuitem"><MiddleTruncate text="${longName}" /></div>`
+    })
+    stubRect(screen.getByText(longName), {
+      left: 10,
+      top: 20,
+      width: 120,
+      height: 20
+    })
+    await userEvent.hover(screen.getByRole('menuitem'))
+    expect(screen.getByRole('tooltip')).toHaveTextContent(longName)
+  })
+
+  it('sizes the reveal to the parent menu item height', async () => {
+    vi.spyOn(overflow, 'measureTextWidth').mockReturnValue(500)
+    const nodeName = 'A long truncated node name'
+    render({
+      components: { MiddleTruncate },
+      template: `<div role="menuitem"><MiddleTruncate text="${nodeName}" /></div>`
+    })
+    stubRect(screen.getByText(nodeName), {
+      left: 10,
+      top: 20,
+      width: 100,
+      height: 20
+    })
+    stubRect(screen.getByRole('menuitem'), {
+      left: 0,
+      top: 10,
+      right: 200,
+      width: 200,
+      height: 36
+    })
+    await userEvent.hover(screen.getByText(nodeName))
+    expect(screen.getByRole('tooltip')).toHaveStyle({ height: '36px' })
+  })
+
+  it('anchors the reveal to the left when it fits to the right', async () => {
+    vi.spyOn(overflow, 'measureTextWidth').mockReturnValue(50)
+    const nodeName = 'Fits To The Right'
+    render({
+      components: { MiddleTruncate },
+      template: `<div role="menuitem"><MiddleTruncate text="${nodeName}" /></div>`
+    })
+    stubRect(screen.getByText(nodeName), {
+      left: 10,
+      top: 20,
+      width: 100,
+      height: 20
+    })
+    stubRect(screen.getByRole('menuitem'), {
+      left: 0,
+      top: 10,
+      right: 200,
+      width: 200,
+      height: 36
+    })
+    await userEvent.hover(screen.getByText(nodeName))
+    expect(screen.getByRole('tooltip')).toHaveStyle({ left: '10px' })
+  })
+
+  it('flips to a right anchor when revealing rightward would overflow', async () => {
+    vi.spyOn(overflow, 'measureTextWidth').mockReturnValue(600)
+    const nodeName = 'A very long node name near the right edge'
+    render({
+      components: { MiddleTruncate },
+      template: `<div role="menuitem" style="padding-right: 16px"><MiddleTruncate text="${nodeName}" /></div>`
+    })
+    stubRect(screen.getByText(nodeName), {
+      left: 850,
+      top: 20,
+      width: 150,
+      height: 20
+    })
+    stubRect(screen.getByRole('menuitem'), {
+      left: 840,
+      top: 10,
+      right: 1000,
+      width: 160,
+      height: 36
+    })
+    await userEvent.hover(screen.getByText(nodeName))
+    const tooltip = screen.getByRole('tooltip')
+    // Anchored to the item's right edge (1024 - 1000), independent of its padding.
+    expect(tooltip).toHaveStyle({ right: '24px' })
+    expect(tooltip).not.toHaveStyle({ left: '850px' })
+  })
+})

src/components/searchbox/MiddleTruncate.vue

@@ -0,0 +1,156 @@
+<template>
+  <span
+    ref="elRef"
+    v-bind="$attrs"
+    :class="cn('block min-w-0 truncate', revealed && 'text-transparent')"
+    @pointerenter="reveal"
+    @pointermove="reveal"
+    @pointerleave="onPointerLeave"
+    @focusin="reveal"
+    @focusout="hide"
+  >
+    {{ text }}
+  </span>
+  <Teleport to="body">
+    <span
+      v-if="revealed && revealStyle"
+      role="tooltip"
+      :class="
+        cn(
+          'pointer-events-none fixed z-99999 inline-flex items-center rounded-lg bg-interface-menu-component-surface-hovered pr-3 text-sm whitespace-nowrap text-base-foreground shadow-interface',
+          revealRect?.anchor === 'right' && 'pl-3'
+        )
+      "
+      :style="revealStyle"
+    >
+      {{ text }}
+    </span>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
+import { cn } from '@comfyorg/tailwind-utils'
+import { computed, ref } from 'vue'
+
+import { measureTextWidth } from './isTextOverflowing'
+
+defineOptions({ inheritAttrs: false })
+
+const { text } = defineProps<{ text: string }>()
+
+// Gap kept between the reveal and the viewport edge (mirrors the menu's
+// collision-padding) and the reveal's own far-side padding (`pl-3`/`pr-3`).
+const VIEWPORT_MARGIN = 8
+const REVEAL_PADDING = 12
+
+type RevealRect = {
+  top: number
+  height: number
+  minWidth: number
+  maxWidth: number
+  anchor: 'left' | 'right'
+  offset: number
+}
+
+const elRef = ref<HTMLElement>()
+const revealed = ref(false)
+const revealRect = ref<RevealRect>()
+
+const revealStyle = computed(() => {
+  const rect = revealRect.value
+  if (!rect) return undefined
+  return {
+    top: `${rect.top}px`,
+    height: `${rect.height}px`,
+    minWidth: `${rect.minWidth}px`,
+    maxWidth: `${rect.maxWidth}px`,
+    width: 'max-content',
+    [rect.anchor]: `${rect.offset}px`
+  }
+})
+
+const menuItem = computed(
+  () =>
+    elRef.value?.closest<HTMLElement>('[role="menuitem"]') ??
+    elRef.value?.parentElement ??
+    null
+)
+
+function getRevealRect(el: HTMLElement, textWidth: number): RevealRect {
+  const textRect = el.getBoundingClientRect()
+  const item = menuItem.value
+  const itemRect = item?.getBoundingClientRect()
+  const paddingRight = item
+    ? Number.parseFloat(getComputedStyle(item).paddingRight) || 0
+    : 0
+  const rightInset = itemRect ? itemRect.right - paddingRight : textRect.right
+  const itemRight = itemRect ? itemRect.right : textRect.right
+  const viewportWidth = document.documentElement.clientWidth
+  const top = itemRect?.top ?? textRect.top
+  const height = itemRect?.height ?? textRect.height
+  const minWidth = Math.max(textRect.width, rightInset - textRect.left)
+  const neededWidth = Math.max(minWidth, textWidth + REVEAL_PADDING)
+  const fitsRight =
+    textRect.left + neededWidth <= viewportWidth - VIEWPORT_MARGIN
+
+  if (fitsRight) {
+    return {
+      top,
+      height,
+      minWidth,
+      maxWidth: viewportWidth - VIEWPORT_MARGIN - textRect.left,
+      anchor: 'left',
+      offset: textRect.left
+    }
+  }
+  return {
+    top,
+    height,
+    minWidth,
+    maxWidth: itemRight - VIEWPORT_MARGIN,
+    anchor: 'right',
+    offset: Math.max(VIEWPORT_MARGIN, viewportWidth - itemRight)
+  }
+}
+
+function reveal() {
+  const el = elRef.value
+  if (!el) {
+    revealed.value = false
+    return
+  }
+  const textWidth = measureTextWidth(el)
+  if (textWidth <= el.clientWidth + 0.5) {
+    revealed.value = false
+    return
+  }
+  revealRect.value = getRevealRect(el, textWidth)
+  revealed.value = true
+}
+
+function hide() {
+  revealed.value = false
+}
+
+function isStillOverMenuItem(related: EventTarget | null) {
+  const item = menuItem.value
+  return (
+    related instanceof Node &&
+    item != null &&
+    (item === related || item.contains(related))
+  )
+}
+
+function onPointerLeave(event: PointerEvent) {
+  if (isStillOverMenuItem(event.relatedTarget)) return
+  hide()
+}
+
+useEventListener(menuItem, 'pointerenter', reveal)
+useEventListener(menuItem, 'pointermove', reveal)
+useEventListener(menuItem, 'pointerleave', (event: PointerEvent) => {
+  if (isStillOverMenuItem(event.relatedTarget)) return
+  hide()
+})
+</script>

src/components/searchbox/NodeSearchBoxPopover.test.ts

@@ -6,10 +6,14 @@ import { computed, defineComponent, nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import { CORE_SETTINGS } from '@/platform/settings/constants/coreSettings'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import type { Settings } from '@/schemas/apiSchema'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import type { FuseFilter, FuseFilterWithValue } from '@/utils/fuseUtil'
 
+import { RootCategory } from '@/components/searchbox/v2/rootCategories'
+
 import NodeSearchBoxPopover from './NodeSearchBoxPopover.vue'
 
 const coreSettingsById = Object.fromEntries(CORE_SETTINGS.map((s) => [s.id, s]))
@@ -51,6 +55,7 @@ describe('NodeSearchBoxPopover', () => {
     let emitAddFilter: EmitAddFilter | null = null
     let emitAddNodeV1: EmitAddNode | null = null
     let emitAddNodeV2: EmitAddNode | null = null
+    let emitSelectNode: ((nodeDef: ComfyNodeDefImpl) => void) | null = null
 
     const NodeSearchBoxStub = defineComponent({
       name: 'NodeSearchBox',
@@ -82,6 +87,17 @@ describe('NodeSearchBoxPopover', () => {
       template: '<div data-testid="search-content-v2"></div>'
     })
 
+    const LinkReleaseContextMenuStub = defineComponent({
+      name: 'LinkReleaseContextMenu',
+      props: { context: { type: Object, default: null } },
+      emits: ['selectNode', 'addReroute', 'dismiss'],
+      setup(_, { emit }) {
+        emitSelectNode = (nodeDef) => emit('selectNode', nodeDef)
+        return {}
+      },
+      template: '<div data-testid="link-release-menu" />'
+    })
+
     const pinia = createTestingPinia({
       stubActions: false,
       initialState: {
@@ -99,6 +115,7 @@ describe('NodeSearchBoxPopover', () => {
         stubs: {
           NodeSearchBox: NodeSearchBoxStub,
           NodeSearchContent: NodeSearchContentStub,
+          LinkReleaseContextMenu: LinkReleaseContextMenuStub,
           NodePreviewCard: true,
           Dialog: {
             template: '<div><slot name="container" /></div>',
@@ -122,6 +139,11 @@ describe('NodeSearchBoxPopover', () => {
         if (!emitAddNodeV2)
           throw new Error('NodeSearchContent stub did not mount')
         return emitAddNodeV2
+      },
+      get emitSelectNode() {
+        if (!emitSelectNode)
+          throw new Error('LinkReleaseContextMenu stub did not mount')
+        return emitSelectNode
       }
     }
   }
@@ -276,4 +298,122 @@ describe('NodeSearchBoxPopover', () => {
       )
     })
   })
+
+  describe('selecting a node from the link-release menu', () => {
+    function setupCanvas() {
+      const selectNode = vi.fn()
+      const canvasStore = useCanvasStore()
+      canvasStore.canvas = {
+        graph: { nodes: [] },
+        allow_searchbox: false,
+        setDirty: vi.fn(),
+        selectNode,
+        linkConnector: {
+          events: new EventTarget(),
+          reset: vi.fn(),
+          disconnectLinks: vi.fn(),
+          connectToNode: vi.fn()
+        }
+      } as unknown as ReturnType<typeof useCanvasStore>['canvas']
+      return { selectNode }
+    }
+
+    it('auto-selects the placed node on the canvas', async () => {
+      const node = { id: 7 }
+      const { emitSelectNode } = renderComponent({
+        'Comfy.NodeSearchBoxImpl': 'default'
+      })
+      const { selectNode } = setupCanvas()
+      addNodeOnGraph.mockReturnValue(node)
+
+      emitSelectNode({ name: 'KSampler' } as ComfyNodeDefImpl)
+      await nextTick()
+
+      expect(selectNode).toHaveBeenCalledWith(node)
+    })
+
+    it('does not select when the node could not be created', async () => {
+      const { emitSelectNode } = renderComponent({
+        'Comfy.NodeSearchBoxImpl': 'default'
+      })
+      const { selectNode } = setupCanvas()
+      addNodeOnGraph.mockReturnValue(null)
+
+      emitSelectNode({ name: 'KSampler' } as ComfyNodeDefImpl)
+      await nextTick()
+
+      expect(selectNode).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('defaultRootFilter on dialog open', () => {
+    function setGraphNodes(nodes: unknown[]) {
+      const canvasStore = useCanvasStore()
+      canvasStore.canvas = {
+        graph: { nodes },
+        allow_searchbox: false,
+        setDirty: vi.fn(),
+        linkConnector: {
+          events: new EventTarget(),
+          reset: vi.fn(),
+          disconnectLinks: vi.fn()
+        }
+      } as unknown as ReturnType<typeof useCanvasStore>['canvas']
+    }
+
+    async function openSearch() {
+      useSearchBoxStore().visible = true
+      await nextTick()
+    }
+
+    it('defaults to Essentials when the graph is empty', async () => {
+      renderComponent({ 'Comfy.NodeSearchBoxImpl': 'default' })
+      setGraphNodes([])
+      await openSearch()
+
+      expect(screen.getByTestId('search-content-v2')).toHaveAttribute(
+        'data-default-root-filter',
+        RootCategory.Essentials
+      )
+    })
+
+    it('defaults to Essentials when the canvas is not yet available', async () => {
+      renderComponent({ 'Comfy.NodeSearchBoxImpl': 'default' })
+      await openSearch()
+
+      expect(screen.getByTestId('search-content-v2')).toHaveAttribute(
+        'data-default-root-filter',
+        RootCategory.Essentials
+      )
+    })
+
+    it('defaults to null when the graph has nodes', async () => {
+      renderComponent({ 'Comfy.NodeSearchBoxImpl': 'default' })
+      setGraphNodes([{ id: 1 }])
+      await openSearch()
+
+      expect(screen.getByTestId('search-content-v2')).not.toHaveAttribute(
+        'data-default-root-filter'
+      )
+    })
+
+    it('re-evaluates each time the dialog opens', async () => {
+      renderComponent({ 'Comfy.NodeSearchBoxImpl': 'default' })
+
+      setGraphNodes([])
+      await openSearch()
+      expect(screen.getByTestId('search-content-v2')).toHaveAttribute(
+        'data-default-root-filter',
+        RootCategory.Essentials
+      )
+
+      useSearchBoxStore().visible = false
+      await nextTick()
+      setGraphNodes([{ id: 1 }])
+      await openSearch()
+      expect(screen.getByTestId('search-content-v2')).not.toHaveAttribute(
+        'data-default-root-filter'
+      )
+    })
+  })
 })

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -51,6 +51,13 @@
         />
       </template>
     </Dialog>
+    <LinkReleaseContextMenu
+      ref="linkReleaseMenu"
+      :context="linkReleaseContext"
+      @select-node="connectNodeFromMenu"
+      @add-reroute="addRerouteFromMenu"
+      @dismiss="reset"
+    />
   </div>
 </template>
 
@@ -62,7 +69,11 @@ import { computed, ref, toRaw, watch, watchEffect } from 'vue'
 
 import type { Point } from '@/lib/litegraph/src/interfaces'
 import type { LiteGraphCanvasEvent } from '@/lib/litegraph/src/litegraph'
-import { LGraphNode, LiteGraph } from '@/lib/litegraph/src/litegraph'
+import {
+  LGraphNode,
+  LiteGraph,
+  isNodeSlot
+} from '@/lib/litegraph/src/litegraph'
 import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useSurveyFeatureTracking } from '@/platform/surveys/useSurveyFeatureTracking'
@@ -78,11 +89,12 @@ import type { FuseFilterWithValue } from '@/utils/fuseUtil'
 
 import NodePreviewCard from '@/components/node/NodePreviewCard.vue'
 
+import LinkReleaseContextMenu from './LinkReleaseContextMenu.vue'
+import type { LinkReleaseContext } from './linkReleaseMenuModel'
 import NodeSearchContent from './v2/NodeSearchContent.vue'
 import NodeSearchBox from './NodeSearchBox.vue'
 
 let triggerEvent: CanvasPointerEvent | null = null
-let listenerController: AbortController | null = null
 let disconnectOnReset = false
 
 const settingStore = useSettingStore()
@@ -103,6 +115,8 @@ const enableNodePreview = computed(
     settingStore.get('Comfy.NodeSearchBoxImpl.NodePreview') &&
     windowWidth.value >= MIN_WIDTH_FOR_PREVIEW
 )
+const linkReleaseMenu = ref<InstanceType<typeof LinkReleaseContextMenu>>()
+const linkReleaseContext = ref<LinkReleaseContext | null>(null)
 function getNewNodeLocation(): Point {
   return triggerEvent
     ? [triggerEvent.canvasX, triggerEvent.canvasY]
@@ -129,16 +143,19 @@ function closeDialog() {
 }
 const canvasStore = useCanvasStore()
 
-function addNode(nodeDef: ComfyNodeDefImpl, dragEvent?: MouseEvent) {
-  const followCursor = settingStore.get('Comfy.NodeSearchBoxImpl.FollowCursor')
+function connectNewNode(
+  nodeDef: ComfyNodeDefImpl,
+  options: { ghost?: boolean; dragEvent?: MouseEvent } = {}
+): LGraphNode | null {
+  const { ghost = false, dragEvent } = options
   const node = withNodeAddSource('search_modal', () =>
     litegraphService.addNodeOnGraph(
       nodeDef,
       { pos: getNewNodeLocation() },
-      { ghost: useSearchBoxV2.value && followCursor, dragEvent }
+      { ghost, dragEvent }
     )
   )
-  if (!node) return
+  if (!node) return null
 
   if (disconnectOnReset && triggerEvent) {
     canvasStore.getCanvas().linkConnector.connectToNode(node, triggerEvent)
@@ -150,6 +167,16 @@ function addNode(nodeDef: ComfyNodeDefImpl, dragEvent?: MouseEvent) {
 
   // Notify changeTracker - new step should be added
   useWorkflowStore().activeWorkflow?.changeTracker?.captureCanvasState()
+
+  return node
+}
+
+function addNode(nodeDef: ComfyNodeDefImpl, dragEvent?: MouseEvent) {
+  const followCursor = settingStore.get('Comfy.NodeSearchBoxImpl.FollowCursor')
+  connectNewNode(nodeDef, {
+    ghost: useSearchBoxV2.value && followCursor,
+    dragEvent
+  })
   window.requestAnimationFrame(closeDialog)
 }
 
@@ -202,62 +229,46 @@ function showContextMenu(e: CanvasPointerEvent) {
   const firstLink = getFirstLink()
   if (!firstLink) return
 
-  const { node, fromSlot, toType } = firstLink
-  const commonOptions = {
-    e,
-    allow_searchbox: true,
-    showSearchBox: () => {
-      cancelResetOnContextClose()
-      showSearchBox(e)
-    }
+  const { fromSlot, toType } = firstLink
+  linkReleaseContext.value = {
+    dataType: fromSlot.type?.toString() ?? '',
+    slotName: fromSlot.name ?? '',
+    isFromOutput: toType === 'input'
   }
-  const afterRerouteId = firstLink.fromReroute?.id
-  const connectionOptions =
-    toType === 'input'
-      ? { nodeFrom: node, slotFrom: fromSlot, afterRerouteId }
-      : { nodeTo: node, slotTo: fromSlot, afterRerouteId }
-
-  const canvas = canvasStore.getCanvas()
-  const menu = canvas.showConnectionMenu({
-    ...connectionOptions,
-    ...commonOptions
-  })
-
-  if (!menu) {
-    console.warn('No menu was returned from showConnectionMenu')
-    return
-  }
-
   triggerEvent = e
-  listenerController = new AbortController()
-  const { signal } = listenerController
-  const options = { once: true, signal }
 
-  // Connect the node after it is created via context menu
-  useEventListener(
-    canvas.canvas,
-    'connect-new-default-node',
-    (createEvent) => {
-      if (!(createEvent instanceof CustomEvent))
-        throw new Error('Invalid event')
+  // Hide the dangling link while the menu holds the connection open; the real
+  // edge reappears once a node is committed (reset clears this flag).
+  const canvas = canvasStore.getCanvas()
+  canvas.linkConnector.renderLinksHidden = true
+  canvas.setDirty(true, true)
 
-      const node: unknown = createEvent.detail?.node
-      if (!(node instanceof LGraphNode)) throw new Error('Invalid node')
+  linkReleaseMenu.value?.show(e)
+}
 
-      disconnectOnReset = false
-      createEvent.preventDefault()
-      canvas.linkConnector.connectToNode(node, e)
-    },
-    options
-  )
+function connectNodeFromMenu(nodeDef: ComfyNodeDefImpl) {
+  const node = connectNewNode(nodeDef)
+  if (node) canvasStore.getCanvas().selectNode(node)
+  reset()
+}
 
-  // Reset when the context menu is closed
-  const cancelResetOnContextClose = useEventListener(
-    menu.controller.signal,
-    'abort',
-    reset,
-    options
-  )
+function addRerouteFromMenu() {
+  const firstLink = getFirstLink()
+  const node = firstLink?.node
+  if (
+    firstLink &&
+    triggerEvent &&
+    node instanceof LGraphNode &&
+    isNodeSlot(firstLink.fromSlot)
+  ) {
+    node.connectFloatingReroute(
+      [triggerEvent.canvasX, triggerEvent.canvasY],
+      firstLink.fromSlot,
+      firstLink.fromReroute?.id
+    )
+    useWorkflowStore().activeWorkflow?.changeTracker?.captureCanvasState()
+  }
+  reset()
 }
 
 // Disable litegraph's default behavior of release link and search box.
@@ -333,25 +344,32 @@ function handleDroppedOnCanvas(e: CustomEvent<CanvasPointerEvent>) {
 
 // Resets litegraph state
 function reset() {
-  listenerController?.abort()
-  listenerController = null
   triggerEvent = null
 
   const canvas = canvasStore.getCanvas()
   canvas.linkConnector.events.removeEventListener('reset', preventDefault)
   if (disconnectOnReset) canvas.linkConnector.disconnectLinks()
+  disconnectOnReset = false
 
   canvas.linkConnector.reset()
   canvas.setDirty(true, true)
 }
 
+// Tears down a held link-release session synchronously so a new link drag can
+// take over without hitting LinkConnector's "Already dragging links" guard.
+function cancelLinkRelease() {
+  linkReleaseMenu.value?.hide()
+  visible.value = false
+  reset()
+}
+
 // Reset connecting links when the search box is closed
 watch(visible, () => {
   if (!visible.value) reset()
 })
 
 useEventListener(document, 'litegraph:canvas', canvasEventHandler)
-defineExpose({ showSearchBox })
+defineExpose({ showSearchBox, cancelLinkRelease })
 </script>
 
 <style>

src/components/searchbox/isTextOverflowing.test.ts

@@ -0,0 +1,45 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { isTextOverflowing } from './isTextOverflowing'
+
+const CHAR_WIDTH = 10
+
+function setup(text: string, contentWidth: number) {
+  const el = document.createElement('span')
+  el.textContent = text
+  Object.defineProperty(el, 'clientWidth', {
+    configurable: true,
+    value: contentWidth
+  })
+  vi.spyOn(window, 'getComputedStyle').mockReturnValue(
+    {} as CSSStyleDeclaration
+  )
+  vi.spyOn(
+    HTMLSpanElement.prototype,
+    'getBoundingClientRect'
+  ).mockImplementation(function (this: HTMLSpanElement) {
+    return { width: (this.textContent?.length ?? 0) * CHAR_WIDTH } as DOMRect
+  })
+  return el
+}
+
+describe('isTextOverflowing', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('returns false when the text fits the content width', () => {
+    const el = setup('KSampler', 200)
+    expect(isTextOverflowing(el)).toBe(false)
+  })
+
+  it('returns true when the full text is wider than the content width', () => {
+    const el = setup('ONNX Detector (SEGS/legacy) - use BBOXDetector', 120)
+    expect(isTextOverflowing(el)).toBe(true)
+  })
+
+  it('returns false for a zero-width element', () => {
+    const el = setup('anything', 0)
+    expect(isTextOverflowing(el)).toBe(false)
+  })
+})

src/components/searchbox/isTextOverflowing.ts

@@ -0,0 +1,46 @@
+const FONT_PROPS = [
+  'fontStyle',
+  'fontVariant',
+  'fontWeight',
+  'fontStretch',
+  'fontSize',
+  'fontFamily',
+  'letterSpacing',
+  'textTransform',
+  'wordSpacing'
+] as const
+
+/**
+ * Measures the full, unclipped width of an element's text by rendering it in a
+ * hidden clone that copies the element's font metrics. `scrollWidth` is
+ * unreliable for `text-overflow: ellipsis` in Chrome (it often reports equal to
+ * `clientWidth`), so the clone is the source of truth.
+ */
+export function measureTextWidth(el: HTMLElement): number {
+  const style = getComputedStyle(el)
+  const clone = document.createElement('span')
+  clone.textContent = el.textContent ?? ''
+  clone.style.position = 'fixed'
+  clone.style.top = '-9999px'
+  clone.style.left = '-9999px'
+  clone.style.visibility = 'hidden'
+  clone.style.whiteSpace = 'nowrap'
+  for (const prop of FONT_PROPS) clone.style[prop] = style[prop]
+
+  document.body.appendChild(clone)
+  const textWidth = clone.getBoundingClientRect().width
+  clone.remove()
+
+  return textWidth
+}
+
+/**
+ * Detects whether a single-line, ellipsis-truncated element is actually
+ * clipping its text by comparing its full text width against the available
+ * content width.
+ */
+export function isTextOverflowing(el: HTMLElement): boolean {
+  const contentWidth = el.clientWidth
+  if (contentWidth <= 0) return false
+  return measureTextWidth(el) > contentWidth + 0.5
+}

src/components/searchbox/linkReleaseMenuModel.test.ts

@@ -0,0 +1,317 @@
+import { describe, expect, it } from 'vitest'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { NodeSourceType } from '@/types/nodeSource'
+
+import {
+  buildLinkReleaseNodeCategories,
+  computeContextMenuTop,
+  computeSubmenuAlignOffset,
+  computeSubmenuMaxHeight,
+  estimateLinkReleaseMenuHeight,
+  filterNodesByName,
+  getLinkReleaseHeaderLabel,
+  getLinkReleaseSuggestions,
+  groupLinkReleaseSearchResults,
+  searchLinkReleaseNodes
+} from './linkReleaseMenuModel'
+import type { LinkReleaseContext } from './linkReleaseMenuModel'
+
+function coreNode(name: string, display_name = name): ComfyNodeDefImpl {
+  return {
+    name,
+    display_name,
+    nodeSource: { type: NodeSourceType.Core },
+    api_node: false
+  } as ComfyNodeDefImpl
+}
+
+function customNode(name: string, display_name = name): ComfyNodeDefImpl {
+  return {
+    name,
+    display_name,
+    nodeSource: { type: NodeSourceType.CustomNodes },
+    api_node: false
+  } as ComfyNodeDefImpl
+}
+
+function partnerNode(name: string, display_name = name): ComfyNodeDefImpl {
+  return {
+    name,
+    display_name,
+    nodeSource: { type: NodeSourceType.Core },
+    api_node: true
+  } as ComfyNodeDefImpl
+}
+
+const ksampler = coreNode('KSampler')
+const vaeDecode = coreNode('VAEDecode', 'VAE Decode')
+const rerouteNode = coreNode('Reroute')
+
+function createContext(
+  overrides: Partial<LinkReleaseContext> = {}
+): LinkReleaseContext {
+  return {
+    dataType: 'MODEL',
+    slotName: 'model',
+    isFromOutput: true,
+    ...overrides
+  }
+}
+
+describe('getLinkReleaseHeaderLabel', () => {
+  it('combines slot name and data type', () => {
+    const label = getLinkReleaseHeaderLabel(
+      createContext({ slotName: 'model', dataType: 'MODEL' })
+    )
+    expect(label).toBe('model | MODEL')
+  })
+
+  it('falls back to whichever value is present', () => {
+    const onlyType = getLinkReleaseHeaderLabel(
+      createContext({ slotName: '', dataType: 'IMAGE' })
+    )
+    const onlyName = getLinkReleaseHeaderLabel(
+      createContext({ slotName: 'clip', dataType: '' })
+    )
+    expect(onlyType).toBe('IMAGE')
+    expect(onlyName).toBe('clip')
+  })
+})
+
+describe('getLinkReleaseSuggestions', () => {
+  it('excludes the Reroute node', () => {
+    const suggestions = getLinkReleaseSuggestions([rerouteNode, vaeDecode])
+    expect(suggestions.map((n) => n.name)).toEqual(['VAEDecode'])
+  })
+
+  it('preserves the incoming order of remaining nodes', () => {
+    const suggestions = getLinkReleaseSuggestions([vaeDecode, ksampler])
+    expect(suggestions.map((n) => n.name)).toEqual(['VAEDecode', 'KSampler'])
+  })
+})
+
+describe('buildLinkReleaseNodeCategories', () => {
+  it('groups nodes by source into comfy, extensions and partner buckets', () => {
+    const ext = customNode('ExtNode', 'Ext Node')
+    const partner = partnerNode('PartnerNode', 'Partner Node')
+
+    const categories = buildLinkReleaseNodeCategories([ksampler, ext, partner])
+    const byKey = Object.fromEntries(categories.map((c) => [c.key, c]))
+
+    expect(byKey.comfy.nodes.map((n) => n.name)).toContain('KSampler')
+    expect(byKey.extensions.nodes.map((n) => n.name)).toContain('ExtNode')
+    expect(byKey.partner.nodes.map((n) => n.name)).toContain('PartnerNode')
+  })
+
+  it('omits empty buckets', () => {
+    const categories = buildLinkReleaseNodeCategories([ksampler])
+    expect(categories.map((c) => c.key)).toEqual(['comfy'])
+  })
+
+  it('orders buckets comfy, extensions, partner', () => {
+    const categories = buildLinkReleaseNodeCategories([
+      partnerNode('P'),
+      customNode('E'),
+      coreNode('C')
+    ])
+    expect(categories.map((c) => c.key)).toEqual([
+      'comfy',
+      'extensions',
+      'partner'
+    ])
+  })
+
+  it('sorts nodes alphabetically by display name within a bucket', () => {
+    const categories = buildLinkReleaseNodeCategories([
+      coreNode('B'),
+      coreNode('A')
+    ])
+    expect(categories[0].nodes.map((n) => n.display_name)).toEqual(['A', 'B'])
+  })
+
+  it('classifies api-category nodes as partner', () => {
+    const apiNode = {
+      name: 'ApiThing',
+      display_name: 'Api Thing',
+      nodeSource: { type: NodeSourceType.Core },
+      api_node: false,
+      category: 'api node/openai'
+    } as ComfyNodeDefImpl
+
+    const categories = buildLinkReleaseNodeCategories([apiNode])
+    expect(categories.map((c) => c.key)).toEqual(['partner'])
+  })
+})
+
+describe('filterNodesByName', () => {
+  it('returns all nodes when query is blank', () => {
+    expect(filterNodesByName([ksampler, vaeDecode], '  ')).toHaveLength(2)
+  })
+
+  it('matches display name case-insensitively', () => {
+    const result = filterNodesByName([ksampler, vaeDecode], 'vae')
+    expect(result.map((n) => n.name)).toEqual(['VAEDecode'])
+  })
+})
+
+describe('groupLinkReleaseSearchResults', () => {
+  const categories = buildLinkReleaseNodeCategories([
+    coreNode('LoadImage', 'Load Image'),
+    customNode('ImageBlend', 'Image Blend'),
+    partnerNode('ImageGen', 'Image Gen'),
+    coreNode('KSampler')
+  ])
+
+  it('returns no groups for a blank query', () => {
+    expect(groupLinkReleaseSearchResults(categories, '   ')).toEqual([])
+  })
+
+  it('groups matching nodes by category', () => {
+    const groups = groupLinkReleaseSearchResults(categories, 'image')
+    expect(groups.map((g) => g.category.key)).toEqual([
+      'comfy',
+      'extensions',
+      'partner'
+    ])
+    expect(groups.map((g) => g.nodes.map((n) => n.name))).toEqual([
+      ['LoadImage'],
+      ['ImageBlend'],
+      ['ImageGen']
+    ])
+  })
+
+  it('omits categories with no matches', () => {
+    const groups = groupLinkReleaseSearchResults(categories, 'ksampler')
+    expect(groups.map((g) => g.category.key)).toEqual(['comfy'])
+    expect(groups[0].nodes.map((n) => n.name)).toEqual(['KSampler'])
+  })
+})
+
+describe('searchLinkReleaseNodes', () => {
+  const categories = buildLinkReleaseNodeCategories([
+    coreNode('LoadImage', 'Load Image'),
+    customNode('ImageBlend', 'Image Blend'),
+    partnerNode('ImageGen', 'Image Gen'),
+    coreNode('KSampler')
+  ])
+
+  it('returns no matches for a blank query', () => {
+    expect(searchLinkReleaseNodes(categories, '   ')).toEqual([])
+  })
+
+  it('flattens matching nodes across categories, tagged with their category', () => {
+    const matches = searchLinkReleaseNodes(categories, 'image')
+    expect(matches.map((m) => m.node.name)).toEqual([
+      'LoadImage',
+      'ImageBlend',
+      'ImageGen'
+    ])
+    expect(matches.map((m) => m.category.key)).toEqual([
+      'comfy',
+      'extensions',
+      'partner'
+    ])
+  })
+
+  it('matches display name case-insensitively', () => {
+    const matches = searchLinkReleaseNodes(categories, 'ksampler')
+    expect(matches.map((m) => m.node.name)).toEqual(['KSampler'])
+    expect(matches[0].category.key).toBe('comfy')
+  })
+
+  it('returns an empty list when nothing matches', () => {
+    expect(searchLinkReleaseNodes(categories, 'zzz')).toEqual([])
+  })
+})
+
+describe('computeSubmenuAlignOffset', () => {
+  it('lifts the submenu up to the root search field for a trigger below it', () => {
+    const offset = computeSubmenuAlignOffset({
+      triggerTop: 200,
+      rootSearchTop: 48,
+      contentPaddingTop: 4
+    })
+    expect(offset).toBe(-156)
+  })
+
+  it('offsets only by the content padding when the trigger sits at the search field', () => {
+    const offset = computeSubmenuAlignOffset({
+      triggerTop: 48,
+      rootSearchTop: 48,
+      contentPaddingTop: 4
+    })
+    expect(offset).toBe(-4)
+  })
+})
+
+describe('computeSubmenuMaxHeight', () => {
+  it('grows to the space below when there is ample room', () => {
+    const height = computeSubmenuMaxHeight({
+      submenuTop: 100,
+      contextMenuHeight: 420,
+      viewportHeight: 1000,
+      margin: 8
+    })
+    expect(height).toBe(892)
+  })
+
+  it('floors at the context menu height when room below is smaller', () => {
+    const height = computeSubmenuMaxHeight({
+      submenuTop: 600,
+      contextMenuHeight: 420,
+      viewportHeight: 1000,
+      margin: 8
+    })
+    expect(height).toBe(420)
+  })
+})
+
+describe('estimateLinkReleaseMenuHeight', () => {
+  it('estimates a typical default layout with header, suggestions, categories and reroute', () => {
+    const height = estimateLinkReleaseMenuHeight({
+      hasHeader: true,
+      suggestionCount: 4,
+      categoryCount: 3,
+      searchResultCount: 0,
+      showReroute: true
+    })
+    expect(height).toBe(468)
+  })
+
+  it('estimates search results instead of the default sections', () => {
+    const height = estimateLinkReleaseMenuHeight({
+      hasHeader: true,
+      suggestionCount: 4,
+      categoryCount: 3,
+      searchResultCount: 5,
+      searchResultGroupCount: 2,
+      showReroute: false
+    })
+    expect(height).toBe(280)
+  })
+})
+
+describe('computeContextMenuTop', () => {
+  const base = {
+    menuHeight: 468,
+    viewportHeight: 1000,
+    margin: 8,
+    sideOffset: 4
+  }
+
+  it('bottom-anchors when the cursor is near the viewport bottom', () => {
+    const top = computeContextMenuTop({ ...base, cursorY: 900 })
+    expect(top).toBe(524)
+  })
+
+  it('opens at the cursor when there is room below', () => {
+    const top = computeContextMenuTop({ ...base, cursorY: 100 })
+    expect(top).toBe(104)
+  })
+
+  it('pins to the top margin when the cursor is above the viewport', () => {
+    const top = computeContextMenuTop({ ...base, cursorY: -10 })
+    expect(top).toBe(8)
+  })
+})

src/components/searchbox/linkReleaseMenuModel.ts

@@ -0,0 +1,264 @@
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { NodeSourceType } from '@/types/nodeSource'
+
+export interface LinkReleaseContext {
+  /** The data type of the slot the link was dragged from (e.g. "MODEL"). */
+  dataType: string
+  /** The name of the slot the link was dragged from (e.g. "model"). */
+  slotName: string
+  /**
+   * Whether the released link originates from an output slot, meaning the new
+   * node will be connected to via one of its inputs.
+   */
+  isFromOutput: boolean
+}
+
+type LinkReleaseCategoryKey = 'comfy' | 'extensions' | 'partner'
+
+export interface LinkReleaseNodeCategory {
+  key: LinkReleaseCategoryKey
+  /** i18n key for the group heading. */
+  labelKey: string
+  /** Iconify class shown beside the group label. */
+  icon: string
+  /** Nodes in the group, sorted alphabetically by display name. */
+  nodes: ComfyNodeDefImpl[]
+}
+
+const CATEGORY_META: Record<
+  LinkReleaseCategoryKey,
+  { labelKey: string; icon: string }
+> = {
+  comfy: { labelKey: 'contextMenu.Comfy Nodes', icon: 'icon-[lucide--box]' },
+  extensions: {
+    labelKey: 'contextMenu.Extensions',
+    icon: 'icon-[lucide--puzzle]'
+  },
+  partner: {
+    labelKey: 'contextMenu.Partner Nodes',
+    icon: 'icon-[lucide--handshake]'
+  }
+}
+
+const CATEGORY_ORDER: LinkReleaseCategoryKey[] = [
+  'comfy',
+  'extensions',
+  'partner'
+]
+
+export function getLinkReleaseHeaderLabel(context: LinkReleaseContext): string {
+  const { slotName, dataType } = context
+  if (slotName && dataType) return `${slotName} | ${dataType}`
+  return slotName || dataType
+}
+
+function classifyNode(node: ComfyNodeDefImpl): LinkReleaseCategoryKey {
+  if (node.api_node || node.category?.startsWith('api node')) return 'partner'
+  if (
+    node.nodeSource.type === NodeSourceType.Core ||
+    node.nodeSource.type === NodeSourceType.Essentials
+  ) {
+    return 'comfy'
+  }
+  return 'extensions'
+}
+
+function byDisplayName(a: ComfyNodeDefImpl, b: ComfyNodeDefImpl): number {
+  return a.display_name.localeCompare(b.display_name)
+}
+
+/**
+ * Group slot-compatible nodes into source buckets for the cascading menu.
+ * Empty buckets are omitted and each bucket's nodes are sorted by display name.
+ */
+export function buildLinkReleaseNodeCategories(
+  compatibleNodes: ComfyNodeDefImpl[]
+): LinkReleaseNodeCategory[] {
+  const buckets: Record<LinkReleaseCategoryKey, ComfyNodeDefImpl[]> = {
+    comfy: [],
+    extensions: [],
+    partner: []
+  }
+
+  for (const node of compatibleNodes) {
+    buckets[classifyNode(node)].push(node)
+  }
+
+  return CATEGORY_ORDER.filter((key) => buckets[key].length > 0).map((key) => ({
+    key,
+    labelKey: CATEGORY_META[key].labelKey,
+    icon: CATEGORY_META[key].icon,
+    nodes: [...buckets[key]].sort(byDisplayName)
+  }))
+}
+
+/** Quick-add suggestions for the released slot, excluding the Reroute node. */
+export function getLinkReleaseSuggestions(
+  defaultNodeDefs: ComfyNodeDefImpl[]
+): ComfyNodeDefImpl[] {
+  return defaultNodeDefs.filter((nodeDef) => nodeDef.name !== 'Reroute')
+}
+
+/** Case-insensitive filter of a node list by display name. */
+export function filterNodesByName(
+  nodes: ComfyNodeDefImpl[],
+  query: string
+): ComfyNodeDefImpl[] {
+  const trimmed = query.trim().toLowerCase()
+  if (!trimmed) return nodes
+  return nodes.filter((nodeDef) =>
+    nodeDef.display_name.toLowerCase().includes(trimmed)
+  )
+}
+
+/** A node surfaced by the root flat-value search, tagged with its category. */
+export interface LinkReleaseNodeMatch {
+  category: LinkReleaseNodeCategory
+  node: ComfyNodeDefImpl
+}
+
+export interface LinkReleaseSearchResultGroup {
+  category: LinkReleaseNodeCategory
+  nodes: ComfyNodeDefImpl[]
+}
+
+/**
+ * Group matching nodes by category for the root flat-value search. Empty
+ * categories are omitted; category order and per-category display-name order
+ * are preserved.
+ */
+export function groupLinkReleaseSearchResults(
+  categories: LinkReleaseNodeCategory[],
+  query: string
+): LinkReleaseSearchResultGroup[] {
+  const trimmed = query.trim().toLowerCase()
+  if (!trimmed) return []
+  return categories
+    .map((category) => ({
+      category,
+      nodes: category.nodes.filter((node) =>
+        node.display_name.toLowerCase().includes(trimmed)
+      )
+    }))
+    .filter((group) => group.nodes.length > 0)
+}
+
+/**
+ * Flat-value search across every category submenu: when the root search has
+ * text we surface matching nodes inline (tagged with their category) so a node
+ * can be picked straight from the root without first drilling into a submenu.
+ * Results preserve category order, then per-category display-name order.
+ */
+export function searchLinkReleaseNodes(
+  categories: LinkReleaseNodeCategory[],
+  query: string
+): LinkReleaseNodeMatch[] {
+  const matches: LinkReleaseNodeMatch[] = []
+  for (const group of groupLinkReleaseSearchResults(categories, query)) {
+    for (const node of group.nodes) {
+      matches.push({ category: group.category, node })
+    }
+  }
+  return matches
+}
+
+/**
+ * Vertical `alignOffset` (px) that makes a category submenu open level with the
+ * root menu rather than with the hovered trigger row. Positioning the submenu's
+ * top one content-padding above the root search field lines the submenu's own
+ * search field up with the root search field, since both menus share the same
+ * content padding and search-field markup.
+ */
+export function computeSubmenuAlignOffset(metrics: {
+  triggerTop: number
+  rootSearchTop: number
+  contentPaddingTop: number
+}): number {
+  const { triggerTop, rootSearchTop, contentPaddingTop } = metrics
+  return rootSearchTop - contentPaddingTop - triggerTop
+}
+
+/**
+ * Max height (px) for a category submenu pinned level with the root menu. The
+ * panel grows into the viewport space below its top, but never shrinks below
+ * the root menu's height so it can always be at least as tall as the context
+ * menu even when there is little room beneath it.
+ */
+export function computeSubmenuMaxHeight(metrics: {
+  submenuTop: number
+  contextMenuHeight: number
+  viewportHeight: number
+  margin: number
+}): number {
+  const { submenuTop, contextMenuHeight, viewportHeight, margin } = metrics
+  return Math.max(contextMenuHeight, viewportHeight - submenuTop - margin)
+}
+
+const CONTENT_PADDING_Y = 8
+const HEADER_HEIGHT = 36
+const SEARCH_HEIGHT = 40
+const SEPARATOR_HEIGHT = 8
+const SECTION_LABEL_HEIGHT = 36
+const MENU_ITEM_HEIGHT = 36
+
+/**
+ * Rough pixel height of the link-release context menu from its Tailwind layout.
+ * Used once on open to bottom-anchor the panel without relying on Reka's 80vh
+ * collision sizing.
+ */
+export function estimateLinkReleaseMenuHeight(layout: {
+  hasHeader: boolean
+  suggestionCount: number
+  categoryCount: number
+  searchResultCount: number
+  searchResultGroupCount?: number
+  showReroute: boolean
+}): number {
+  const {
+    hasHeader,
+    suggestionCount,
+    categoryCount,
+    searchResultCount,
+    searchResultGroupCount = 0,
+    showReroute
+  } = layout
+
+  let height = CONTENT_PADDING_Y + SEARCH_HEIGHT + SEPARATOR_HEIGHT
+  if (hasHeader) height += HEADER_HEIGHT
+
+  if (searchResultCount > 0) {
+    height += searchResultCount * MENU_ITEM_HEIGHT
+    if (searchResultGroupCount > 1) {
+      height += (searchResultGroupCount - 1) * SEPARATOR_HEIGHT
+    }
+    return height
+  }
+
+  if (suggestionCount > 0) {
+    height += SECTION_LABEL_HEIGHT + suggestionCount * MENU_ITEM_HEIGHT
+  }
+  if (suggestionCount > 0 && categoryCount > 0) {
+    height += SEPARATOR_HEIGHT
+  }
+  if (categoryCount > 0) {
+    height += SECTION_LABEL_HEIGHT + categoryCount * MENU_ITEM_HEIGHT
+  }
+  if (showReroute) {
+    height += SEPARATOR_HEIGHT + MENU_ITEM_HEIGHT
+  }
+  return height
+}
+
+/** Bottom-anchor the context menu top edge within the viewport. */
+export function computeContextMenuTop(metrics: {
+  cursorY: number
+  menuHeight: number
+  viewportHeight: number
+  margin: number
+  sideOffset: number
+}): number {
+  const { cursorY, menuHeight, viewportHeight, margin, sideOffset } = metrics
+  const menuTopAtCursor = cursorY + sideOffset
+  const maxMenuTop = Math.max(margin, viewportHeight - margin - menuHeight)
+  return Math.min(Math.max(margin, menuTopAtCursor), maxMenuTop)
+}

src/lib/litegraph/src/LGraphCanvas.ts

@@ -5194,7 +5194,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
 
   private _drawConnectingLinks(ctx: CanvasRenderingContext2D): void {
     const { linkConnector } = this
-    if (!linkConnector.isConnecting) return
+    if (!linkConnector.isConnecting || linkConnector.renderLinksHidden) return
 
     const { renderLinks } = linkConnector
     const highlightPos = this._getHighlightPosition()

src/lib/litegraph/src/canvas/LinkConnector.ts

@@ -118,6 +118,13 @@ export class LinkConnector {
   /** The reroute beneath the pointer, if it is a valid connection target. */
   overReroute?: Reroute
 
+  /**
+   * When `true`, the in-progress dragging links are not rendered even though a
+   * connection is still active. Used to hide the dangling link while a
+   * link-release menu holds the connection open.
+   */
+  renderLinksHidden = false
+
   private readonly _setConnectingLinks: (value: ConnectingLink[]) => void
 
   constructor(setConnectingLinks: (value: ConnectingLink[]) => void) {
@@ -1098,6 +1105,8 @@ export class LinkConnector {
     const mayContinue = this.events.dispatch('reset', force)
     if (mayContinue === false) return
 
+    this.renderLinksHidden = false
+
     const {
       state,
       outputLinks,

src/lib/litegraph/src/litegraph.ts

@@ -170,6 +170,7 @@ export type { TWidgetType, TWidgetValue, IWidgetOptions } from './types/widgets'
 export {
   findUsedSubgraphIds,
   getDirectSubgraphIds,
+  isNodeSlot,
   isSubgraphInput,
   isSubgraphOutput
 } from './subgraph/subgraphUtils'

src/locales/en/main.json

@@ -593,6 +593,12 @@
     "Bypass": "Bypass",
     "Copy (Clipspace)": "Copy (Clipspace)",
     "Add Node": "Add Node",
+    "Add Reroute": "Add Reroute",
+    "Most Relevant": "Most Relevant",
+    "Comfy Nodes": "Comfy Nodes",
+    "Extensions": "Extensions",
+    "Partner Nodes": "Partner Nodes",
+    "Compatible Nodes": "Compatible Nodes",
     "Add Group": "Add Group",
     "Manage Group Nodes": "Manage Group Nodes",
     "Add Group For Selected Nodes": "Add Group For Selected Nodes",
@@ -634,8 +640,7 @@
     "Horizontal": "Horizontal",
     "Vertical": "Vertical",
     "new": "new",
-    "deprecated": "deprecated",
-    "Extensions": "Extensions"
+    "deprecated": "deprecated"
   },
   "icon": {
     "bookmark": "Bookmark",

src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.takeover.test.ts

@@ -0,0 +1,229 @@
+import { fromPartial } from '@total-typescript/shoehorn'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { capturedHandlers, mockLinkConnector, mockAdapter, cancelLinkRelease } =
+  vi.hoisted(() => ({
+    capturedHandlers: {} as Record<string, (...args: unknown[]) => void>,
+    mockLinkConnector: {
+      isConnecting: false,
+      state: { snapLinksPos: null as [number, number] | null },
+      events: {}
+    },
+    mockAdapter: {
+      beginFromOutput: vi.fn(),
+      beginFromInput: vi.fn(),
+      reset: vi.fn(),
+      renderLinks: [] as unknown[],
+      linkConnector: null as unknown,
+      isInputValidDrop: vi.fn(() => false),
+      isOutputValidDrop: vi.fn(() => false),
+      dropOnCanvas: vi.fn()
+    },
+    cancelLinkRelease: vi.fn()
+  }))
+
+mockAdapter.linkConnector = mockLinkConnector
+
+// Emulate the real teardown: cancelling a held session clears the connector
+// state so the subsequent begin call no longer trips the guard.
+cancelLinkRelease.mockImplementation(() => {
+  mockLinkConnector.isConnecting = false
+})
+
+vi.mock('@/stores/workspace/searchBoxStore', () => ({
+  useSearchBoxStore: () => ({ cancelLinkRelease })
+}))
+
+vi.mock('@/renderer/core/canvas/useAutoPan', () => ({
+  AutoPanController: class {
+    updatePointer = vi.fn()
+    start = vi.fn()
+    stop = vi.fn()
+  }
+}))
+
+vi.mock('@/scripts/app', () => ({
+  app: {
+    canvas: {
+      ds: { offset: [0, 0], scale: 1 },
+      graph: {
+        getNodeById: (id: string) => ({
+          id,
+          inputs: [],
+          outputs: [{ name: 'out', type: '*', links: [], _floatingLinks: null }]
+        }),
+        getLink: () => null,
+        getReroute: () => null
+      },
+      linkConnector: mockLinkConnector,
+      canvas: {
+        getBoundingClientRect: () => ({
+          left: 0,
+          top: 0,
+          right: 800,
+          bottom: 600,
+          width: 800,
+          height: 600
+        })
+      },
+      setDirty: vi.fn()
+    }
+  }
+}))
+
+vi.mock('@/renderer/core/canvas/links/linkConnectorAdapter', () => ({
+  createLinkConnectorAdapter: () => mockAdapter
+}))
+
+vi.mock('@/renderer/core/canvas/links/slotLinkDragUIState', () => {
+  const pointer = { client: { x: 0, y: 0 }, canvas: { x: 0, y: 0 } }
+  return {
+    useSlotLinkDragUIState: () => ({
+      state: {
+        active: false,
+        pointerId: null,
+        source: null,
+        pointer,
+        candidate: null,
+        compatible: new Map()
+      },
+      beginDrag: vi.fn(),
+      endDrag: vi.fn(),
+      updatePointerPosition: vi.fn(),
+      setCandidate: vi.fn(),
+      setCompatibleForKey: vi.fn(),
+      clearCompatible: vi.fn()
+    })
+  }
+})
+
+vi.mock('@/composables/element/useCanvasPositionConversion', () => ({
+  useSharedCanvasPositionConversion: () => ({
+    clientPosToCanvasPos: (pos: [number, number]): [number, number] => pos
+  })
+}))
+
+vi.mock('@/renderer/core/layout/store/layoutStore', () => ({
+  layoutStore: {
+    getSlotLayout: () => ({
+      nodeId: 'node1',
+      index: 0,
+      type: 'output',
+      position: { x: 100, y: 200 }
+    }),
+    getAllSlotKeys: () => [],
+    getRerouteLayout: () => null,
+    queryRerouteAtPoint: () => null
+  }
+}))
+
+vi.mock('@/renderer/core/layout/slots/slotIdentifier', () => ({
+  getSlotKey: (...args: unknown[]) => args.join('-')
+}))
+
+vi.mock('@/renderer/core/canvas/interaction/canvasPointerEvent', () => ({
+  toCanvasPointerEvent: (e: PointerEvent) => e,
+  clearCanvasPointerHistory: vi.fn()
+}))
+
+vi.mock(
+  '@/renderer/extensions/vueNodes/composables/slotLinkDragContext',
+  () => ({
+    createSlotLinkDragContext: () => ({
+      reset: vi.fn(),
+      dispose: vi.fn()
+    })
+  })
+)
+
+vi.mock('@/renderer/extensions/vueNodes/utils/eventUtils', () => ({
+  augmentToCanvasPointerEvent: vi.fn()
+}))
+
+vi.mock('@/renderer/core/canvas/links/linkDropOrchestrator', () => ({
+  resolveSlotTargetCandidate: () => null,
+  resolveNodeSurfaceSlotCandidate: () => null
+}))
+
+vi.mock('@vueuse/core', () => ({
+  useEventListener: (event: string, handler: (...args: unknown[]) => void) => {
+    capturedHandlers[event] = handler
+    return vi.fn()
+  },
+  tryOnScopeDispose: () => {}
+}))
+
+vi.mock('@/lib/litegraph/src/LLink', () => ({
+  LLink: { getReroutes: () => [] }
+}))
+
+vi.mock('@/lib/litegraph/src/types/globalEnums', () => ({
+  LinkDirection: { LEFT: 0, RIGHT: 1, NONE: -1 }
+}))
+
+vi.mock('@/utils/rafBatch', () => ({
+  createRafBatch: (fn: () => void) => ({
+    schedule: () => {},
+    cancel: () => {},
+    flush: fn
+  })
+}))
+
+import { useSlotLinkInteraction } from '@/renderer/extensions/vueNodes/composables/useSlotLinkInteraction'
+
+function pointerEvent(pointerId = 1): PointerEvent {
+  return fromPartial<PointerEvent>({
+    clientX: 400,
+    clientY: 300,
+    button: 0,
+    pointerId,
+    ctrlKey: false,
+    metaKey: false,
+    altKey: false,
+    shiftKey: false,
+    target: document.createElement('div'),
+    preventDefault: vi.fn(),
+    stopPropagation: vi.fn()
+  })
+}
+
+function startDrag() {
+  const { onPointerDown } = useSlotLinkInteraction({
+    nodeId: 'node1',
+    index: 0,
+    type: 'output'
+  })
+  onPointerDown(pointerEvent())
+}
+
+describe('useSlotLinkInteraction held-session takeover', () => {
+  beforeEach(() => {
+    for (const k of Object.keys(capturedHandlers)) delete capturedHandlers[k]
+    mockLinkConnector.isConnecting = false
+    cancelLinkRelease.mockClear()
+    mockAdapter.beginFromOutput.mockClear()
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('cancels a held link-release session before starting a new drag', () => {
+    mockLinkConnector.isConnecting = true
+
+    startDrag()
+
+    expect(cancelLinkRelease).toHaveBeenCalledOnce()
+    expect(mockAdapter.beginFromOutput).toHaveBeenCalled()
+    expect(cancelLinkRelease.mock.invocationCallOrder[0]).toBeLessThan(
+      mockAdapter.beginFromOutput.mock.invocationCallOrder[0]
+    )
+  })
+
+  it('does not cancel when no session is held', () => {
+    startDrag()
+
+    expect(cancelLinkRelease).not.toHaveBeenCalled()
+    expect(mockAdapter.beginFromOutput).toHaveBeenCalled()
+  })
+})

src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts

@@ -32,6 +32,7 @@ import { toPoint } from '@/renderer/core/layout/utils/geometry'
 import { createSlotLinkDragContext } from '@/renderer/extensions/vueNodes/composables/slotLinkDragContext'
 import { augmentToCanvasPointerEvent } from '@/renderer/extensions/vueNodes/utils/eventUtils'
 import { app } from '@/scripts/app'
+import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { createRafBatch } from '@/utils/rafBatch'
 
 interface SlotInteractionOptions {
@@ -605,6 +606,13 @@ export function useSlotLinkInteraction({
     const graph = canvas?.graph
     if (!canvas || !graph) return
 
+    // A held link-release session (menu open, links kept alive) leaves the
+    // connector mid-drag. Tear it down so this new drag can take over instead
+    // of tripping LinkConnector's "Already dragging links" guard.
+    if (canvas.linkConnector.isConnecting && !pointerSession.isActive()) {
+      useSearchBoxStore().cancelLinkRelease()
+    }
+
     activeAdapter = createLinkConnectorAdapter()
     if (!activeAdapter) return
     raf.cancel()

src/services/litegraphService.ts

@@ -21,6 +21,7 @@ import {
   SubgraphNode,
   createBounds
 } from '@/lib/litegraph/src/litegraph'
+import { overlapBounding } from '@/lib/litegraph/src/measure'
 import type {
   CreateNodeOptions,
   GraphAddOptions,
@@ -943,10 +944,40 @@ export const useLitegraphService = () => {
     const graph = useWorkflowStore().activeSubgraph ?? app.graph
     if (!graph || !node) return null
 
+    // Finalize placement before the node joins the graph so the only position
+    // assignment happens during construction, not as a post-add mutation.
+    if (!addOptions?.ghost) resolveOverlap(node, graph)
     graph.add(node, addOptions)
+    if (!addOptions?.ghost) centerOnNewNode(node)
     return node
   }
 
+  const OVERLAP_GAP = 20
+  const OVERLAP_MAX_ITER = 100
+
+  function resolveOverlap(
+    node: LGraphNode,
+    graph: { nodes: LGraphNode[] }
+  ): void {
+    node.updateArea()
+    let iter = 0
+    while (
+      iter++ < OVERLAP_MAX_ITER &&
+      graph.nodes.some(
+        (n) =>
+          n.id !== node.id && overlapBounding(node.boundingRect, n.boundingRect)
+      )
+    ) {
+      node.pos[1] += node.size[1] + OVERLAP_GAP
+      node.updateArea()
+    }
+  }
+
+  function centerOnNewNode(node: LGraphNode): void {
+    node.updateArea()
+    app.canvas?.animateToBounds(node.boundingRect, { zoom: 0 })
+  }
+
   function getCanvasCenter(): Point {
     const dpi = Math.max(window.devicePixelRatio ?? 1, 1)
     const visibleArea = app.canvas?.ds?.visible_area

src/stores/workspace/searchBoxStore.test.ts

@@ -20,7 +20,7 @@ vi.mock('@/platform/settings/settingStore', () => ({
 }))
 
 function createMockPopover(): InstanceType<typeof NodeSearchBoxPopover> {
-  return { showSearchBox: vi.fn() } as Partial<
+  return { showSearchBox: vi.fn(), cancelLinkRelease: vi.fn() } as Partial<
     InstanceType<typeof NodeSearchBoxPopover>
   > as InstanceType<typeof NodeSearchBoxPopover>
 }
@@ -135,4 +135,23 @@ describe('useSearchBoxStore', () => {
       expect(store.visible).toBe(false)
     })
   })
+
+  describe('cancelLinkRelease', () => {
+    it('delegates to the popover to tear down a held link-release session', () => {
+      const store = useSearchBoxStore()
+      const mockPopover = createMockPopover()
+      store.setPopoverRef(mockPopover)
+
+      store.cancelLinkRelease()
+
+      expect(vi.mocked(mockPopover.cancelLinkRelease)).toHaveBeenCalled()
+    })
+
+    it('does nothing when the popover is not ready', () => {
+      const store = useSearchBoxStore()
+      store.setPopoverRef(null)
+
+      expect(() => store.cancelLinkRelease()).not.toThrow()
+    })
+  })
 })

src/stores/workspace/searchBoxStore.ts

@@ -28,6 +28,10 @@ export const useSearchBoxStore = defineStore('searchBox', () => {
     popoverRef.value = popover
   }
 
+  function cancelLinkRelease() {
+    popoverRef.value?.cancelLinkRelease()
+  }
+
   const visible = ref(false)
   function toggleVisible() {
     if (newSearchBoxEnabled.value) {
@@ -49,6 +53,7 @@ export const useSearchBoxStore = defineStore('searchBox', () => {
     useSearchBoxV2,
     newSearchBoxEnabled,
     setPopoverRef,
+    cancelLinkRelease,
     toggleVisible,
     visible
   }