Feature/user directory elementor widget

Gruntfile.js

@@ -164,6 +164,20 @@ module.exports = function( grunt) {
                 }
             },
 
+            userDirectory: {
+                files: [
+                    'src/js/user-directory/**/*.js',
+                    'src/js/user-directory/**/*.jsx',
+                    'src/js/user-directory/**/*.css',
+                    'src/js/user-directory/styles/*.css',
+                    'modules/user-directory/**/*.php',
+                ],
+                tasks: ['build-user-directory'],
+                options: {
+                    spawn: false
+                }
+            },
+
         },
 
         // Clean up build directory
@@ -278,6 +292,9 @@ module.exports = function( grunt) {
             npm_build_ai_form_builder: {
                 command: 'npm run build:ai-form-builder',
             },
+            npm_build_user_directory: {
+                command: 'npm run build:user-directory',
+            },
             tailwind: {
                 command: function ( input, output ) {
                     return `npx tailwindcss -i ${input} -o ${output} --minify`;
@@ -306,7 +323,7 @@ module.exports = function( grunt) {
     grunt.loadNpmTasks( 'grunt-shell' );
     grunt.loadNpmTasks( 'grunt-postcss' );
 
-    grunt.registerTask( 'default', [ 'less', 'concat', 'uglify', 'i18n', 'tailwind' ] );
+    grunt.registerTask( 'default', [ 'less', 'concat', 'uglify', 'i18n', 'tailwind', 'build-user-directory' ] );
 
     // file auto generation
     grunt.registerTask( 'i18n', [ 'makepot' ] );
@@ -316,6 +333,11 @@ module.exports = function( grunt) {
     grunt.registerTask( 'release', [ 'less', 'concat', 'uglify', 'i18n', 'readme', 'tailwind', 'tailwind-minify' ] );
     grunt.registerTask( 'zip', [ 'shell:npm_build', 'clean', 'copy', 'compress' ] );
 
+    // User Directory CSS build task
+    grunt.registerTask( 'build-user-directory', 'Build User Directory CSS with Tailwind', function() {
+        grunt.task.run('shell:npm_build_user_directory');
+    });
+
     grunt.event.on('watch', function(action, filepath, target) {
         if (target === 'tailwind') {
             grunt.task.run('tailwind');

assets/css/admin/wpuf-module.css

@@ -42,6 +42,20 @@
     position: relative;
 }
 
+.wpuf-modules-section-title {
+    clear: both;
+}
+
+.wpuf-free-modules {
+    margin-bottom: 20px;
+}
+
+.wpuf-free-modules::after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
 .wpuf-modules .plugin-card .plugin-name {
     color: #0073aa;
 }
@@ -78,7 +92,7 @@
     padding-top: 26px;
 }
 
-.plugin-card:hover .form-create-overlay {
+.wpuf-pro-modules-preview .plugin-card:hover .form-create-overlay {
     -webkit-opacity: 1;
     opacity: 1;
     z-index: 1;

assets/css/elementor-user-directory.css

@@ -0,0 +1,69 @@
+/**
+ * DESCRIPTION: Elementor-specific CSS overrides for the User Directory widget.
+ */
+
+/* Wrapper */
+.wpuf-elementor-user-directory-wrapper {
+	width: 100%;
+}
+
+/* Empty state for Elementor editor */
+.wpuf-elementor-ud-empty-state {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 60px 20px;
+	text-align: center;
+	background: #f9fafb;
+	border: 2px dashed #d1d5db;
+	border-radius: 8px;
+}
+
+.wpuf-elementor-ud-empty-icon {
+	color: #9ca3af;
+	margin-bottom: 16px;
+}
+
+.wpuf-elementor-ud-empty-text {
+	font-size: 16px;
+	font-weight: 600;
+	color: #374151;
+	margin: 0 0 8px;
+}
+
+.wpuf-elementor-ud-empty-hint {
+	font-size: 14px;
+	color: #6b7280;
+	margin: 0;
+}
+
+.wpuf-elementor-ud-empty-hint a {
+	color: #7c3aed;
+	text-decoration: underline;
+}
+
+/* Profile preview separator in Elementor editor */
+.wpuf-elementor-profile-separator {
+	display: flex;
+	align-items: center;
+	margin: 40px 0 30px;
+	gap: 16px;
+}
+
+.wpuf-elementor-profile-separator::before,
+.wpuf-elementor-profile-separator::after {
+	content: '';
+	flex: 1;
+	height: 1px;
+	background: #d1d5db;
+}
+
+.wpuf-elementor-profile-separator span {
+	font-size: 13px;
+	font-weight: 600;
+	color: #6b7280;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	white-space: nowrap;
+}