@sociallane/elements 1.0.0

package/packages/widgets/widget-filter/data/view.php

@@ -0,0 +1,527 @@
+<?php
+/**
+ * Data Preparation: Widget Filter
+ *
+ * Prepares widget catalog data with categories and filtering.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Widget category definitions
+ */
+function sociallane_widget_categories(): array {
+	return [
+		'all'        => [
+			'label' => esc_html__( 'All Widgets', 'sociallane-elements' ),
+			'icon'  => 'eicon-apps',
+		],
+		'hero'       => [
+			'label' => esc_html__( 'Heroes', 'sociallane-elements' ),
+			'icon'  => 'eicon-featured-image',
+		],
+		'nav'        => [
+			'label' => esc_html__( 'Navigation', 'sociallane-elements' ),
+			'icon'  => 'eicon-nav-menu',
+		],
+		'footer'     => [
+			'label' => esc_html__( 'Footers', 'sociallane-elements' ),
+			'icon'  => 'eicon-footer',
+		],
+		'cta'        => [
+			'label' => esc_html__( 'CTAs', 'sociallane-elements' ),
+			'icon'  => 'eicon-call-to-action',
+		],
+		'newsletter' => [
+			'label' => esc_html__( 'Newsletter', 'sociallane-elements' ),
+			'icon'  => 'eicon-newsletter',
+		],
+		'form'       => [
+			'label' => esc_html__( 'Forms', 'sociallane-elements' ),
+			'icon'  => 'eicon-form-horizontal',
+		],
+		'grid'       => [
+			'label' => esc_html__( 'Grids', 'sociallane-elements' ),
+			'icon'  => 'eicon-posts-grid',
+		],
+		'bento'      => [
+			'label' => esc_html__( 'Bento', 'sociallane-elements' ),
+			'icon'  => 'eicon-snap-grid',
+		],
+		'testimonial' => [
+			'label' => esc_html__( 'Testimonials', 'sociallane-elements' ),
+			'icon'  => 'eicon-testimonial',
+		],
+		'feature'    => [
+			'label' => esc_html__( 'Features', 'sociallane-elements' ),
+			'icon'  => 'eicon-icon-box',
+		],
+		'content'    => [
+			'label' => esc_html__( 'Content', 'sociallane-elements' ),
+			'icon'  => 'eicon-text',
+		],
+		'intro'      => [
+			'label' => esc_html__( 'Intro', 'sociallane-elements' ),
+			'icon'  => 'eicon-heading',
+		],
+		'logo'       => [
+			'label' => esc_html__( 'Logos', 'sociallane-elements' ),
+			'icon'  => 'eicon-logo',
+		],
+		'pricing'    => [
+			'label' => esc_html__( 'Pricing', 'sociallane-elements' ),
+			'icon'  => 'eicon-price-table',
+		],
+		'social-proof' => [
+			'label' => esc_html__( 'Social Proof', 'sociallane-elements' ),
+			'icon'  => 'eicon-review',
+		],
+		'page-hero'  => [
+			'label' => esc_html__( 'Page Hero', 'sociallane-elements' ),
+			'icon'  => 'eicon-featured-image',
+		],
+		'posts'      => [
+			'label' => esc_html__( 'Posts', 'sociallane-elements' ),
+			'icon'  => 'eicon-posts-carousel',
+		],
+		'blog'       => [
+			'label' => esc_html__( 'Blog', 'sociallane-elements' ),
+			'icon'  => 'eicon-post-list',
+		],
+		'services'   => [
+			'label' => esc_html__( 'Services', 'sociallane-elements' ),
+			'icon'  => 'eicon-info-box',
+		],
+		'card'       => [
+			'label' => esc_html__( 'Cards', 'sociallane-elements' ),
+			'icon'  => 'eicon-image-box',
+		],
+	];
+}
+
+/**
+ * Widget category patterns for classification
+ */
+function sociallane_widget_category_patterns(): array {
+	return [
+		'hero'       => '/^hero-/',
+		'nav'        => '/^nav-/',
+		'footer'     => '/^footer/',
+		'cta'        => '/^cta-/',
+		'newsletter' => '/^newsletter-/',
+		'form'       => '/^form-/',
+		'grid'       => '/^grid-/',
+		'bento'      => '/^bento-/',
+		'testimonial' => '/^testimonial/',
+		'feature'    => '/^feature-/',
+		'content'    => '/^content-/',
+		'intro'      => '/^intro-/',
+		'logo'       => '/^logo-/',
+		'pricing'    => '/^pricing-/',
+		'social-proof' => '/^social-proof/',
+		'page-hero'  => '/^page-hero/',
+		'posts'      => '/^posts-/',
+		'blog'       => '/^blog-/',
+		'services'   => '/^services/',
+		'card'       => '/^card-/',
+	];
+}
+
+/**
+ * Get widget list from widgets.json or use default list
+ */
+function sociallane_get_widget_list(): array {
+	$widgets = [];
+
+	// Try to read from widgets.json if it exists
+	$widgets_json_path = SOCIALLANE_ELEMENTS_PATH . 'widgets.json';
+	if ( file_exists( $widgets_json_path ) ) {
+		$json_content = file_get_contents( $widgets_json_path );
+		$data = json_decode( $json_content, true );
+		if ( isset( $data['widgets'] ) && is_array( $data['widgets'] ) ) {
+			$widgets = $data['widgets'];
+		}
+	}
+
+	// Fallback to default list if empty
+	if ( empty( $widgets ) ) {
+		$widgets = [
+			'hero-split',
+			'hero-stacked-image',
+			'hero-centered-image',
+			'hero-collage',
+			'hero-overlay-single',
+			'hero-overlay-slider',
+			'hero-saas-centered',
+			'hero-saas-split',
+			'hero-saas-stacked',
+			'hero-announcement',
+			'nav-default',
+			'nav-centered',
+			'nav-minimal',
+			'nav-compact',
+			'nav-floating',
+			'footer',
+			'footer-brand',
+			'footer-links-contact',
+			'cta-split',
+			'cta-banner',
+			'cta-notify',
+			'newsletter-card',
+			'newsletter-section',
+			'form-contact',
+			'grid-team',
+			'grid-case-studies',
+			'grid-components',
+			'posts-grid',
+			'posts-grid-overlay',
+			'bento-grid-4',
+			'bento-grid-5',
+			'bento-grid-6',
+			'bento-portfolio-4',
+			'bento-portfolio-5',
+			'bento-portfolio-6',
+			'testimonial-quote',
+			'testimonials-grid',
+			'testimonials-masonry',
+			'testimonials-bento',
+			'feature-grid',
+			'feature-grid-centered',
+			'feature-list',
+			'feature-list-cta',
+			'content-block',
+			'intro-text',
+			'intro-pattern',
+			'logo-grid-centered',
+			'logo-grid-row',
+			'logo-grid-split',
+			'pricing-table',
+			'social-proof',
+			'social-proof-trust',
+			'page-hero-left',
+			'page-hero-center',
+			'services',
+			'card-hover-reveal',
+			'client-logos',
+			'section-stats',
+			'faq-stacked',
+			'faq-split',
+			'faq-centered',
+			'blog-grid',
+		];
+	}
+
+	return $widgets;
+}
+
+/**
+ * Categorize widgets
+ */
+function sociallane_categorize_widgets( array $widgets ): array {
+	$patterns   = sociallane_widget_category_patterns();
+	$categorized = [];
+
+	foreach ( $widgets as $widget ) {
+		$assigned = false;
+
+		foreach ( $patterns as $category => $pattern ) {
+			if ( preg_match( $pattern, $widget ) ) {
+				if ( ! isset( $categorized[ $category ] ) ) {
+					$categorized[ $category ] = [];
+				}
+				$categorized[ $category ][] = $widget;
+				$assigned = true;
+				break;
+			}
+		}
+
+		// Unclassified widgets go in 'other'
+		if ( ! $assigned ) {
+			if ( ! isset( $categorized['other'] ) ) {
+				$categorized['other'] = [];
+			}
+			$categorized['other'][] = $widget;
+		}
+	}
+
+	return $categorized;
+}
+
+/**
+ * Format widget name for display
+ */
+function sociallane_format_widget_name( string $widget ): string {
+	// Convert hyphens to spaces and capitalize
+	$name = str_replace( '-', ' ', $widget );
+	$name = ucwords( $name );
+
+	// Handle special cases
+	$name = str_replace( 'Cta', 'CTA', $name );
+	$name = str_replace( 'SaaS', 'SaaS', $name );
+	$name = str_replace( 'B2b', 'B2B', $name );
+	$name = str_replace( 'Ui', 'UI', $name );
+	$name = str_replace( 'Ios', 'iOS', $name );
+	$name = str_replace( 'Api', 'API', $name );
+	$name = str_replace( 'Jwt', 'JWT', $name );
+
+	return $name;
+}
+
+/**
+ * Widget preview configurations
+ * Defines preview HTML structure for each widget type
+ */
+function sociallane_widget_previews(): array {
+	return [
+		// Hero widgets - show hero preview structure
+		'hero' => [
+			'layout' => 'hero',
+			'preview' => '<div class="space-y-4"><div class="h-3 bg-primary/20 rounded w-3/4"></div><div class="h-8 bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-4 bg-neutral-100 dark:bg-neutral-800 rounded w-full"></div><div class="h-4 bg-neutral-100 dark:bg-neutral-800 rounded w-5/6"></div><div class="flex gap-2 mt-4"><div class="h-10 w-24 bg-primary rounded"></div><div class="h-10 w-24 border-2 border-neutral-300 dark:border-neutral-600 rounded"></div></div></div>',
+		],
+		// Navigation widgets
+		'nav' => [
+			'layout' => 'nav',
+			'preview' => '<div class="flex items-center justify-between"><div class="flex gap-4"><div class="h-4 w-16 bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-4 w-16 bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-4 w-16 bg-neutral-200 dark:bg-neutral-700 rounded"></div></div><div class="h-8 w-24 bg-primary rounded"></div></div>',
+		],
+		// Footer widgets
+		'footer' => [
+			'layout' => 'footer',
+			'preview' => '<div class="grid grid-cols-3 gap-4"><div class="space-y-2"><div class="h-4 w-20 bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-3 w-full bg-neutral-100 dark:bg-neutral-800 rounded"></div><div class="h-3 w-5/6 bg-neutral-100 dark:bg-neutral-800 rounded"></div></div><div class="space-y-2"><div class="h-4 w-20 bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-3 w-full bg-neutral-100 dark:bg-neutral-800 rounded"></div><div class="h-3 w-5/6 bg-neutral-100 dark:bg-neutral-800 rounded"></div></div><div class="space-y-2"><div class="h-4 w-20 bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="flex gap-1"><div class="h-6 w-6 rounded-full bg-neutral-300 dark:bg-neutral-600"></div><div class="h-6 w-6 rounded-full bg-neutral-300 dark:bg-neutral-600"></div><div class="h-6 w-6 rounded-full bg-neutral-300 dark:bg-neutral-600"></div></div></div></div>',
+		],
+		// CTA widgets
+		'cta' => [
+			'layout' => 'cta',
+			'preview' => '<div class="text-center space-y-4"><div class="h-6 bg-primary/20 rounded w-1/3 mx-auto"></div><div class="h-10 bg-neutral-200 dark:bg-neutral-700 rounded max-w-md mx-auto"></div><div class="h-5 bg-neutral-100 dark:bg-neutral-800 rounded w-3/4 mx-auto"></div></div>',
+		],
+		// Newsletter widgets
+		'newsletter' => [
+			'layout' => 'newsletter',
+			'preview' => '<div class="space-y-3"><div class="h-5 w-1/3 bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="flex gap-2"><div class="flex-1 h-10 bg-neutral-100 dark:bg-neutral-800 rounded"></div><div class="h-10 w-24 bg-primary rounded"></div></div></div>',
+		],
+		// Form widgets
+		'form' => [
+			'layout' => 'form',
+			'preview' => '<div class="space-y-3"><div class="h-4 w-1/4 bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-10 bg-neutral-100 dark:bg-neutral-800 rounded"></div><div class="h-10 bg-neutral-100 dark:bg-neutral-800 rounded"></div><div class="h-10 bg-primary rounded"></div></div>',
+		],
+		// Grid widgets
+		'grid' => [
+			'layout' => 'grid',
+			'preview' => '<div class="grid grid-cols-3 gap-2"><div class="aspect-square bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="aspect-square bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="aspect-square bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="aspect-square bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="aspect-square bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="aspect-square bg-neutral-200 dark:bg-neutral-700 rounded"></div></div>',
+		],
+		// Bento widgets
+		'bento' => [
+			'layout' => 'bento',
+			'preview' => '<div class="grid grid-cols-2 gap-2 aspect-video"><div class="bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="bg-neutral-300 dark:bg-neutral-600 rounded"></div><div class="bg-neutral-300 dark:bg-neutral-600 rounded"></div><div class="bg-neutral-200 dark:bg-neutral-700 rounded"></div></div>',
+		],
+		// Testimonial widgets
+		'testimonial' => [
+			'layout' => 'testimonial',
+			'preview' => '<div class="space-y-3"><div class="flex items-center gap-3"><div class="h-10 w-10 rounded-full bg-neutral-200 dark:bg-neutral-700"></div><div><div class="h-4 w-20 bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-3 w-16 bg-neutral-100 dark:bg-neutral-800 rounded"></div></div></div><div class="h-4 bg-neutral-100 dark:bg-neutral-800 rounded w-full"></div><div class="h-4 bg-neutral-100 dark:bg-neutral-800 rounded w-5/6"></div></div>',
+		],
+		// Feature widgets
+		'feature' => [
+			'layout' => 'feature',
+			'preview' => '<div class="grid grid-cols-2 gap-3"><div class="flex items-start gap-2"><div class="h-8 w-8 rounded bg-primary/20 flex items-center justify-center"><svg class="w-4 h-4 text-primary" fill="currentColor" viewBox="0 0 20 20"><path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg></div><div class="flex-1 space-y-1"><div class="h-4 w-24 bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-3 w-full bg-neutral-100 dark:bg-neutral-800 rounded"></div></div></div><div class="flex items-start gap-2"><div class="h-8 w-8 rounded bg-primary/20 flex items-center justify-center"><svg class="w-4 h-4 text-primary" fill="currentColor" viewBox="0 0 20 20"><path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg></div><div class="flex-1 space-y-1"><div class="h-4 w-24 bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-3 w-full bg-neutral-100 dark:bg-neutral-800 rounded"></div></div></div></div>',
+		],
+		// Content widgets
+		'content' => [
+			'layout' => 'content',
+			'preview' => '<div class="space-y-3"><div class="h-6 w-1/3 bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-4 bg-neutral-100 dark:bg-neutral-800 rounded w-full"></div><div class="h-4 bg-neutral-100 dark:bg-neutral-800 rounded w-full"></div><div class="h-4 bg-neutral-100 dark:bg-neutral-800 rounded w-3/4"></div></div>',
+		],
+		// Intro widgets
+		'intro' => [
+			'layout' => 'intro',
+			'preview' => '<div class="text-center space-y-3"><div class="h-4 w-1/4 mx-auto bg-primary/20 rounded"></div><div class="h-10 w-3/4 mx-auto bg-neutral-200 dark:bg-neutral-700 rounded"></div></div>',
+		],
+		// Logo widgets
+		'logo' => [
+			'layout' => 'logo',
+			'preview' => '<div class="flex items-center justify-center gap-4"><div class="h-8 w-16 bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-8 w-16 bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-8 w-16 bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-8 w-16 bg-neutral-200 dark:bg-neutral-700 rounded"></div></div>',
+		],
+		// Pricing widgets
+		'pricing' => [
+			'layout' => 'pricing',
+			'preview' => '<div class="grid grid-cols-3 gap-3"><div class="p-3 border border-neutral-200 dark:border-neutral-700 rounded-lg"><div class="h-4 w-16 bg-neutral-200 dark:bg-neutral-700 rounded mx-auto mb-2"></div><div class="h-6 w-12 bg-neutral-100 dark:bg-neutral-800 rounded mx-auto"></div></div><div class="p-3 border-2 border-primary rounded-lg"><div class="h-4 w-16 bg-primary/20 rounded mx-auto mb-2"></div><div class="h-6 w-12 bg-primary/10 rounded mx-auto"></div></div><div class="p-3 border border-neutral-200 dark:border-neutral-700 rounded-lg"><div class="h-4 w-16 bg-neutral-200 dark:bg-neutral-700 rounded mx-auto mb-2"></div><div class="h-6 w-12 bg-neutral-100 dark:bg-neutral-800 rounded mx-auto"></div></div></div>',
+		],
+		// Social proof widgets
+		'social-proof' => [
+			'layout' => 'social-proof',
+			'preview' => '<div class="flex items-center justify-center gap-4"><div class="flex -space-x-2"><div class="h-8 w-8 rounded-full border-2 border-white dark:border-neutral-900 bg-neutral-200 dark:bg-neutral-700"></div><div class="h-8 w-8 rounded-full border-2 border-white dark:border-neutral-900 bg-neutral-300 dark:bg-neutral-600"></div><div class="h-8 w-8 rounded-full border-2 border-white dark:border-neutral-900 bg-neutral-400 dark:bg-neutral-500"></div></div><div class="h-4 w-32 bg-neutral-200 dark:bg-neutral-700 rounded"></div></div>',
+		],
+		// Page hero widgets
+		'page-hero' => [
+			'layout' => 'page-hero',
+			'preview' => '<div class="flex items-center justify-between"><div class="space-y-2 flex-1"><div class="h-6 bg-neutral-200 dark:bg-neutral-700 rounded w-1/3"></div><div class="h-8 bg-neutral-300 dark:bg-neutral-600 rounded w-2/3"></div></div><div class="h-20 w-20 bg-neutral-200 dark:bg-neutral-700 rounded-lg ml-4"></div></div>',
+		],
+		// Posts widgets
+		'posts' => [
+			'layout' => 'posts',
+			'preview' => '<div class="grid grid-cols-2 gap-3"><div class="aspect-[4/3] bg-neutral-200 dark:bg-neutral-700 rounded overflow-hidden"><div class="h-full w-full bg-gradient-to-b from-neutral-300 dark:from-neutral-600 to-neutral-200 dark:to-neutral-700"></div></div><div class="space-y-2"><div class="h-3 w-16 bg-primary/20 rounded"></div><div class="h-5 w-full bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-4 w-3/4 bg-neutral-100 dark:bg-neutral-800 rounded"></div></div></div>',
+		],
+		// Blog widgets
+		'blog' => [
+			'layout' => 'blog',
+			'preview' => '<div class="space-y-2"><div class="flex gap-3"><div class="h-16 w-16 bg-neutral-200 dark:bg-neutral-700 rounded overflow-hidden"></div><div class="flex-1 space-y-1"><div class="h-4 w-20 bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-5 w-full bg-neutral-300 dark:bg-neutral-600 rounded"></div><div class="h-3 w-3/4 bg-neutral-100 dark:bg-neutral-800 rounded"></div></div></div><div class="flex gap-3"><div class="h-16 w-16 bg-neutral-200 dark:bg-neutral-700 rounded overflow-hidden"></div><div class="flex-1 space-y-1"><div class="h-4 w-20 bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-5 w-full bg-neutral-300 dark:bg-neutral-600 rounded"></div><div class="h-3 w-3/4 bg-neutral-100 dark:bg-neutral-800 rounded"></div></div></div></div>',
+		],
+		// Services widgets
+		'services' => [
+			'layout' => 'services',
+			'preview' => '<div class="grid grid-cols-2 gap-3"><div class="flex items-start gap-2 p-2 border border-neutral-200 dark:border-neutral-700 rounded-lg"><div class="h-8 w-8 rounded bg-primary/20 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></div><div class="space-y-1"><div class="h-4 w-20 bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-3 w-full bg-neutral-100 dark:bg-neutral-800 rounded"></div></div></div><div class="flex items-start gap-2 p-2 border border-neutral-200 dark:border-neutral-700 rounded-lg"><div class="h-8 w-8 rounded bg-primary/20 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></div><div class="space-y-1"><div class="h-4 w-20 bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-3 w-full bg-neutral-100 dark:bg-neutral-800 rounded"></div></div></div></div>',
+		],
+		// Card widgets
+		'card' => [
+			'layout' => 'card',
+			'preview' => '<div class="aspect-square bg-neutral-200 dark:bg-neutral-700 rounded-lg overflow-hidden relative"><div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div><div class="absolute bottom-2 left-2 right-2"><div class="h-4 w-3/4 bg-white/90 rounded"></div></div></div>',
+		],
+		// Stats widgets
+		'stats' => [
+			'layout' => 'stats',
+			'preview' => '<div class="grid grid-cols-4 gap-2"><div class="text-center"><div class="h-8 w-full bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-3 w-3/4 mx-auto bg-neutral-100 dark:bg-neutral-800 rounded mt-1"></div></div><div class="text-center"><div class="h-8 w-full bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-3 w-3/4 mx-auto bg-neutral-100 dark:bg-neutral-800 rounded mt-1"></div></div><div class="text-center"><div class="h-8 w-full bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-3 w-3/4 mx-auto bg-neutral-100 dark:bg-neutral-800 rounded mt-1"></div></div><div class="text-center"><div class="h-8 w-full bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-3 w-3/4 mx-auto bg-neutral-100 dark:bg-neutral-800 rounded mt-1"></div></div></div>',
+		],
+		// FAQ widgets
+		'faq' => [
+			'layout' => 'faq',
+			'preview' => '<div class="space-y-2"><div class="p-2 border border-neutral-200 dark:border-neutral-700 rounded-lg"><div class="flex items-center justify-between"><div class="h-4 w-3/4 bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-4 w-4 bg-neutral-100 dark:bg-neutral-800 rounded-full"></div></div></div><div class="p-2 border border-neutral-200 dark:border-neutral-700 rounded-lg"><div class="flex items-center justify-between"><div class="h-4 w-2/3 bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-4 w-4 bg-neutral-100 dark:bg-neutral-800 rounded-full"></div></div></div></div>',
+		],
+	];
+}
+
+/**
+ * Get widget preview configuration
+ */
+function sociallane_get_widget_preview( string $widget_name, string $category ): array {
+	$previews = sociallane_widget_previews();
+
+	// Try to match category-specific preview
+	if ( isset( $previews[ $category ] ) ) {
+		return $previews[ $category ];
+	}
+
+	// Default fallback preview
+	return [
+		'layout'  => 'default',
+		'preview' => '<div class="space-y-2"><div class="h-4 w-1/3 bg-neutral-200 dark:bg-neutral-700 rounded"></div><div class="h-8 bg-neutral-300 dark:bg-neutral-600 rounded"></div><div class="h-4 bg-neutral-100 dark:bg-neutral-800 rounded w-full"></div><div class="h-4 bg-neutral-100 dark:bg-neutral-800 rounded w-5/6"></div></div>',
+	];
+}
+
+/**
+ * Prepare view data for Widget Filter widget
+ *
+ * @param array  $settings  Raw Elementor settings
+ * @param string $widget_id Unique widget ID
+ * @return array Template-ready data
+ */
+function prepare_widget_filter_view( array $settings, string $widget_id ): array {
+	$headline       = esc_html( $settings['headline'] ?? '' );
+	$headline_tag    = in_array( $settings['headline_tag'] ?? 'h2', [ 'h1', 'h2', 'h3' ], true )
+		? $settings['headline_tag']
+		: 'h2';
+	$show_search     = ( $settings['show_search'] ?? 'yes' ) === 'yes';
+	$show_categories = ( $settings['show_categories'] ?? 'yes' ) === 'yes';
+	$columns         = in_array( $settings['columns'] ?? '3', [ '2', '3', '4' ], true ) ? $settings['columns'] : '3';
+
+	// Get widgets and categorize them
+	$widgets       = sociallane_get_widget_list();
+	$categorized   = sociallane_categorize_widgets( $widgets );
+	$categories    = sociallane_widget_categories();
+
+	// Build categories with counts
+	$category_list = [];
+	foreach ( $categories as $key => $info ) {
+		$count = count( $categorized[ $key ] ?? [] );
+		if ( $count > 0 || $key === 'all' ) {
+			$category_list[ $key ] = [
+				'label'  => $info['label'],
+				'icon'   => $info['icon'],
+				'count'  => $count ?: 0,
+			];
+		}
+	}
+
+	// First 8 categories visible; rest behind "Show more"
+	$visible_count   = 8;
+	$category_keys   = array_keys( $category_list );
+	$visible_keys    = array_slice( $category_keys, 0, $visible_count );
+	$more_keys       = array_slice( $category_keys, $visible_count, null );
+	$categories_visible = [];
+	$categories_more    = [];
+	foreach ( $visible_keys as $k ) {
+		$categories_visible[ $k ] = $category_list[ $k ];
+	}
+	foreach ( $more_keys as $k ) {
+		$categories_more[ $k ] = $category_list[ $k ];
+	}
+	$has_more_categories = ! empty( $categories_more );
+
+	// Build widget cards data (npm package: @sociallane/widget-{slug})
+	$widget_cards = [];
+	foreach ( $categorized as $category => $widget_list ) {
+		foreach ( $widget_list as $widget ) {
+			$preview = sociallane_get_widget_preview( $widget, $category );
+			$npm_pkg   = '@sociallane/widget-' . $widget;
+			$npm_cmd   = 'npm install ' . $npm_pkg;
+			$widget_cards[] = [
+				'name'       => $widget,
+				'display'    => sociallane_format_widget_name( $widget ),
+				'category'   => $category,
+				'preview'    => $preview['preview'],
+				'layout'     => $preview['layout'],
+				'npm_package' => $npm_pkg,
+				'npm_command' => $npm_cmd,
+			];
+		}
+	}
+
+	// Sort widgets alphabetically within categories
+	usort( $widget_cards, fn( $a, $b ) => strcmp( $a['display'], $b['display'] ) );
+
+	// Grid columns class
+	$grid_columns = [
+		'2' => 'grid-cols-1 sm:grid-cols-2',
+		'3' => 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+		'4' => 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+	];
+	$grid_class = $grid_columns[ $columns ] ?? $grid_columns['3'];
+
+	// Animation
+	$animation = sociallane_animation_view_data( $settings, [ 'headline' => true, 'stagger' => true ] );
+
+	// Theme classes (light + dark)
+	$classes = [
+		'section'       => 'bg-white dark:bg-neutral-900',
+		'headline'      => 'text-neutral-900 dark:text-white',
+		'subtext'       => 'text-neutral-600 dark:text-neutral-400',
+		'filter_bg'     => 'bg-neutral-100 dark:bg-neutral-800',
+		'filter_active' => 'bg-primary text-white dark:bg-primary-light dark:text-neutral-900',
+		'filter_inactive' => 'bg-white dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-700',
+		'search_bg'     => 'bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700',
+		'search_text'   => 'text-neutral-900 dark:text-white placeholder-neutral-500 dark:placeholder-neutral-400',
+		'card_bg'       => 'bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 hover:border-primary dark:hover:border-primary-light',
+		'card_text'     => 'text-neutral-900 dark:text-white',
+		'card_category' => 'text-neutral-500 dark:text-neutral-400',
+		'card_focus'    => 'focus:ring-primary dark:focus:ring-primary-light',
+	];
+
+	$preview_pages_enabled = class_exists( '\SocialLane\Elements\Widget_Preview' ) && \SocialLane\Elements\Widget_Preview::is_enabled();
+
+	return [
+		'headline'               => $headline,
+		'headline_tag'           => $headline_tag,
+		'show_search'            => $show_search,
+		'show_categories'        => $show_categories,
+		'categories'              => $category_list,
+		'categories_visible'      => $categories_visible,
+		'categories_more'         => $categories_more,
+		'has_more_categories'    => $has_more_categories,
+		'widgets'                => $widget_cards,
+		'grid_class'             => $grid_class,
+		'classes'                => $classes,
+		'widget_id'              => $widget_id,
+		'animation'              => $animation,
+		'preview_pages_enabled'  => $preview_pages_enabled,
+	];
+}

package/packages/widgets/widget-filter/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@sociallane/widget-widget-filter",
+  "version": "1.0.0",
+  "private": true,
+  "description": "SocialLane Elements widget: widget-filter",
+  "peerDependencies": {
+    "@sociallane/core": "^1.0.0"
+  },
+  "scripts": {
+    "build": "echo \"No widget-specific build\""
+  }
+}