@elyx-code/editor-ui 0.0.2

package/src/components/canvas/CreateEntityMenu.tsx

@@ -0,0 +1,2020 @@
+import React, {
+	useEffect,
+	useLayoutEffect,
+	useRef,
+	useState,
+	useDeferredValue,
+	useCallback
+} from 'react';
+import cx from 'classnames';
+import './create-entity-menu.css';
+import {
+	EntityType,
+	getFirstNonLoopScopeOwner,
+	getScopeOwner,
+	VALUE_WRITING_TYPES,
+	ValueDescriptorState,
+	mapActionDescriptorToTypeItRepresents,
+	checkScopeCompatibility,
+	ScopeCompatibilityType,
+	InternalCallState,
+	resolveEntityName,
+	getAllVariablesInScope as _getAllVariablesInScope,
+	ActionDescriptorState,
+	ArgumentDeclarationState,
+	BreakStatementState,
+	BuiltInBaseEntityState,
+	CallerEntityState,
+	ContinueStatementState,
+	DefinitionEntityState,
+	ExecutableEntityState,
+	FunctionDeclarationState,
+	GlobalEventState,
+	InputMapState,
+	OutputMapState,
+	ReturnStatementState,
+	SearchState,
+	VariableDeclarationState,
+	VariableState,
+	READABLE_ENTITY_TYPES
+} from '@elyx-code/project-logic-tree';
+import {
+	ENTITY_FA_ICON_NAMES,
+	getCreateEntityMenuFailureNodeId,
+	getCreateEntityMenuHeaderNodeId,
+	getCreateEntityMenuMainValueInputNodeId,
+	getCreateEntityMenuMainValueOutputNodeId,
+	getCreateEntityMenuSuccessNodeId
+} from '../../services/editor/ui';
+import TextField from '../../lib/text-field/TextField';
+import {
+	ConnectionNodeType,
+	EditorService,
+	ENTITIES_METADATA
+} from '../../services/editor';
+import { Canvas, CanvasObject } from '../../lib/canvas';
+import { resolveEntityIcon } from '../../services/editor/icons';
+import EntityIcon from '../entity-icon/EntityIcon';
+import Badge from '../../lib/badge/Badge';
+import { useCanvasPopup } from '../../services/editor/CanvasPopup';
+import CanvasPopupBaseComponent from '../../lib/popup/CanvasPopupBaseComponent';
+import { ICanvasMenuElementComponentProps } from '../../services/editor/CanvasElement';
+import { Logger, yieldToEventLoop } from '@elyx-code/common-ts-utils';
+import { CircularProgress } from '@mui/material'; // <-- Import the loader
+
+export interface ICreateEntityMenuProps extends ICanvasMenuElementComponentProps {
+	project: EditorService;
+	canvasObject: CanvasObject;
+	connectedNodeType: ConnectionNodeType;
+	// Only the source entity or the target entity can be defined at the same time
+	connectedSource?:
+		| CallerEntityState
+		| ArgumentDeclarationState
+		| OutputMapState
+		| ValueDescriptorState
+		| VariableState;
+	connectedTarget?: ExecutableEntityState | InputMapState | VariableState;
+	onCreateBaseEntity: (entityType: EntityType, event: MouseEvent) => void;
+	onCreateFromSpecificEntity: (
+		from: SearchableEntity,
+		event: MouseEvent
+	) => void;
+}
+
+export interface ICreateBaseEntityResultOption {
+	type: EntityType;
+	icon: string;
+	label: {
+		singular: string;
+	};
+	disabledReasons: string[];
+	searchScore?: number;
+	matchedKeywords?: string[];
+	searchQuery?: string;
+}
+
+type SearchableEntity =
+	| VariableDeclarationState
+	| DefinitionEntityState
+	| SearchState
+	| ActionDescriptorState
+	| FunctionDeclarationState
+	| GlobalEventState
+	| ReturnStatementState
+	| BreakStatementState
+	| ContinueStatementState
+	| InternalCallState
+	| BuiltInBaseEntityState;
+
+export interface ICreateSpecificEntityResultOption {
+	entity: SearchableEntity;
+	disabledReasons: string[];
+	searchScore?: number;
+	matchedKeywords?: string[];
+	searchQuery?: string;
+}
+
+// Fuzzy search and ranking utility
+function computeSearchScore(
+	query: string,
+	mainName: string,
+	keywords: { word: string; score: number }[]
+): { score: number; matchedKeywords: string[] } {
+	if (!query) return { score: 100, matchedKeywords: [] };
+	const lowerQuery = query.toLowerCase().trim();
+	const lowerName = mainName.toLowerCase();
+
+	let matchedKeywords: string[] = [];
+
+	const scoreWord = (wordQuery: string) => {
+		let maxScore = 0;
+		if (lowerName === wordQuery) maxScore = Math.max(maxScore, 100);
+		else if (lowerName.startsWith(wordQuery))
+			maxScore = Math.max(maxScore, 80);
+		else if (lowerName.includes(wordQuery))
+			maxScore = Math.max(maxScore, 60);
+
+		for (const kw of keywords) {
+			const lowerKw = kw.word.toLowerCase();
+			let matchScore = 0;
+			if (lowerKw === wordQuery) matchScore = 90;
+			else if (lowerKw.startsWith(wordQuery)) matchScore = 70;
+			else if (lowerKw.includes(wordQuery)) matchScore = 50;
+
+			if (matchScore > 0) {
+				const finalMatchScore = matchScore * kw.score;
+				if (finalMatchScore > maxScore) {
+					maxScore = finalMatchScore;
+					if (!matchedKeywords.includes(kw.word)) {
+						matchedKeywords.push(kw.word);
+					}
+				}
+			}
+		}
+
+		if (maxScore === 0) {
+			let queryIdx = 0;
+			for (
+				let i = 0;
+				i < lowerName.length && queryIdx < wordQuery.length;
+				i++
+			) {
+				if (lowerName[i] === wordQuery[queryIdx]) {
+					queryIdx++;
+				}
+			}
+			if (queryIdx === wordQuery.length) {
+				maxScore = 40;
+			} else if (queryIdx > 2) {
+				maxScore = 10 + queryIdx;
+			}
+
+			for (const kw of keywords) {
+				const lowerKw = kw.word.toLowerCase();
+				let kIdx = 0;
+				for (
+					let i = 0;
+					i < lowerKw.length && kIdx < wordQuery.length;
+					i++
+				) {
+					if (lowerKw[i] === wordQuery[kIdx]) {
+						kIdx++;
+					}
+				}
+				if (kIdx === wordQuery.length) {
+					const fuzzyScore = 30 * kw.score;
+					if (fuzzyScore > maxScore) {
+						maxScore = fuzzyScore;
+						if (!matchedKeywords.includes(kw.word)) {
+							matchedKeywords.push(kw.word);
+						}
+					}
+				}
+			}
+		}
+		return maxScore;
+	};
+
+	const queryWords = lowerQuery.split(/[\s\-_/]+/).filter(Boolean);
+
+	let totalWordScore = 0;
+	for (const word of queryWords) {
+		const wordScore = scoreWord(word);
+		totalWordScore += wordScore;
+	}
+
+	const fullQueryScore = scoreWord(lowerQuery);
+
+	const finalScore = Math.max(
+		totalWordScore / Math.max(1, queryWords.length),
+		fullQueryScore
+	);
+
+	return { score: finalScore, matchedKeywords };
+}
+
+export const DEFAULT_CREATION_OPTIONS: ICreateBaseEntityResultOption[] = [
+	// ... (Your DEFAULT_CREATION_OPTIONS array remains unchanged)
+	{
+		type: EntityType.DefinitionEntity,
+		// icon: DefinitionEntityDataTypeBlackIcon,
+		icon: ENTITY_FA_ICON_NAMES[EntityType.DefinitionEntity],
+		label: READABLE_ENTITY_TYPES[EntityType.DefinitionEntity],
+		disabledReasons: []
+	},
+	{
+		type: EntityType.GlobalEvent,
+		icon: ENTITY_FA_ICON_NAMES[EntityType.GlobalEvent],
+		label: READABLE_ENTITY_TYPES[EntityType.GlobalEvent],
+		disabledReasons: []
+	},
+	{
+		type: EntityType.FunctionDeclaration,
+		icon: ENTITY_FA_ICON_NAMES[EntityType.FunctionDeclaration],
+		label: READABLE_ENTITY_TYPES[EntityType.FunctionDeclaration],
+		disabledReasons: []
+	},
+	{
+		type: EntityType.VariableDeclaration,
+		icon: ENTITY_FA_ICON_NAMES[EntityType.VariableDeclaration],
+		label: READABLE_ENTITY_TYPES[EntityType.VariableDeclaration],
+		disabledReasons: []
+	},
+	{
+		type: EntityType.Operation,
+		icon: ENTITY_FA_ICON_NAMES[EntityType.Operation],
+		label: READABLE_ENTITY_TYPES[EntityType.Operation],
+		disabledReasons: []
+	},
+	{
+		type: EntityType.FunctionCall,
+		icon: ENTITY_FA_ICON_NAMES[EntityType.FunctionCall],
+		label: READABLE_ENTITY_TYPES[EntityType.FunctionCall],
+		disabledReasons: []
+	},
+	{
+		type: EntityType.Condition,
+		icon: ENTITY_FA_ICON_NAMES[EntityType.Condition],
+		label: READABLE_ENTITY_TYPES[EntityType.Condition],
+		disabledReasons: []
+	},
+	{
+		type: EntityType.Loop,
+		icon: ENTITY_FA_ICON_NAMES[EntityType.Loop],
+		label: READABLE_ENTITY_TYPES[EntityType.Loop],
+		disabledReasons: []
+	},
+	{
+		type: EntityType.Search,
+		icon: ENTITY_FA_ICON_NAMES[EntityType.Search],
+		label: READABLE_ENTITY_TYPES[EntityType.Search],
+		disabledReasons: []
+	},
+	{
+		type: EntityType.ReturnStatement,
+		icon: ENTITY_FA_ICON_NAMES[EntityType.ReturnStatement],
+		label: READABLE_ENTITY_TYPES[EntityType.ReturnStatement],
+		disabledReasons: []
+	},
+	{
+		type: EntityType.ContinueStatement,
+		icon: ENTITY_FA_ICON_NAMES[EntityType.ContinueStatement],
+		label: READABLE_ENTITY_TYPES[EntityType.ContinueStatement],
+		disabledReasons: []
+	},
+	{
+		type: EntityType.BreakStatement,
+		icon: ENTITY_FA_ICON_NAMES[EntityType.BreakStatement],
+		label: READABLE_ENTITY_TYPES[EntityType.BreakStatement],
+		disabledReasons: []
+	}
+];
+
+// const BANNED_SPECIFIC_ENTITIES: Set<EntityId> = new Set([
+// 	BaseEntityNames.SQL_ROW_TRANSFORMER,
+// 	ExternalIntegrationOperations.GoogleMailEmails
+// ]);
+
+// helper function to check if a string is a valid URL
+function isValidURL(str: string) {
+	try {
+		new URL(str);
+		return true;
+	} catch (e) {
+		return false;
+	}
+}
+
+/*
+  This function generates the subtitle for the entity creation options
+  ... (rest of function is unchanged)
+*/
+export function resolveActionCreationSubtitle(
+	entity: SearchableEntity
+): React.ReactNode {
+	// ... (Your resolveActionCreationSubtitle function remains unchanged)
+	// If the entity is a variable declaration, add to the subtitle the parent scope,
+	// Eg: global or part of X function
+	if (entity.type === EntityType.VariableDeclaration) {
+		if (entity.parent?.type !== EntityType.Project) {
+			return `Re-use variable from the ${resolveEntityName(
+				entity.parent,
+				entity.project
+			)} logic`;
+		}
+
+		return 'Re-use global variable';
+	}
+
+	if (
+		entity.type === EntityType.InternalCall &&
+		entity.parent?.type === EntityType.VariableDeclaration
+	) {
+		return (
+			<>
+				Call the internal function from the{' '}
+				<b>{resolveEntityName(entity.parent, entity.project)}</b>{' '}
+				variable
+			</>
+		);
+	}
+
+	// If the entity is a function or operation declaration, specify that users will be adding a call to this function
+	if (EntityType.FunctionDeclaration === entity.type) {
+		return `Add an execution of this custom trigger`;
+	}
+
+	if (
+		entity.type === EntityType.ActionDescriptor &&
+		entity.project.isGlobalEventActionDescriptor(entity)
+	) {
+		return `Add this global event trigger`;
+	}
+
+	if (
+		entity.type === EntityType.ActionDescriptor &&
+		entity.project.isOperationDeclaration(entity)
+	) {
+		return `Add this operation`;
+	}
+
+	if (
+		entity.type === EntityType.ActionDescriptor &&
+		entity.project.isConditionDeclaration(entity)
+	) {
+		return `Add this condition`;
+	}
+
+	if (
+		entity.type === EntityType.ActionDescriptor &&
+		entity.project.isLoopDeclaration(entity)
+	) {
+		return `Add this loop`;
+	}
+
+	// If it is a base entity or definition entity, specify that users will extending or implementing this entity
+	if (
+		[EntityType.BuiltInBaseEntity, EntityType.DefinitionEntity].includes(
+			entity.type
+		)
+	) {
+		if ((entity as DefinitionEntityState).abstract) {
+			return `Implement this ${READABLE_ENTITY_TYPES[entity.type].singular}`;
+		}
+
+		return `Extend this ${READABLE_ENTITY_TYPES[entity.type].singular}`;
+	}
+
+	// For the rest, just add a generic message
+	return `Add a ${READABLE_ENTITY_TYPES[entity.type].singular}`;
+}
+
+function renderHighlightedText(text: string, highlight?: string) {
+	if (!highlight) return <span>{text}</span>;
+	const words = highlight.split(/[\s\-_/]+/).filter(Boolean);
+	if (words.length === 0) return <span>{text}</span>;
+
+	const regex = new RegExp(`(${words.join('|')})`, 'gi');
+	const parts = text.split(regex);
+
+	return (
+		<span>
+			{parts.map((part, i) => {
+				const isMatch = words.some(
+					(w) => part.toLowerCase() === w.toLowerCase()
+				);
+				return isMatch ? (
+					<mark
+						key={i}
+						style={{
+							backgroundColor: 'rgba(255, 255, 0, 0.4)',
+							color: 'inherit',
+							borderRadius: '2px'
+						}}
+					>
+						{part}
+					</mark>
+				) : (
+					<span key={i}>{part}</span>
+				);
+			})}
+		</span>
+	);
+}
+
+export function CreateBaseEntityOption(props: {
+	option: ICreateBaseEntityResultOption;
+	onCreateBaseEntity: (entityType: EntityType, event: MouseEvent) => void;
+	parentCanvasObject: CanvasObject;
+	project: EditorService;
+	isFocused?: boolean;
+}) {
+	const rootElementRef = useRef<HTMLLIElement>(null);
+
+	useEffect(() => {
+		if (props.isFocused && rootElementRef.current) {
+			rootElementRef.current.scrollIntoView({
+				block: 'nearest',
+				behavior: 'smooth'
+			});
+		}
+	}, [props.isFocused]);
+	const memoizedCanvasPopupBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent
+				containerClasses={['tooltip', 'tooltip--large-font']}
+				id={`${props.option.type}--creation-menu-option--popup--body`}
+			>
+				{/* If it isn't the last item on the list, add a 'br' after itself */}
+				{!!props.option.disabledReasons.length ? (
+					<>
+						{props.option.disabledReasons.flatMap(
+							(reason, index) => [
+								<p
+									key={reason}
+									style={{
+										margin: 0,
+										maxWidth: 200,
+										wordWrap: 'break-word',
+										textAlign: 'center'
+									}}
+								>
+									{reason}
+								</p>,
+								index <
+									props.option.disabledReasons.length - 1 && (
+									<br />
+								)
+							]
+						)}
+					</>
+				) : (
+					`Create a new ${props.option.label.singular} at this position.`
+				)}
+			</CanvasPopupBaseComponent>
+		),
+		[props.option, props.parentCanvasObject]
+	);
+
+	const canvasPopup = useCanvasPopup(
+		{
+			editor: props.project,
+			id: props.option.type + '--creation-menu-option--popup',
+			anchorQuerySelector:
+				'#' + props.option.type + '--creation-menu-option',
+			arrowClasses: ['tooltip-arrow'],
+			parentCanvasObject: props.parentCanvasObject,
+			placement: 'top',
+			arrowContainerSelector:
+				'#' + props.option.type + '--creation-menu-option--popup--body'
+		},
+		memoizedCanvasPopupBody
+	).setupHover({
+		closeDelay: 80,
+		openDelay: 600
+	});
+
+	return (
+		<li ref={rootElementRef}>
+			<button
+				className={cx([
+					'canvas__new-entity-menu__base-entity-button',
+					`entity-color__${props.option.type}`,
+					...(!!props.option.disabledReasons.length
+						? ['disabled']
+						: []),
+					...(props.isFocused ? ['focused-option'] : [])
+				])}
+				style={
+					props.isFocused
+						? { backgroundColor: 'rgba(0, 0, 0, 0.05)' }
+						: {}
+				}
+				id={props.option.type + '--creation-menu-option'}
+				ref={canvasPopup.anchorRef}
+				disabled={!!props.option.disabledReasons.length}
+				onClick={(e) => {
+					props.onCreateBaseEntity(props.option.type, e as any);
+				}}
+			>
+				{!isValidURL(props.option.icon) ? (
+					<i
+						className={cx(['fa-solid', 'fa-' + props.option.icon])}
+					/>
+				) : (
+					<img
+						src={props.option.icon}
+						alt={props.option.label.singular}
+					/>
+				)}
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						alignItems: 'flex-start'
+					}}
+				>
+					<span>
+						{renderHighlightedText(
+							props.option.label.singular,
+							props.option.searchQuery
+						)}
+					</span>
+					{props.option.matchedKeywords &&
+						props.option.matchedKeywords.length > 0 && (
+							<span
+								style={{
+									fontSize: '10px',
+									color: '#888',
+									marginTop: '2px'
+								}}
+							>
+								Matches:{' '}
+								{props.option.matchedKeywords
+									.map((kw) =>
+										renderHighlightedText(
+											kw,
+											props.option.searchQuery
+										)
+									)
+									.reduce((prev, curr) => (
+										<>
+											{prev}, {curr}
+										</>
+									))}
+							</span>
+						)}
+				</div>
+			</button>
+		</li>
+	);
+}
+
+export function CreateSpecificEntityOption(props: {
+	option: ICreateSpecificEntityResultOption;
+	onCreateFromSpecificEntity: (
+		from: SearchableEntity,
+		event: MouseEvent
+	) => void;
+	parentCanvasObject: CanvasObject;
+	project: EditorService;
+	isFocused?: boolean;
+}) {
+	const rootElementRef = useRef<HTMLLIElement>(null);
+
+	useEffect(() => {
+		if (props.isFocused && rootElementRef.current) {
+			rootElementRef.current.scrollIntoView({
+				block: 'nearest',
+				behavior: 'smooth'
+			});
+		}
+	}, [props.isFocused]);
+
+	const memoizedCanvasPopupBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent
+				containerClasses={['tooltip', 'tooltip--large-font']}
+				id={
+					'creation-menu-option--' +
+					props.option.entity.id +
+					'--popup--body'
+				}
+			>
+				{/* If it isn't the last item on the list, add a 'br' after itself */}
+				{!!props.option.disabledReasons.length
+					? props.option.disabledReasons.flatMap((reason, index) => [
+							<p
+								key={reason}
+								style={{
+									margin: 0,
+									maxWidth: 200,
+									wordWrap: 'break-word',
+									textAlign: 'center'
+								}}
+							>
+								{reason}
+							</p>,
+							index < props.option.disabledReasons.length - 1 && (
+								<br />
+							)
+						])
+					: [resolveActionCreationSubtitle(props.option.entity)]}
+			</CanvasPopupBaseComponent>
+		),
+		[props.option, props.parentCanvasObject]
+	);
+
+	const canvasPopup = useCanvasPopup(
+		{
+			editor: props.project,
+			id: 'creation-menu-option--' + props.option.entity.id + '--popup',
+			anchorQuerySelector:
+				'#' + 'creation-menu-option--' + props.option.entity.id,
+			arrowClasses: ['tooltip-arrow'],
+			parentCanvasObject: props.parentCanvasObject,
+			placement: 'top',
+			arrowContainerSelector:
+				'#creation-menu-option--' +
+				props.option.entity.id +
+				'--popup--body'
+		},
+		memoizedCanvasPopupBody
+	).setupHover({
+		closeDelay: 80,
+		openDelay: 600
+	});
+
+	const config = resolveEntityIcon(props.option.entity);
+
+	return (
+		<li ref={rootElementRef}>
+			<button
+				className={[
+					'canvas__new-entity-menu__specific-entity-button',
+					`entity-color__${mapActionDescriptorToTypeItRepresents(
+						props.option.entity
+					)}`,
+					...(!!props.option.disabledReasons.length
+						? ['disabled']
+						: []),
+					...(props.isFocused ? ['focused-option'] : [])
+				].join(' ')}
+				style={
+					props.isFocused
+						? { backgroundColor: 'rgba(0, 0, 0, 0.05)' }
+						: {}
+				}
+				id={`creation-menu-option--${props.option.entity.id}`}
+				ref={canvasPopup.anchorRef}
+				disabled={!!props.option.disabledReasons.length}
+				onClick={(e) => {
+					props.onCreateFromSpecificEntity(
+						props.option.entity,
+						e as any
+					);
+				}}
+			>
+				<EntityIcon
+					entity={props.option.entity}
+					size="medium"
+					color="black"
+					parentDisabledReasons={props.option.disabledReasons}
+					style={{
+						// Images are made bigger, so we compensate the left position
+						left: !!config.url ? -6 : undefined,
+						position: 'relative'
+					}}
+					project={props.project}
+					parentCanvasObject={props.parentCanvasObject}
+				/>
+				<div
+					className="canvas__new-entity-menu__specific-entity-button__labels-container"
+					style={{
+						// Images are made bigger, so we compensate the left position
+						left: !!config.url ? -14 : undefined,
+						position: 'relative'
+					}}
+				>
+					<span className="canvas__new-entity-menu__entity-title">
+						{renderHighlightedText(
+							resolveEntityName(
+								props.option.entity,
+								props.option.entity.project
+							),
+							props.option.searchQuery
+						)}
+					</span>
+					<span className="canvas__new-entity-menu__entity-subtitle">
+						{resolveActionCreationSubtitle(props.option.entity)}
+					</span>
+					{props.option.matchedKeywords &&
+						props.option.matchedKeywords.length > 0 && (
+							<span
+								style={{
+									fontSize: '10px',
+									color: '#888',
+									marginTop: '2px'
+								}}
+							>
+								Matches:{' '}
+								{props.option.matchedKeywords
+									.map((kw) =>
+										renderHighlightedText(
+											kw,
+											props.option.searchQuery
+										)
+									)
+									.reduce((prev, curr) => (
+										<>
+											{prev}, {curr}
+										</>
+									))}
+							</span>
+						)}
+				</div>
+			</button>
+		</li>
+	);
+}
+
+const CreateEntityMenu = (props: ICreateEntityMenuProps) => {
+	const rootElementRef = useRef<HTMLDivElement | null>(null);
+
+	// --- Component State ---
+	const [searchValue, setSearchValue] = useState<string>('');
+	const deferredSearchValue = useDeferredValue(searchValue); // <-- ADDED
+	const [hasSearched, setHasSearched] = useState<boolean>(false);
+
+	const [specificEntityResults, setSpecificEntityResults] = useState<
+		ICreateSpecificEntityResultOption[]
+	>([]);
+	const [specificEntityDisabledResults, setSpecificEntityDisabledResults] =
+		useState<ICreateSpecificEntityResultOption[]>([]);
+	const [baseEntityResults, setBaseEntityResults] = useState<
+		ICreateBaseEntityResultOption[]
+	>([]);
+	const [baseEntityDisabledResults, setBaseEntityDisabledResults] = useState<
+		ICreateBaseEntityResultOption[]
+	>([]);
+
+	const [focusedIndex, setFocusedIndex] = useState<number>(0);
+
+	useEffect(() => {
+		setFocusedIndex(0);
+	}, [deferredSearchValue, baseEntityResults, specificEntityResults]);
+
+	// --- Loading State ---
+	const [isBaseLoading, setIsBaseLoading] = useState(true);
+	const [isSpecificLoading, setIsSpecificLoading] = useState(true);
+
+	// Null means that the user hasn't explicitly collapsed or expanded the section
+	// So it can be overriten by default behaviour
+	// A boolean means that the section is collapsed or expanded explicitly by the user and should not be overriten
+	const [baseEntitiesSectionCollapsed, setBaseEntitiesSectionCollapsed] =
+		useState<boolean | null>(null);
+	const [
+		specificEntitiesSectionCollapsed,
+		setSpecificEntitiesSectionCollapsed
+	] = useState<boolean | null>(null);
+
+	const memoizedBaseEntitiesCountCanvasPopupBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent
+				containerClasses={['tooltip', 'tooltip--large-font']}
+				id={
+					'create-new-entity-menu--base-entities--count-tooltip--popup--body'
+				}
+			>
+				{`There are ${baseEntityResults.length} base nodes available to create.`}
+			</CanvasPopupBaseComponent>
+		),
+		[baseEntityResults]
+	);
+
+	// --- Tooltip Popups ---
+	const canvasPopupBaseEntitiesCountToolip = useCanvasPopup(
+		{
+			editor: props.project,
+			id: 'create-new-entity-menu--base-entities--count-tooltip',
+			anchorQuerySelector:
+				'#create-new-entity-menu--base-entities--counter-badge',
+			arrowClasses: ['tooltip-arrow'],
+			parentCanvasObject: props.canvasObject,
+			placement: 'top',
+			arrowContainerSelector:
+				'#create-new-entity-menu--base-entities--count-tooltip--popup--body'
+		},
+		memoizedBaseEntitiesCountCanvasPopupBody
+		// [baseEntityResults]
+	).setupHover({
+		closeDelay: 400,
+		openDelay: 600
+	});
+
+	const memoizedSpecificEntitiesCountCanvasPopupBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent
+				containerClasses={['tooltip', 'tooltip--large-font']}
+				id={
+					'create-new-entity-menu--specific-entities--count-tooltip--popup--body'
+				}
+			>
+				{`There are ${specificEntityResults.length} specific nodes available to create.`}
+			</CanvasPopupBaseComponent>
+		),
+		[specificEntityResults]
+	);
+
+	const canvasPopupSpecificEntitiesCountToolip = useCanvasPopup(
+		{
+			editor: props.project,
+			id: 'create-new-entity-menu--specific-entities--count-tooltip',
+			anchorQuerySelector:
+				'#create-new-entity-menu--specific-entities--counter-badge',
+			arrowClasses: ['tooltip-arrow'],
+			parentCanvasObject: props.canvasObject,
+			placement: 'top',
+			arrowContainerSelector:
+				'#create-new-entity-menu--specific-entities--count-tooltip--popup--body'
+		},
+		memoizedSpecificEntitiesCountCanvasPopupBody
+		// [specificEntityResults]
+	).setupHover({
+		closeDelay: 400,
+		openDelay: 600
+	});
+
+	// --- Data Fetching Logic ---
+
+	// Based on the connected entity, we should disable some of the base entity creation options
+	const getBasesEntityResults = (
+		searchQuery: string = ''
+	): [ICreateBaseEntityResultOption[], ICreateBaseEntityResultOption[]] => {
+		try {
+			const isConnected =
+				!!props.connectedSource || !!props.connectedTarget;
+
+			const disabledOptions: ICreateBaseEntityResultOption[] = [];
+			const enabledOptions: ICreateBaseEntityResultOption[] = [];
+
+			// If there is a connected entity, source or target:
+			// Remove entry point entities and definition entity
+			for (const option of DEFAULT_CREATION_OPTIONS) {
+				if (ENTITIES_METADATA[option.type]?.hidden) continue;
+
+				const optionDisabledReasons: string[] = [];
+
+				if (isConnected) {
+					// Remove any entity that cannot be connected to anything
+					if ([EntityType.DefinitionEntity].includes(option.type)) {
+						optionDisabledReasons.push(
+							'Definitions cannot be connected to any logic and must stand on their own.'
+						);
+
+						// Remove entry point entities when the connected entity is a source being called by the connection
+						// Which means that the current entity will call the connected entity
+					} else if (
+						ConnectionNodeType.CalledBy !==
+							props.connectedNodeType &&
+						[
+							EntityType.GlobalEvent,
+							EntityType.FunctionDeclaration
+						].includes(option.type)
+					) {
+						optionDisabledReasons.push(
+							'Trigger nodes cannot be called by other nodes. They are the starting point of the logic.'
+						);
+
+						// If the connected entity is a property-out, it means it is setting the value of the new entity being created
+						// We should remove all that don't read values (all except variable declaration)
+					} else if (
+						ConnectionNodeType.PropertyOut ===
+							props.connectedNodeType &&
+						EntityType.VariableDeclaration !== option.type
+					) {
+						optionDisabledReasons.push(
+							'This node cannot receive values read from other nodes.'
+						);
+
+						// If the connected entity is a property-in, it means it is reading the value of the new entity being created
+						// We should remove all that don't set values
+					} else if (
+						ConnectionNodeType.PropertyIn ===
+							props.connectedNodeType &&
+						VALUE_WRITING_TYPES.includes(option.type)
+					) {
+						optionDisabledReasons.push(
+							'This node cannot set values to other nodes.'
+						);
+					}
+
+					if (option.type === EntityType.VariableDeclaration) {
+						const callerScopeOwner = getScopeOwner(
+							props.connectedSource,
+							props.project.logic
+						);
+
+						if (
+							ConnectionNodeType.PropertyOut ===
+								props.connectedNodeType &&
+							callerScopeOwner?.type === EntityType.Project
+						) {
+							optionDisabledReasons.push(
+								'Global variable declarations cannot have their value set directly. Create a variable instance instead.'
+							);
+						} else if (
+							[
+								ConnectionNodeType.EntryPointCaller,
+								ConnectionNodeType.ErrorCaller,
+								ConnectionNodeType.SuccessCaller
+							].includes(props.connectedNodeType) &&
+							callerScopeOwner?.type === EntityType.Project
+						) {
+							optionDisabledReasons.push(
+								'Global variable declarations cannot be called by others. They will always be available globally when the project first loads.'
+							);
+						}
+					}
+				}
+
+				if (
+					props.connectedNodeType !==
+						ConnectionNodeType.SuccessCaller &&
+					props.connectedNodeType !==
+						ConnectionNodeType.ErrorCaller &&
+					props.connectedNodeType !==
+						ConnectionNodeType.EntryPointCaller
+				) {
+					if (EntityType.ReturnStatement === option.type) {
+						optionDisabledReasons.push(
+							'A termination must always be executed by another node.'
+						);
+					} else if (EntityType.ContinueStatement === option.type) {
+						optionDisabledReasons.push(
+							'A continue node must always be executed by another node.'
+						);
+					} else if (EntityType.BreakStatement === option.type) {
+						optionDisabledReasons.push(
+							'A break node must always be executed by another node.'
+						);
+					}
+				} else {
+					const callerScopeOwner = getScopeOwner(
+						props.connectedSource,
+						props.project.logic
+					);
+					const firstNonLoopScopeOwner = getFirstNonLoopScopeOwner(
+						props.connectedSource,
+						props.project.logic
+					);
+
+					if (EntityType.ContinueStatement === option.type) {
+						if (callerScopeOwner?.type !== EntityType.Loop) {
+							optionDisabledReasons.push(
+								'Continue nodes can only be used inside the body of a loop.'
+							);
+						}
+					} else if (EntityType.BreakStatement === option.type) {
+						if (callerScopeOwner?.type !== EntityType.Loop) {
+							optionDisabledReasons.push(
+								'Loop exit nodes can only be used inside the body of a loop.'
+							);
+						}
+					}
+
+					if (EntityType.ReturnStatement === option.type) {
+						Logger.log('callerScopeOwner: ', callerScopeOwner);
+						Logger.log(
+							'firstNonLoopScopeOwner: ',
+							firstNonLoopScopeOwner
+						);
+						if (!firstNonLoopScopeOwner) {
+							let isBodyOfLoop =
+								callerScopeOwner?.type === EntityType.Loop;
+							optionDisabledReasons.push(
+								'Termination nodes can only be used inside the body of a trigger.' +
+									(isBodyOfLoop
+										? ' Without counting the body of a loop.'
+										: '')
+							);
+						} else if (
+							callerScopeOwner.type === EntityType.Project
+						) {
+							optionDisabledReasons.push(
+								'Termination nodes can only be used inside the body of a trigger.'
+							);
+						}
+					}
+				}
+
+				if (option.type === EntityType.GlobalEvent) {
+					// Check if all global events have been implemented, then disable the option
+					const stillHasAvailableOptions =
+						!!props.project.logic.globalEventActionDescriptors.find(
+							(actionDescriptor) =>
+								!props.project.logic.events.find(
+									(event) =>
+										event.implements?.id ===
+										actionDescriptor.id
+								)
+						);
+
+					if (!stillHasAvailableOptions) {
+						optionDisabledReasons.push(
+							'All global events have been implemented. Add your logic to the existing ones.'
+						);
+					}
+				}
+
+				if (optionDisabledReasons.length) {
+					disabledOptions.push({
+						...option,
+						disabledReasons: optionDisabledReasons
+					});
+				} else {
+					enabledOptions.push(option);
+				}
+			}
+
+			const filteredEnabledOptions: ICreateBaseEntityResultOption[] = [];
+			const filteredDisabledOptions: ICreateBaseEntityResultOption[] = [];
+
+			for (const option of enabledOptions) {
+				const metadata = ENTITIES_METADATA[option.type] || {
+					keywords: [] as { word: string; score: number }[]
+				};
+				const searchRes = computeSearchScore(
+					searchQuery,
+					option.label.singular,
+					metadata.keywords
+				);
+				if (!searchQuery || searchRes.score > 0) {
+					filteredEnabledOptions.push({
+						...option,
+						searchScore: searchRes.score,
+						matchedKeywords: searchRes.matchedKeywords,
+						searchQuery
+					});
+				}
+			}
+			for (const option of disabledOptions) {
+				const metadata = ENTITIES_METADATA[option.type] || {
+					keywords: [] as { word: string; score: number }[]
+				};
+				const searchRes = computeSearchScore(
+					searchQuery,
+					option.label.singular,
+					metadata.keywords
+				);
+				if (!searchQuery || searchRes.score > 0) {
+					filteredDisabledOptions.push({
+						...option,
+						searchScore: searchRes.score,
+						matchedKeywords: searchRes.matchedKeywords,
+						searchQuery
+					});
+				}
+			}
+
+			filteredEnabledOptions.sort(
+				(a, b) =>
+					(b.searchScore || 0) - (a.searchScore || 0) ||
+					a.label.singular.localeCompare(b.label.singular)
+			);
+			filteredDisabledOptions.sort(
+				(a, b) =>
+					(b.searchScore || 0) - (a.searchScore || 0) ||
+					a.label.singular.localeCompare(b.label.singular)
+			);
+
+			return [filteredEnabledOptions, filteredDisabledOptions];
+		} catch (error) {
+			Logger.error('Error in getBasesEntityResults: ', error);
+			return [[], []];
+		}
+	};
+
+	const getAllVariablesInScope = (
+		allVariablesInProject: VariableDeclarationState[]
+	): VariableDeclarationState[] => {
+		return _getAllVariablesInScope(
+			props.project.logic,
+			allVariablesInProject,
+			props.connectedSource || props.connectedTarget
+		);
+	};
+
+	const getInternalCallsFromVariables = (
+		variables: VariableDeclarationState[]
+	): InternalCallState[] => {
+		return variables.flatMap((variable) => variable.internalCalls);
+	};
+
+	// Based on the search query, we should filter the specific entity creation options
+	// Also based on the external connections, we should disable some of the options
+	const getSpecificEntityResults = async (
+		searchQuery: string = ''
+	): Promise<
+		[
+			ICreateSpecificEntityResultOption[],
+			ICreateSpecificEntityResultOption[]
+		]
+	> => {
+		const yieldEvery = 200;
+		let i = 0;
+		const project = props.project.logic;
+
+		// --- 1. Data Gathering (Async) ---
+		const allVariablesInProject = project.getVariableDeclarations();
+		const internalCallsFromVariablesInScope = getInternalCallsFromVariables(
+			getAllVariablesInScope(allVariablesInProject)
+		);
+
+		if (
+			allVariablesInProject.length +
+				internalCallsFromVariablesInScope.length >
+			yieldEvery
+		) {
+			await yieldToEventLoop();
+		}
+
+		const searchableEntitities: SearchableEntity[] = [
+			...project.builtInBaseEntities,
+			...project.operationDeclarations,
+			...project.conditionDeclarations,
+			...project.loopDeclarations,
+			...project.globalEventActionDescriptors,
+			...allVariablesInProject,
+			...internalCallsFromVariablesInScope,
+			...project.functions
+		];
+
+		const searchableEntititiesWithNames: {
+			entity: SearchableEntity;
+			name: string;
+		}[] = [];
+		for (const entity of searchableEntitities) {
+			if (
+				ENTITIES_METADATA[entity.id]?.hidden ||
+				ENTITIES_METADATA[entity.type]?.hidden
+			) {
+				continue;
+			}
+			searchableEntititiesWithNames.push({
+				entity,
+				name: resolveEntityName(entity, entity.project).toLowerCase()
+			});
+			if (++i % yieldEvery === 0) await yieldToEventLoop();
+		}
+
+		// --- 2. Alphabetical Sort ---
+		searchableEntititiesWithNames.sort((a, b) =>
+			a.name.localeCompare(b.name)
+		);
+		await yieldToEventLoop(); // Yield after the sort
+
+		let specificOptions: ICreateSpecificEntityResultOption[];
+
+		if (!searchQuery) {
+			specificOptions = searchableEntititiesWithNames.map((item) => ({
+				entity: item.entity,
+				disabledReasons: [] as string[]
+			}));
+		} else {
+			// --- 3. Filtering (Async) ---
+			const filteredItems: (ICreateSpecificEntityResultOption & {
+				name: string;
+			})[] = [];
+			for (const item of searchableEntititiesWithNames) {
+				const metadata = ENTITIES_METADATA[item.entity.id] ||
+					ENTITIES_METADATA[item.entity.type] || {
+						keywords: [] as { word: string; score: number }[]
+					};
+				const typeReadable =
+					READABLE_ENTITY_TYPES[item.entity.type]?.singular || '';
+				const additionalKeywords = typeReadable
+					? [{ word: typeReadable.toLowerCase(), score: 0.8 }]
+					: [];
+				const searchRes = computeSearchScore(searchQuery, item.name, [
+					...metadata.keywords,
+					...additionalKeywords
+				]);
+				if (searchRes.score > 0) {
+					filteredItems.push({
+						entity: item.entity,
+						name: item.name,
+						disabledReasons: [],
+						searchScore: searchRes.score,
+						matchedKeywords: searchRes.matchedKeywords,
+						searchQuery
+					});
+				}
+				if (++i % yieldEvery === 0) await yieldToEventLoop();
+			}
+
+			// --- 4. Re-sorting by relevance ---
+			filteredItems.sort(
+				(a, b) =>
+					(b.searchScore || 0) - (a.searchScore || 0) ||
+					a.name.localeCompare(b.name)
+			);
+			await yieldToEventLoop(); // Yield after the sort
+
+			specificOptions = filteredItems;
+		}
+
+		// --- 5. Disabling Logic (Async) ---
+		return disableSpecificEntityResults(specificOptions);
+	};
+
+	const disableSpecificEntityResults = async (
+		items: ICreateSpecificEntityResultOption[]
+	): Promise<
+		[
+			ICreateSpecificEntityResultOption[],
+			ICreateSpecificEntityResultOption[]
+		]
+	> => {
+		const yieldEvery = 100;
+		let i = 0;
+		const connectedEntity = props.connectedSource || props.connectedTarget;
+		const isConnected = !!connectedEntity;
+
+		const disabledOptions: ICreateSpecificEntityResultOption[] = [];
+		const enabledOptions: ICreateSpecificEntityResultOption[] = [];
+
+		for (const item of items) {
+			const entity = item.entity;
+			const optionDisabledReasons: string[] = [];
+
+			// --- (All your disabling logic from the original function) ---
+			if (
+				isConnected &&
+				[
+					EntityType.DefinitionEntity,
+					EntityType.BuiltInBaseEntity
+				].includes(entity.type)
+			) {
+				optionDisabledReasons.push(
+					'Declarations cannot be connected to any logic and must stand on their own.'
+				);
+			} else if (
+				ConnectionNodeType.CalledBy === props.connectedNodeType &&
+				[
+					EntityType.GlobalEvent,
+					EntityType.FunctionDeclaration
+				].includes(entity.type)
+			) {
+				optionDisabledReasons.push(
+					'Trigger nodes cannot be called by other nodes. They are the starting point of the logic.'
+				);
+			} else if (
+				ConnectionNodeType.PropertyOut === props.connectedNodeType &&
+				EntityType.VariableDeclaration !== entity.type
+			) {
+				optionDisabledReasons.push(
+					'This node cannot receive values read from other nodes.'
+				);
+			} else if (
+				ConnectionNodeType.PropertyIn === props.connectedNodeType &&
+				VALUE_WRITING_TYPES.includes(entity.type)
+			) {
+				optionDisabledReasons.push(
+					'This node cannot set values to other nodes.'
+				);
+			}
+
+			if (entity.type === EntityType.ActionDescriptor) {
+				const hasAlreadyBeenImplemented =
+					!!props.project.logic.events.find(
+						(event) => event.implements?.id === entity?.id
+					);
+				if (hasAlreadyBeenImplemented) {
+					optionDisabledReasons.push(
+						'This global event has already been implemented.'
+					);
+				}
+			}
+
+			if (entity.type === EntityType.VariableDeclaration) {
+				if (isConnected) {
+					const isCompatibleScope = checkScopeCompatibility(
+						connectedEntity,
+						entity,
+						props.project.logic
+					);
+					if (
+						!isCompatibleScope.compatible &&
+						isCompatibleScope.type !==
+							ScopeCompatibilityType.BIsGlobalAIsNot
+					) {
+						optionDisabledReasons.push(
+							'The variable declaration is not from a compatible scope.'
+						);
+					}
+				} else {
+					if (entity.parent?.type !== EntityType.Project) {
+						optionDisabledReasons.push(
+							'Only global variable declarations can be used at the top level.'
+						);
+					}
+				}
+			}
+			// --- (End of disabling logic) ---
+
+			if (optionDisabledReasons.length) {
+				disabledOptions.push({
+					...item,
+					disabledReasons: optionDisabledReasons
+				});
+			} else {
+				enabledOptions.push({
+					...item,
+					disabledReasons: []
+				});
+			}
+
+			if (++i % yieldEvery === 0) {
+				await yieldToEventLoop();
+			}
+		}
+
+		Logger.log(
+			'enabledOptions: ',
+			enabledOptions.map((e) =>
+				resolveEntityName(e.entity, e.entity.project)
+			)
+		);
+
+		return [enabledOptions, disabledOptions];
+	};
+
+	const onSearch = (newValue: string) => {
+		if (!hasSearched) {
+			setHasSearched(true);
+		}
+		setSearchValue(newValue);
+		// The actual data fetching is now handled by the useEffect
+		// watching deferredSearchValue
+	};
+
+	// Main effect for loading all data
+	useEffect(() => {
+		// This function runs when the component mounts and when the search value changes
+		const loadAllData = async () => {
+			// Set both loading states
+			setIsBaseLoading(true);
+			setIsSpecificLoading(true);
+
+			// We can run these in parallel
+			const basePromise = (async () => {
+				const [newBaseEntityResults, newBaseEntityDisabledResults] =
+					getBasesEntityResults(deferredSearchValue);
+				setBaseEntityResults(newBaseEntityResults);
+				setBaseEntityDisabledResults(newBaseEntityDisabledResults);
+				setIsBaseLoading(false);
+			})();
+
+			const specificPromise = (async () => {
+				const [
+					newSpecificEntityResults,
+					newSpecificEntityDisabledResults
+				] = await getSpecificEntityResults(deferredSearchValue);
+				setSpecificEntityResults(newSpecificEntityResults);
+				setSpecificEntityDisabledResults(
+					newSpecificEntityDisabledResults
+				);
+				setIsSpecificLoading(false);
+			})();
+
+			await Promise.all([basePromise, specificPromise]);
+		};
+
+		// Focus the input field when the component opens
+		if (props.canvasObject.element) {
+			const searchField =
+				rootElementRef.current?.querySelector(
+					'#entity-creation-search-field'
+				) ||
+				props.canvasObject.element.querySelector(
+					'#entity-creation-search-field'
+				);
+			if (searchField) {
+				(searchField as HTMLInputElement).focus();
+			}
+		}
+
+		loadAllData();
+	}, [props.project, deferredSearchValue]); // Re-run when project or search value changes
+
+	// Wheel event listener cleanup
+	useEffect(() => {
+		const el = rootElementRef.current;
+		if (!el) return;
+
+		const onWheel = (e: WheelEvent) => {
+			const isZoomGesture = e.ctrlKey || e.metaKey;
+			const withinList = Boolean(
+				(e.target as HTMLElement).closest(
+					'.canvas__new-entity-menu__section-list'
+				)
+			);
+
+			if (withinList && !isZoomGesture) {
+				e.stopPropagation();
+				return;
+			}
+
+			e.preventDefault();
+			props.canvasObject.canvas.handleOnZoomMouseWheel(e);
+		};
+
+		el.addEventListener('wheel', onWheel, { passive: false });
+		el.addEventListener('mousewheel', onWheel as EventListener, {
+			passive: false
+		});
+		el.addEventListener('DOMMouseScroll', onWheel as EventListener, {
+			passive: false
+		});
+
+		return () => {
+			el.removeEventListener('wheel', onWheel);
+			el.removeEventListener('mousewheel', onWheel as EventListener);
+			el.removeEventListener('DOMMouseScroll', onWheel as EventListener);
+		};
+	}, [props.canvasObject.canvas]);
+
+	// --- Lifecycle props ---
+	useEffect(() => {
+		const element = rootElementRef.current;
+		if (!!element && document.contains(element)) {
+			props.onMount?.(element);
+		}
+		return () => {
+			props.onUnmount?.();
+		};
+	}, [props.onMount, props.onUnmount]);
+
+	useEffect(() => {
+		const element = rootElementRef.current;
+		if (element) {
+			props.onUpdate?.(element);
+		}
+	}, [props, props.onUpdate]);
+
+	useLayoutEffect(() => {
+		props.onBeforeUpdate?.();
+	}, [props, props.onBeforeUpdate]);
+
+	// --- Resolution logic for display ---
+	const resolveBaseSectionCollapsed = () => {
+		if (baseEntitiesSectionCollapsed === false) return false;
+		if (baseEntitiesSectionCollapsed === true) return true;
+		return false;
+	};
+
+	const resolveSpecificSectionCollapsed = () => {
+		return (
+			specificEntitiesSectionCollapsed === true ||
+			(specificEntitiesSectionCollapsed === null && !hasSearched)
+		);
+	};
+
+	const baseSectionCollapsed = resolveBaseSectionCollapsed();
+	const specificSectionCollapsed = resolveSpecificSectionCollapsed();
+
+	const flatRenderedItems: Array<{
+		type: 'base' | 'specific';
+		disabled: boolean;
+		option: any;
+	}> = [];
+	if (!baseSectionCollapsed) {
+		baseEntityResults.forEach((o) =>
+			flatRenderedItems.push({ type: 'base', disabled: false, option: o })
+		);
+		baseEntityDisabledResults.forEach((o) =>
+			flatRenderedItems.push({ type: 'base', disabled: true, option: o })
+		);
+	}
+	if (!specificSectionCollapsed) {
+		specificEntityResults.forEach((o) =>
+			flatRenderedItems.push({
+				type: 'specific',
+				disabled: false,
+				option: o
+			})
+		);
+		specificEntityDisabledResults.forEach((o) =>
+			flatRenderedItems.push({
+				type: 'specific',
+				disabled: true,
+				option: o
+			})
+		);
+	}
+
+	const successId = getCreateEntityMenuSuccessNodeId();
+	const failureId = getCreateEntityMenuFailureNodeId();
+
+	const showSuccessFailureNodes =
+		!!props.connectedTarget &&
+		[ConnectionNodeType.CalledBy].includes(props.connectedNodeType);
+
+	const showMainValueOutput =
+		!!props.connectedTarget &&
+		[ConnectionNodeType.PropertyIn].includes(props.connectedNodeType);
+
+	const showMainValueInput =
+		!!props.connectedSource &&
+		[ConnectionNodeType.PropertyOut].includes(props.connectedNodeType);
+
+	const showMainHeaderButton = !showMainValueInput;
+
+	// This is the spinner component to show while loading
+	const loaderSpinner = (
+		<CircularProgress
+			size={16}
+			sx={{ color: 'rgba(0, 0, 0, 0.54)', margin: '0 4px' }}
+		/>
+	);
+
+	return (
+		<div
+			ref={rootElementRef}
+			className="canvas__new-entity-menu"
+			onClick={(e) => {
+				e.stopPropagation();
+			}}
+		>
+			{showMainHeaderButton && (
+				<div
+					className="test-entity-button large"
+					id={getCreateEntityMenuHeaderNodeId()}
+					{...{
+						[Canvas.OBJ_ATTR_NAME]:
+							getCreateEntityMenuHeaderNodeId()
+					}}
+					style={{ backgroundColor: 'white' }}
+				>
+					<span
+						style={{
+							display: 'flex',
+							gap: '6px',
+							alignItems: 'center',
+							position: 'relative',
+							left: '1px',
+							top: '1px'
+						}}
+					>
+						<i className="fa-solid fa-plus"></i>
+					</span>
+				</div>
+			)}
+			<div className="canvas__new-entity-menu__header">
+				<h4 className="canvas__new-entity-menu__title">Add node</h4>
+				{showSuccessFailureNodes && (
+					<div
+						style={{ top: '8px' }}
+						className="canvas__node__float-right canvas__node__success-error-node-stack"
+					>
+						<span
+							{...{
+								[Canvas.OBJ_ATTR_NAME]: `${successId}--container`
+							}}
+							id={`${successId}--container`}
+						>
+							<div
+								className="canvas__large-node canvas__node__success"
+								style={{ cursor: 'unset' }}
+								{...{
+									[Canvas.OBJ_ATTR_NAME]: successId
+								}}
+								id={successId}
+							>
+								<div
+									{...{
+										[Canvas.OBJ_ATTR_NAME]: `${successId}--center-ref`
+									}}
+									id={`${successId}--center-ref`}
+									className="canvas__large-node__center-ref"
+								></div>
+								<div>
+									<i className="fa-solid fa-check"></i>
+								</div>
+							</div>
+						</span>
+						<span
+							{...{
+								[Canvas.OBJ_ATTR_NAME]: `${failureId}--container`
+							}}
+							id={`${failureId}--container`}
+						>
+							<div
+								className="canvas__large-node canvas__node__failure"
+								style={{ cursor: 'unset' }}
+								{...{
+									[Canvas.OBJ_ATTR_NAME]: failureId
+								}}
+								id={failureId}
+							>
+								<div
+									{...{
+										[Canvas.OBJ_ATTR_NAME]: `${failureId}--center-ref`
+									}}
+									id={`${failureId}--center-ref`}
+									className="canvas__large-node__center-ref"
+								></div>
+								<div>
+									<i className="fa-solid fa-xmark"></i>
+								</div>
+							</div>
+						</span>
+					</div>
+				)}
+			</div>
+			<TextField
+				inputProps={{
+					id: 'entity-creation-search-field',
+					onKeyDown: (e: React.KeyboardEvent) => {
+						if (
+							e.key === 'ArrowDown' ||
+							(e.key === 'Tab' && !e.shiftKey)
+						) {
+							e.stopPropagation();
+							e.preventDefault();
+
+							const isLastBaseNode =
+								flatRenderedItems.length > 0 &&
+								flatRenderedItems[focusedIndex]?.type ===
+									'base' &&
+								focusedIndex === flatRenderedItems.length - 1;
+
+							let maxIndex = flatRenderedItems.length - 1;
+
+							if (isLastBaseNode && specificSectionCollapsed) {
+								setSpecificEntitiesSectionCollapsed(false);
+								maxIndex +=
+									specificEntityResults.length +
+									specificEntityDisabledResults.length;
+							}
+
+							setFocusedIndex((prev) =>
+								Math.min(prev + 1, Math.max(0, maxIndex))
+							);
+						} else if (
+							e.key === 'ArrowUp' ||
+							(e.key === 'Tab' && e.shiftKey)
+						) {
+							e.stopPropagation();
+							e.preventDefault();
+
+							const isFirstSpecificNode =
+								flatRenderedItems.length > 0 &&
+								flatRenderedItems[focusedIndex]?.type ===
+									'specific' &&
+								focusedIndex === 0;
+
+							if (isFirstSpecificNode && baseSectionCollapsed) {
+								const baseCount =
+									baseEntityResults.length +
+									baseEntityDisabledResults.length;
+								if (baseCount > 0) {
+									setBaseEntitiesSectionCollapsed(false);
+									setFocusedIndex(baseCount - 1);
+									return;
+								}
+							}
+
+							setFocusedIndex((prev) => Math.max(prev - 1, 0));
+						} else if (e.key === 'Enter') {
+							e.stopPropagation();
+							e.preventDefault();
+							const item = flatRenderedItems[focusedIndex];
+							if (item && !item.disabled) {
+								if (item.type === 'base') {
+									props.onCreateBaseEntity(
+										item.option.type,
+										e as any
+									);
+								} else {
+									props.onCreateFromSpecificEntity(
+										item.option.entity,
+										e as any
+									);
+								}
+							}
+						}
+					}
+				}}
+				variant="filled"
+				label="Find node"
+				iconEnd="fa-solid fa-magnifying-glass"
+				value={searchValue}
+				onChange={(value: any) => {
+					onSearch(value);
+				}}
+			/>
+			{/* This element fakes the main value input of a normal card, so we can attach connections to it */}
+			{showMainValueInput && (
+				<div
+					style={{
+						position: 'absolute',
+						height: '50px',
+						width: '15px',
+						backgroundColor: 'white',
+						left: '-15px',
+						top: '41px',
+						borderRadius: '10px 0 0 10px'
+					}}
+				>
+					<div
+						id={getCreateEntityMenuMainValueInputNodeId()}
+						{...{
+							[Canvas.OBJ_ATTR_NAME]:
+								getCreateEntityMenuMainValueInputNodeId()
+						}}
+						className={[
+							'canvas__small-node',
+							'canvas__small-node--position',
+							'canvas-property__node__connected',
+							'canvas__node__active',
+							'canvas__node__left'
+						].join(' ')}
+						style={{
+							top: '50%',
+							transform: 'translateY(-50%)'
+						}}
+					/>
+				</div>
+			)}
+			{/* This element fakes the main value output of a normal card, so we can attach connections to it */}
+			{showMainValueOutput && (
+				<div
+					style={{
+						position: 'absolute',
+						height: '50px',
+						width: '15px',
+						backgroundColor: 'white',
+						right: '-15px',
+						top: '41px',
+						borderRadius: '0 10px 10px 0'
+					}}
+				>
+					<div
+						id={getCreateEntityMenuMainValueOutputNodeId()}
+						{...{
+							[Canvas.OBJ_ATTR_NAME]:
+								getCreateEntityMenuMainValueOutputNodeId()
+						}}
+						className={[
+							'canvas__small-node',
+							'canvas__small-node--position',
+							'canvas-property__node__connected',
+							'canvas__node__active'
+						].join(' ')}
+						style={{
+							top: '50%',
+							transform: 'translateY(-50%)'
+						}}
+					/>
+				</div>
+			)}
+			<button
+				className="canvas__new-entity-menu__section-title-container"
+				onClick={() => {
+					const newCollapsedState = !resolveBaseSectionCollapsed();
+					setBaseEntitiesSectionCollapsed(newCollapsedState);
+				}}
+			>
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						gap: '8px'
+					}}
+				>
+					<p className="canvas__new-entity-menu__section-title">
+						Node types
+					</p>
+					{isBaseLoading ? (
+						loaderSpinner
+					) : (
+						<Badge
+							className="canvas-badge-overrides"
+							id="create-new-entity-menu--base-entities--counter-badge"
+							ref={canvasPopupBaseEntitiesCountToolip.anchorRef}
+						>
+							{baseEntityResults.length.toString()}
+						</Badge>
+					)}
+				</div>
+				<i
+					className={`fa-solid ${
+						baseSectionCollapsed
+							? 'fa-chevron-down'
+							: 'fa-chevron-up'
+					}`}
+				></i>
+			</button>
+			{!baseSectionCollapsed && (
+				<ul className="canvas__new-entity-menu__section-list">
+					{baseEntityResults.map((option) => {
+						const isFocused =
+							flatRenderedItems[focusedIndex]?.option === option;
+						return (
+							<CreateBaseEntityOption
+								key={option.type}
+								option={option}
+								isFocused={isFocused}
+								parentCanvasObject={props.canvasObject}
+								onCreateBaseEntity={props.onCreateBaseEntity}
+								project={props.project}
+							/>
+						);
+					})}
+					{baseEntityDisabledResults.map((option) => {
+						const isFocused =
+							flatRenderedItems[focusedIndex]?.option === option;
+						return (
+							<CreateBaseEntityOption
+								key={option.type}
+								option={option}
+								isFocused={isFocused}
+								parentCanvasObject={props.canvasObject}
+								onCreateBaseEntity={props.onCreateBaseEntity}
+								project={props.project}
+							/>
+						);
+					})}
+				</ul>
+			)}
+			<hr className="canvas__new-entity-menu__separator" />
+			<button
+				className="canvas__new-entity-menu__section-title-container"
+				onClick={() => {
+					setSpecificEntitiesSectionCollapsed(
+						!resolveSpecificSectionCollapsed()
+					);
+				}}
+			>
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						gap: '8px'
+					}}
+				>
+					<p className="canvas__new-entity-menu__section-title">
+						Specific nodes
+					</p>
+					{isSpecificLoading ? (
+						loaderSpinner
+					) : (
+						<Badge
+							className="canvas-badge-overrides"
+							id="create-new-entity-menu--specific-entities--counter-badge"
+							ref={
+								canvasPopupSpecificEntitiesCountToolip.anchorRef
+							}
+						>
+							{specificEntityResults.length.toString()}
+						</Badge>
+					)}
+				</div>
+				<i
+					className={`fa-solid ${
+						specificSectionCollapsed
+							? 'fa-chevron-down'
+							: 'fa-chevron-up'
+					}`}
+				></i>
+			</button>
+			{!specificSectionCollapsed &&
+				!isSpecificLoading && // <-- Don't show "no results" while loading
+				!specificEntityResults.length &&
+				!specificEntityDisabledResults.length && (
+					<p className="canvas__new-entity-menu__section-empty-placeholder">
+						No results found
+					</p>
+				)}
+			{!specificSectionCollapsed &&
+				(!!specificEntityResults.length ||
+					!!specificEntityDisabledResults.length) && (
+					<ul
+						className="canvas__new-entity-menu__section-list"
+						id="create-new-entity-menu--specific-entities--section-list"
+						onScroll={(e) => {
+							e.stopPropagation();
+
+							const list = document.getElementById(
+								'create-new-entity-menu--specific-entities--section-list'
+							);
+							if (list) {
+								const currentScrollTop = list.scrollTop || 0;
+								const height = list.scrollHeight || 0;
+
+								const scrollUpButton = document.querySelector(
+									'.canvas__new-entity-menu__scroll-up-button'
+								) as HTMLDivElement;
+								const scrollDownButton = document.querySelector(
+									'.canvas__new-entity-menu__scroll-down-button'
+								) as HTMLDivElement;
+
+								if (scrollUpButton && scrollDownButton) {
+									scrollUpButton.style.visibility =
+										currentScrollTop === 0
+											? 'hidden'
+											: 'visible';
+									scrollDownButton.style.visibility =
+										currentScrollTop + 400 >= height
+											? 'hidden'
+											: 'visible';
+								}
+							}
+						}}
+					>
+						{specificEntityResults.map((option) => {
+							const isFocused =
+								flatRenderedItems[focusedIndex]?.option ===
+								option;
+							return (
+								<CreateSpecificEntityOption
+									key={option.entity.id}
+									option={option}
+									isFocused={isFocused}
+									parentCanvasObject={props.canvasObject}
+									onCreateFromSpecificEntity={
+										props.onCreateFromSpecificEntity
+									}
+									project={props.project}
+								/>
+							);
+						})}
+						{specificEntityDisabledResults.map((option) => {
+							const isFocused =
+								flatRenderedItems[focusedIndex]?.option ===
+								option;
+							return (
+								<CreateSpecificEntityOption
+									key={option.entity.id}
+									option={option}
+									isFocused={isFocused}
+									parentCanvasObject={props.canvasObject}
+									onCreateFromSpecificEntity={
+										props.onCreateFromSpecificEntity
+									}
+									project={props.project}
+								/>
+							);
+						})}
+						<button
+							style={{ visibility: 'hidden' }}
+							className="canvas__new-entity-menu__scroll-button canvas__new-entity-menu__scroll-up-button"
+							onClick={(e) => {
+								const list = document.getElementById(
+									'create-new-entity-menu--specific-entities--section-list'
+								);
+								if (list) {
+									list.scrollTo({
+										top: 0,
+										behavior: 'smooth'
+									});
+									e.currentTarget.style.visibility = 'hidden';
+								}
+							}}
+						>
+							<i className="fa-duotone fa-arrow-up-to-line"></i>
+						</button>
+						<button
+							className="canvas__new-entity-menu__scroll-button canvas__new-entity-menu__scroll-down-button"
+							onClick={(e) => {
+								const list = document.getElementById(
+									'create-new-entity-menu--specific-entities--section-list'
+								);
+								if (list) {
+									const currentScrollBottom =
+										(list.scrollTop || 0) + 400;
+									const height = list.scrollHeight || 0;
+
+									list.scrollTo({
+										top: currentScrollBottom + 380,
+										behavior: 'smooth'
+									});
+
+									if (currentScrollBottom + 380 >= height) {
+										e.currentTarget.style.visibility =
+											'hidden';
+									}
+								}
+							}}
+						>
+							<i className="fa-solid fa-arrow-down"></i>
+						</button>
+					</ul>
+				)}
+		</div>
+	);
+};
+
+export default CreateEntityMenu;