@sociallane/elements 1.0.0

package/packages/widgets/widget-filter/templates/wrapper.php

@@ -0,0 +1,630 @@
+<?php
+/**
+ * Template: Widget Filter Wrapper
+ *
+ * Displays a grid of available widgets with category filtering sidebar.
+ *
+ * AVAILABLE DATA ($view):
+ * - headline, headline_tag, show_search, show_categories
+ * - categories (array with label, icon, count)
+ * - widgets (array with name, display, category)
+ * - grid_class, classes, widget_id, animation
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( empty( $view ) ) {
+	return;
+}
+
+$anim           = $view['animation'] ?? [];
+$section_attrs  = sociallane_section_animation_attrs( $anim );
+$stagger_attrs  = sociallane_stagger_attrs( $anim );
+$block_id            = 'widget-filter-' . $view['widget_id'];
+$categories          = $view['categories'];
+$categories_visible  = $view['categories_visible'] ?? $categories;
+$categories_more     = $view['categories_more'] ?? [];
+$has_more_categories = ! empty( $view['has_more_categories'] ) && ! empty( $categories_more );
+$widgets              = $view['widgets'];
+$classes        = is_array( $view['classes'] ?? null ) ? $view['classes'] : [];
+
+// Prepare class arrays for JavaScript (split by space for classList compatibility)
+$filter_active_classes = ! empty( $classes['filter_active'] ) ? explode( ' ', $classes['filter_active'] ) : [];
+$filter_inactive_classes = ! empty( $classes['filter_inactive'] ) ? explode( ' ', $classes['filter_inactive'] ) : [];
+?>
+<script>
+(function() {
+	document.addEventListener('DOMContentLoaded', function() {
+		var block = document.getElementById('<?php echo esc_js( $block_id ); ?>');
+		if (!block) return;
+		var filterBtns = block.querySelectorAll('[data-filter]');
+		var cards = block.querySelectorAll('[data-category]');
+		var search = block.querySelector('[data-search]');
+		var countEl = block.querySelector('[data-count-display]');
+		var activeClasses = <?php echo json_encode( $filter_active_classes ); ?>;
+		var inactiveClasses = <?php echo json_encode( $filter_inactive_classes ); ?>;
+
+		function addClasses(el, arr) { arr.forEach(function(c) { if (c) el.classList.add(c); }); }
+		function removeClasses(el, arr) { arr.forEach(function(c) { if (c) el.classList.remove(c); }); }
+		function updateCount() {
+			var n = 0;
+			cards.forEach(function(c) { if (c.style.display !== 'none') n++; });
+			if (countEl) countEl.textContent = n;
+		}
+
+		function copyToClipboard(text, btn) {
+			var span = btn && btn.querySelector('[data-copy-label]');
+			var orig = span ? span.textContent : (btn ? btn.textContent : '');
+			function showDone() {
+				if (span) span.textContent = '<?php echo esc_js( __( 'Copied!', 'sociallane-elements' ) ); ?>';
+				else if (btn) btn.textContent = '<?php echo esc_js( __( 'Copied!', 'sociallane-elements' ) ); ?>';
+				setTimeout(function() {
+					if (span) span.textContent = orig;
+					else if (btn) btn.textContent = orig;
+				}, 1500);
+			}
+			if (navigator.clipboard && navigator.clipboard.writeText) {
+				navigator.clipboard.writeText(text).then(showDone).catch(function() {
+					fallbackCopy(text);
+					showDone();
+				});
+			} else {
+				fallbackCopy(text);
+				showDone();
+			}
+		}
+		function fallbackCopy(text) {
+			var ta = document.createElement('textarea');
+			ta.value = text;
+			ta.style.position = 'fixed';
+			ta.style.left = '-9999px';
+			ta.style.top = '0';
+			document.body.appendChild(ta);
+			ta.focus();
+			ta.select();
+			try { document.execCommand('copy'); } catch (e) {}
+			document.body.removeChild(ta);
+		}
+
+		function applyActiveToFilterBtn(activeBtn) {
+			filterBtns.forEach(function(b) {
+				removeClasses(b, activeClasses);
+				addClasses(b, inactiveClasses);
+			});
+			if (activeBtn) {
+				removeClasses(activeBtn, inactiveClasses);
+				addClasses(activeBtn, activeClasses);
+			}
+		}
+
+		filterBtns.forEach(function(btn) {
+			btn.addEventListener('click', function() {
+				var filter = this.getAttribute('data-filter');
+				applyActiveToFilterBtn(this);
+				cards.forEach(function(c) {
+					var show = filter === 'all' || c.getAttribute('data-category') === filter;
+					c.style.display = show ? '' : 'none';
+				});
+				updateCount();
+			});
+		});
+
+		// Show more / Show less categories
+		var showMoreBtn = block.querySelector('[data-filter-show-more]');
+		var moreList = block.querySelector('[data-filter-more-list]');
+		var showMoreLabel = block.querySelector('[data-filter-show-more-label]');
+		var showMoreIcon = block.querySelector('[data-filter-show-more-icon]');
+		if (showMoreBtn && moreList && showMoreLabel) {
+			showMoreBtn.addEventListener('click', function() {
+				var expanded = this.getAttribute('aria-expanded') === 'true';
+				this.setAttribute('aria-expanded', !expanded);
+				moreList.classList.toggle('hidden', expanded);
+				moreList.setAttribute('aria-hidden', expanded ? 'true' : 'false');
+				showMoreLabel.textContent = expanded ? '<?php echo esc_js( __( 'Show more', 'sociallane-elements' ) ); ?>' : '<?php echo esc_js( __( 'Show less', 'sociallane-elements' ) ); ?>';
+				if (showMoreIcon) showMoreIcon.style.transform = expanded ? '' : 'rotate(180deg)';
+			});
+		}
+
+		if (search) {
+			search.addEventListener('input', function() {
+				var q = this.value.toLowerCase().trim();
+				cards.forEach(function(c) {
+					var show = !q || (c.getAttribute('data-display') || '').toLowerCase().indexOf(q) !== -1 ||
+						(c.getAttribute('data-name') || '').toLowerCase().indexOf(q) !== -1 ||
+						(c.getAttribute('data-category') || '').toLowerCase().indexOf(q) !== -1;
+					c.style.display = show ? '' : 'none';
+				});
+				updateCount();
+			});
+		}
+
+		block.querySelectorAll('[data-copy]').forEach(function(btn) {
+			btn.addEventListener('click', function(e) {
+				e.preventDefault();
+				e.stopPropagation();
+				var name = this.getAttribute('data-copy');
+				if (name) copyToClipboard(name, this);
+			});
+		});
+
+		block.querySelectorAll('[data-copy-npm]').forEach(function(btn) {
+			btn.addEventListener('click', function(e) {
+				e.preventDefault();
+				e.stopPropagation();
+				var cmd = btn.getAttribute('data-npm-command') || '';
+				if (cmd) copyToClipboard(cmd, this);
+			});
+		});
+
+		var collection = [];
+		var collectionList = block.querySelector('[data-collection-list]');
+		var collectionActions = block.querySelector('[data-collection-actions]');
+		var copyCollectionBtn = block.querySelector('[data-copy-collection-npm]');
+		var clearCollectionBtn = block.querySelector('[data-clear-collection]');
+
+		function renderCollection() {
+			if (!collectionList) return;
+			collectionList.innerHTML = '';
+			if (collection.length) {
+				collection.forEach(function(item) {
+					var div = document.createElement('div');
+					div.className = 'truncate';
+					div.textContent = item.display;
+					collectionList.appendChild(div);
+				});
+			} else {
+				var empty = document.createElement('span');
+				empty.className = 'opacity-60';
+				empty.textContent = '<?php echo esc_js( __( 'No widgets added yet.', 'sociallane-elements' ) ); ?>';
+				collectionList.appendChild(empty);
+			}
+			if (collectionActions) collectionActions.classList.toggle('hidden', collection.length === 0);
+		}
+
+		function syncCheckboxes() {
+			block.querySelectorAll('[data-add-to-collection]').forEach(function(cb) {
+				var pkg = cb.getAttribute('data-npm-package');
+				cb.checked = collection.some(function(item) { return item.package === pkg; });
+			});
+		}
+
+		block.querySelectorAll('[data-add-to-collection]').forEach(function(cb) {
+			cb.addEventListener('change', function() {
+				var pkg = cb.getAttribute('data-npm-package');
+				var display = cb.getAttribute('data-display') || pkg;
+				if (cb.checked) {
+					if (!collection.some(function(item) { return item.package === pkg; })) {
+						collection.push({ package: pkg, display: display });
+					}
+				} else {
+					collection = collection.filter(function(item) { return item.package !== pkg; });
+				}
+				renderCollection();
+			});
+		});
+
+		if (copyCollectionBtn) {
+			copyCollectionBtn.addEventListener('click', function() {
+				if (collection.length === 0) return;
+				var cmd = 'npm install ' + collection.map(function(item) { return item.package; }).join(' ');
+				copyToClipboard(cmd, copyCollectionBtn);
+			});
+		}
+
+		if (clearCollectionBtn) {
+			clearCollectionBtn.addEventListener('click', function() {
+				collection = [];
+				renderCollection();
+				syncCheckboxes();
+			});
+		}
+
+		renderCollection();
+		updateCount();
+
+		// Hover preview: show iframe on card hover, keep detail page link
+		var hoverPreview = block.querySelector('[data-hover-preview]');
+		var hoverIframe = block.querySelector('[data-hover-preview-iframe]');
+		var previewCards = block.querySelectorAll('.widget-filter__card[data-preview-embed-url]');
+		var hoverShowTimer = null;
+		var hoverHideTimer = null;
+		var PREVIEW_HOVER_DELAY = 350;
+		var PREVIEW_HIDE_DELAY = 200;
+
+		function clearPreviewTimers() {
+			if (hoverShowTimer) { clearTimeout(hoverShowTimer); hoverShowTimer = null; }
+			if (hoverHideTimer) { clearTimeout(hoverHideTimer); hoverHideTimer = null; }
+		}
+
+		function positionPreviewPanel(card) {
+			if (!hoverPreview || !card) return;
+			var cr = card.getBoundingClientRect();
+			var pw = 420;
+			var ph = 280;
+			var gap = 8;
+			var viewW = window.innerWidth;
+			var viewH = window.innerHeight;
+			var top = 0;
+			var left = cr.left + (cr.width / 2) - (pw / 2);
+			left = Math.max(12, Math.min(left, viewW - pw - 12));
+			if (cr.top >= ph + gap + 60) {
+				top = cr.top - ph - gap;
+			} else if (viewH - cr.bottom >= ph + gap) {
+				top = cr.bottom + gap;
+			} else {
+				top = Math.max(12, cr.top + (cr.height / 2) - (ph / 2));
+			}
+			hoverPreview.style.left = left + 'px';
+			hoverPreview.style.top = top + 'px';
+		}
+
+		function showHoverPreview(url, label) {
+			clearPreviewTimers();
+			if (!hoverPreview || !hoverIframe) return;
+			hoverIframe.src = url;
+			hoverIframe.title = label || 'Preview';
+			hoverPreview.classList.remove('invisible', 'opacity-0', 'pointer-events-none');
+			hoverPreview.classList.add('pointer-events-auto');
+			hoverPreview.setAttribute('aria-hidden', 'false');
+		}
+
+		function hideHoverPreview() {
+			clearPreviewTimers();
+			hoverHideTimer = setTimeout(function() {
+				hoverHideTimer = null;
+				if (!hoverPreview || !hoverIframe) return;
+				hoverPreview.classList.add('invisible', 'opacity-0', 'pointer-events-none');
+				hoverPreview.classList.remove('pointer-events-auto');
+				hoverPreview.setAttribute('aria-hidden', 'true');
+				hoverIframe.src = 'about:blank';
+			}, PREVIEW_HIDE_DELAY);
+		}
+
+		if (hoverPreview && hoverIframe && previewCards.length) {
+			previewCards.forEach(function(card) {
+				var url = card.getAttribute('data-preview-embed-url');
+				var label = card.getAttribute('data-display') || '';
+				if (!url) return;
+
+				card.addEventListener('mouseenter', function() {
+					clearPreviewTimers();
+					hoverShowTimer = setTimeout(function() {
+						hoverShowTimer = null;
+						positionPreviewPanel(card);
+						showHoverPreview(url, label);
+					}, PREVIEW_HOVER_DELAY);
+				});
+
+				card.addEventListener('mouseleave', function() {
+					clearPreviewTimers();
+					hoverHideTimer = setTimeout(hideHoverPreview, PREVIEW_HIDE_DELAY);
+				});
+			});
+
+			hoverPreview.addEventListener('mouseenter', function() {
+				clearPreviewTimers();
+			});
+			hoverPreview.addEventListener('mouseleave', function() {
+				hideHoverPreview();
+			});
+		}
+	});
+})();
+</script>
+<?php // ========== WIDGET FILTER START ========== ?>
+
+<section
+	id="<?php echo esc_attr( $block_id ); ?>"
+	class="widget-filter w-full <?php echo esc_attr( $classes['section'] ?? '' ); ?> py-12 md:py-16 lg:py-20 relative"
+	<?php echo $section_attrs ? ' ' . $section_attrs : ''; ?>
+	aria-label="<?php esc_attr_e( 'Widget Catalog', 'sociallane-elements' ); ?>"
+>
+	<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+		<?php // Header ?>
+		<header class="mb-8">
+			<<?php echo $view['headline_tag']; ?>
+				class="<?php echo esc_attr( $classes['headline'] ?? '' ); ?> text-2xl md:text-3xl lg:text-4xl font-bold font-heading leading-tight"
+			>
+				<?php echo $view['headline']; ?>
+			</<?php echo $view['headline_tag']; ?>>
+		</header>
+
+		<?php // Main Layout: Sidebar (Left) + Grid (Right) ?>
+		<div class="flex flex-col lg:flex-row gap-8">
+			<?php // Sidebar Filters (Left) - sticky so filter stays visible when scrolling ?>
+			<aside class="w-full lg:w-64 shrink-0 order-1">
+				<div class="sticky top-4 z-10 <?php echo esc_attr( $classes['filter_bg'] ?? '' ); ?> rounded-xl p-5 shadow-sm border border-neutral-200/50 dark:border-neutral-700/50">
+					<h3 class="<?php echo esc_attr( $classes['headline'] ?? '' ); ?> font-semibold font-heading mb-4 text-base">
+						<?php esc_html_e( 'Filter Widgets', 'sociallane-elements' ); ?>
+					</h3>
+
+					<?php // Search Input (Desktop - in sidebar) ?>
+					<?php if ( $view['show_search'] ) : ?>
+						<div class="relative mb-4">
+							<input
+								type="text"
+								data-search
+								placeholder="<?php esc_attr_e( 'Search...', 'sociallane-elements' ); ?>"
+								class="w-full px-3 py-2 rounded-lg border text-sm <?php echo esc_attr( $classes['search_bg'] ?? '' ); ?> <?php echo esc_attr( $classes['search_text'] ?? '' ); ?> focus:outline-none focus:ring-2 focus:ring-primary transition-colors"
+							/>
+							<svg
+								class="absolute right-2.5 top-1/2 -translate-y-1/2 w-4 h-4 <?php echo esc_attr( $classes['subtext'] ?? '' ); ?>"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+								aria-hidden="true"
+							>
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+							</svg>
+						</div>
+					<?php endif; ?>
+
+					<?php // Category Filter List: first 8 visible, rest behind "Show more" ?>
+					<?php if ( $view['show_categories'] && ! empty( $categories ) ) : ?>
+						<nav
+							role="navigation"
+							aria-label="<?php esc_attr_e( 'Filter widgets by category', 'sociallane-elements' ); ?>"
+						>
+							<ul class="space-y-1">
+								<?php foreach ( $categories_visible as $key => $cat ) : ?>
+									<?php
+									$is_active = $key === 'all';
+									$btn_class = $is_active
+										? ( $classes['filter_active'] ?? '' )
+										: ( $classes['filter_inactive'] ?? '' );
+									?>
+									<li>
+										<button
+											type="button"
+											data-filter="<?php echo esc_attr( $key ); ?>"
+											class="w-full text-left inline-flex items-center justify-between gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 <?php echo esc_attr( $btn_class ); ?>"
+										>
+											<span class="flex items-center gap-2">
+												<?php if ( ! empty( $cat['icon'] ) ) : ?>
+													<i class="<?php echo esc_attr( $cat['icon'] ); ?> text-base" aria-hidden="true"></i>
+												<?php endif; ?>
+												<span><?php echo esc_html( $cat['label'] ); ?></span>
+											</span>
+											<?php if ( isset( $cat['count'] ) && $cat['count'] > 0 ) : ?>
+												<span class="<?php echo esc_attr( $classes['subtext'] ?? '' ); ?> text-xs">
+													<?php echo esc_html( (string) $cat['count'] ); ?>
+												</span>
+											<?php endif; ?>
+										</button>
+									</li>
+								<?php endforeach; ?>
+							</ul>
+							<?php if ( $has_more_categories ) : ?>
+								<div data-filter-more-wrap class="mt-2">
+									<button
+										type="button"
+										data-filter-show-more
+										class="w-full text-left inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium <?php echo esc_attr( $classes['filter_inactive'] ?? '' ); ?> hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
+										aria-expanded="false"
+										aria-controls="<?php echo esc_attr( $block_id ); ?>-more-categories"
+									>
+										<svg data-filter-show-more-icon class="w-4 h-4 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+										</svg>
+										<span data-filter-show-more-label><?php esc_html_e( 'Show more', 'sociallane-elements' ); ?></span>
+									</button>
+									<ul id="<?php echo esc_attr( $block_id ); ?>-more-categories" data-filter-more-list class="space-y-1 mt-1 hidden" aria-hidden="true">
+										<?php foreach ( $categories_more as $key => $cat ) : ?>
+											<?php
+											$btn_class = $classes['filter_inactive'] ?? '';
+											?>
+											<li>
+												<button
+													type="button"
+													data-filter="<?php echo esc_attr( $key ); ?>"
+													class="w-full text-left inline-flex items-center justify-between gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 <?php echo esc_attr( $btn_class ); ?>"
+												>
+													<span class="flex items-center gap-2">
+														<?php if ( ! empty( $cat['icon'] ) ) : ?>
+															<i class="<?php echo esc_attr( $cat['icon'] ); ?> text-base" aria-hidden="true"></i>
+														<?php endif; ?>
+														<span><?php echo esc_html( $cat['label'] ); ?></span>
+													</span>
+													<?php if ( isset( $cat['count'] ) && $cat['count'] > 0 ) : ?>
+														<span class="<?php echo esc_attr( $classes['subtext'] ?? '' ); ?> text-xs">
+															<?php echo esc_html( (string) $cat['count'] ); ?>
+														</span>
+													<?php endif; ?>
+												</button>
+											</li>
+										<?php endforeach; ?>
+									</ul>
+								</div>
+							<?php endif; ?>
+						</nav>
+					<?php endif; ?>
+
+					<?php // My collection: selected widgets, copy npm install for all ?>
+					<div id="<?php echo esc_attr( $block_id ); ?>-collection" class="mt-6 pt-6 border-t border-neutral-200 dark:border-neutral-700" data-collection-panel>
+						<h3 class="<?php echo esc_attr( $classes['headline'] ?? '' ); ?> font-semibold font-heading mb-3 text-sm">
+							<?php esc_html_e( 'My collection', 'sociallane-elements' ); ?>
+						</h3>
+						<p class="<?php echo esc_attr( $classes['subtext'] ?? '' ); ?> text-xs mb-3">
+							<?php esc_html_e( 'Add widgets below, then copy one command to install them all.', 'sociallane-elements' ); ?>
+						</p>
+						<div data-collection-list class="min-h-[2rem] text-xs <?php echo esc_attr( $classes['subtext'] ?? '' ); ?> mb-3 space-y-1 max-h-40 overflow-auto"></div>
+						<div data-collection-actions class="flex flex-col gap-2 hidden">
+							<button type="button" data-copy-collection-npm class="w-full inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-sm font-medium bg-primary text-white dark:bg-neutral-900 hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
+								<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+								<span data-copy-label><?php esc_html_e( 'Copy npm install', 'sociallane-elements' ); ?></span>
+							</button>
+							<button type="button" data-clear-collection class="text-xs <?php echo esc_attr( $classes['subtext'] ?? '' ); ?> hover:underline focus:outline-none text-left">
+								<?php esc_html_e( 'Clear collection', 'sociallane-elements' ); ?>
+							</button>
+						</div>
+					</div>
+				</div>
+			</aside>
+
+			<?php // Widget Cards Grid (Main Content - Right) ?>
+			<main class="flex-1 order-2">
+				<?php // Search Input (Mobile/Tablet - above grid) ?>
+				<?php if ( $view['show_search'] ) : ?>
+					<div class="relative mb-6 lg:hidden">
+						<input
+							type="text"
+							data-search
+							placeholder="<?php esc_attr_e( 'Search widgets...', 'sociallane-elements' ); ?>"
+							class="w-full px-4 py-3 rounded-lg border <?php echo esc_attr( $classes['search_bg'] ?? '' ); ?> <?php echo esc_attr( $classes['search_text'] ?? '' ); ?> focus:outline-none focus:ring-2 focus:ring-primary transition-colors"
+						/>
+						<svg
+							class="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 <?php echo esc_attr( $classes['subtext'] ?? '' ); ?>"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+							aria-hidden="true"
+						>
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+						</svg>
+					</div>
+				<?php endif; ?>
+
+				<?php // Results Count ?>
+				<p class="<?php echo esc_attr( $classes['subtext'] ?? '' ); ?> mb-4 text-sm">
+					<span data-count-display><?php echo count( $widgets ); ?></span> <?php esc_html_e( 'widgets found', 'sociallane-elements' ); ?>
+				</p>
+
+				<?php // Widget Cards Grid ?>
+				<?php if ( ! empty( $widgets ) ) : ?>
+					<div
+						class="grid <?php echo esc_attr( $view['grid_class'] ); ?> gap-4 sm:gap-6"
+						<?php echo $stagger_attrs ? ' ' . $stagger_attrs : ''; ?>
+						role="list"
+						aria-label="<?php esc_attr_e( 'Available widgets', 'sociallane-elements' ); ?>"
+					>
+						<?php foreach ( $widgets as $widget ) : ?>
+							<?php
+							$cat_label  = $categories[ $widget['category'] ]['label'] ?? $widget['category'];
+							$npm_cmd    = isset( $widget['npm_command'] ) && $widget['npm_command'] !== '' ? $widget['npm_command'] : 'npm install @sociallane/widget-' . $widget['name'];
+							$npm_pkg    = isset( $widget['npm_package'] ) && $widget['npm_package'] !== '' ? $widget['npm_package'] : '@sociallane/widget-' . $widget['name'];
+							?>
+							<?php
+							$preview_embed_url = ! empty( $view['preview_pages_enabled'] )
+								? add_query_arg( 'embed', '1', home_url( '/widget-preview/' . $widget['name'] . '/' ) )
+								: '';
+							?>
+							<article
+								data-category="<?php echo esc_attr( $widget['category'] ); ?>"
+								data-widget-name="<?php echo esc_attr( $widget['name'] ); ?>"
+								data-display="<?php echo esc_attr( $widget['display'] ); ?>"
+								<?php if ( $preview_embed_url !== '' ) : ?>
+									data-preview-embed-url="<?php echo esc_url( $preview_embed_url ); ?>"
+								<?php endif; ?>
+								class="widget-filter__card bg-white dark:bg-neutral-800 rounded-xl border border-neutral-200 dark:border-neutral-700 p-5 transition-all duration-200 hover:border-primary dark:hover:border-primary-light hover:shadow-lg group relative"
+								role="listitem"
+								aria-label="<?php printf( esc_attr__( 'Widget: %s', 'sociallane-elements' ), esc_attr( $widget['display'] ) ); ?>"
+							>
+								<div class="flex flex-col h-full">
+									<?php // Widget Name ?>
+									<h3 class="<?php echo esc_attr( $classes['card_text'] ?? '' ); ?> text-lg font-semibold font-heading mb-2">
+										<?php echo esc_html( $widget['display'] ); ?>
+									</h3>
+
+									<?php // Category Badge ?>
+									<div class="flex items-center gap-2 mb-3">
+										<span class="<?php echo esc_attr( $classes['card_category'] ?? '' ); ?> text-xs font-medium uppercase tracking-wider">
+											<?php echo esc_html( $cat_label ); ?>
+										</span>
+									</div>
+
+									<?php // npm install command (full command visible, wraps if needed) ?>
+									<div class="mb-3 flex items-start gap-2 flex-wrap">
+										<code class="flex-1 min-w-0 text-xs <?php echo esc_attr( $classes['subtext'] ?? '' ); ?> bg-neutral-100 dark:bg-neutral-700/50 rounded px-2 py-1.5 break-all whitespace-pre-wrap" data-npm-command="<?php echo esc_attr( $npm_cmd ); ?>"><?php echo esc_html( $npm_cmd ); ?></code>
+										<button
+											type="button"
+											data-copy-npm
+											data-npm-command="<?php echo esc_attr( $npm_cmd ); ?>"
+											class="shrink-0 inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-medium bg-neutral-200 dark:bg-neutral-600 hover:bg-neutral-300 dark:hover:bg-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary transition-colors"
+											aria-label="<?php esc_attr_e( 'Copy npm command', 'sociallane-elements' ); ?>"
+										>
+											<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+											<span data-copy-label><?php esc_html_e( 'Copy', 'sociallane-elements' ); ?></span>
+										</button>
+									</div>
+
+									<?php // Add to collection + Copy name + Preview ?>
+									<div class="mt-auto pt-3 border-t border-neutral-200 dark:border-neutral-700 flex flex-wrap items-center gap-2">
+										<label class="inline-flex items-center gap-2 text-sm <?php echo esc_attr( $classes['subtext'] ?? '' ); ?> cursor-pointer">
+											<input type="checkbox" data-add-to-collection data-widget-name="<?php echo esc_attr( $widget['name'] ); ?>" data-display="<?php echo esc_attr( $widget['display'] ); ?>" data-npm-package="<?php echo esc_attr( $npm_pkg ); ?>" class="rounded border-neutral-300 dark:border-neutral-600 text-primary focus:ring-primary" />
+											<span><?php esc_html_e( 'Add to collection', 'sociallane-elements' ); ?></span>
+										</label>
+										<?php if ( ! empty( $view['preview_pages_enabled'] ) ) : ?>
+											<a
+												href="<?php echo esc_url( home_url( '/widget-preview/' . $widget['name'] . '/' ) ); ?>"
+												target="_blank"
+												rel="noopener noreferrer"
+												class="inline-flex items-center gap-2 text-sm <?php echo esc_attr( $classes['subtext'] ?? '' ); ?> hover:text-primary dark:hover:text-primary-light transition-colors focus:outline-none focus:ring-2 focus:ring-primary rounded px-2 py-1 -mx-2 -my-1"
+												aria-label="<?php printf( esc_attr__( 'Preview widget: %s', 'sociallane-elements' ), esc_attr( $widget['display'] ) ); ?>"
+											>
+												<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+													<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+												</svg>
+												<span><?php esc_html_e( 'Preview', 'sociallane-elements' ); ?></span>
+											</a>
+										<?php endif; ?>
+										<button
+											type="button"
+											data-copy="<?php echo esc_attr( $widget['name'] ); ?>"
+											class="copy-widget-btn inline-flex items-center gap-2 text-sm <?php echo esc_attr( $classes['subtext'] ?? '' ); ?> hover:text-primary dark:hover:text-primary-light transition-colors focus:outline-none focus:ring-2 focus:ring-primary rounded px-2 py-1 -mx-2 -my-1"
+											aria-label="<?php printf( esc_attr__( 'Copy widget name: %s', 'sociallane-elements' ), esc_attr( $widget['display'] ) ); ?>"
+										>
+											<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+											</svg>
+											<span data-copy-label><?php esc_html_e( 'Copy Name', 'sociallane-elements' ); ?></span>
+										</button>
+									</div>
+								</div>
+							</article>
+						<?php endforeach; ?>
+					</div>
+
+					<?php // Hover preview panel: single iframe shown on card hover (when preview pages enabled) ?>
+					<?php if ( ! empty( $view['preview_pages_enabled'] ) ) : ?>
+						<?php
+						$hover_preview_w = 420;
+						$hover_preview_h = 280;
+						$hover_iframe_w  = 600;
+						$hover_iframe_h  = 400;
+						$hover_scale     = min( $hover_preview_w / $hover_iframe_w, $hover_preview_h / $hover_iframe_h );
+						?>
+						<div
+							id="<?php echo esc_attr( $block_id ); ?>-hover-preview"
+							data-hover-preview
+							class="fixed z-50 pointer-events-none invisible opacity-0 transition-opacity duration-150 rounded-xl overflow-hidden border-2 border-primary dark:border-primary-light bg-white dark:bg-neutral-800 shadow-2xl"
+							style="width: <?php echo (int) $hover_preview_w; ?>px; height: <?php echo (int) $hover_preview_h; ?>px;"
+							aria-hidden="true"
+						>
+							<div
+								class="origin-top-left bg-white"
+								style="width: <?php echo (int) $hover_iframe_w; ?>px; height: <?php echo (int) $hover_iframe_h; ?>px; transform: scale(<?php echo round( $hover_scale, 4 ); ?>);"
+							>
+								<iframe
+									data-hover-preview-iframe
+									title=""
+									class="bg-white border-0"
+									style="width: <?php echo (int) $hover_iframe_w; ?>px; height: <?php echo (int) $hover_iframe_h; ?>px; pointer-events: auto;"
+								></iframe>
+							</div>
+						</div>
+					<?php endif; ?>
+				<?php else : ?>
+					<p class="<?php echo esc_attr( $classes['subtext'] ?? '' ); ?> text-center py-8">
+						<?php esc_html_e( 'No widgets found.', 'sociallane-elements' ); ?>
+					</p>
+				<?php endif; ?>
+			</main>
+		</div>
+	</div>
+</section>
+
+<?php // ========== WIDGET FILTER END ========== ?>