npm - @sociallane/elements - Versions diffs - 1.0.0 - Mend

@sociallane/elements 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (767) hide show

package/admin/views/preview-frame.php ADDED Viewed

@@ -0,0 +1,183 @@
+<?php
+/**
+ * Widget Preview — Frame with viewport toolbar and resizable iframe
+ * Tailwind UI Blocks–style: dark theme, preset buttons, drag handle to resize.
+ *
+ * @package SocialLane\Elements
+ */
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+$prev_error_level = error_reporting( E_ERROR | E_PARSE );
+$slug     = get_query_var( 'sociallane_preview', '' );
+$registry = \SocialLane\Elements\Widget_Manager::get_widget_registry();
+$widget   = $registry[ $slug ] ?? null;
+$name     = $widget ? $widget['name'] : $slug;
+$current_url = home_url( '/widget-preview/' . $slug . '/' );
+$embed_url   = add_query_arg( 'embed', '1', $current_url );
+$overview_url = home_url( '/' );
+?>
+<!DOCTYPE html>
+<html <?php language_attributes(); ?>>
+<head>
+	<meta charset="<?php bloginfo( 'charset' ); ?>">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title><?php echo esc_html( sprintf( __( 'Preview: %s', 'sociallane-elements' ), $name ) ); ?></title>
+	<?php wp_head(); ?>
+	<style>
+		.sociallane-preview-frame { min-height: 100vh; display: flex; flex-direction: column; background: #0f172a; color: #f1f5f9; }
+		.sociallane-preview-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; background: #020617; border-bottom: 1px solid #1e293b; flex-shrink: 0; }
+		.sociallane-preview-toolbar-left { display: flex; align-items: center; gap: 0.75rem; }
+		.sociallane-preview-toolbar h1 { margin: 0; font-size: 0.9375rem; font-weight: 600; color: #f8fafc; }
+		.sociallane-preview-pill { font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.625rem; border-radius: 9999px; background: #1e293b; color: #94a3b8; }
+		.sociallane-preview-viewports { display: flex; align-items: center; gap: 0.25rem; }
+		.sociallane-preview-viewports button { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; font-size: 0.875rem; background: transparent; color: #94a3b8; border: none; border-radius: 0.375rem; cursor: pointer; }
+		.sociallane-preview-viewports button:hover { color: #f1f5f9; background: #1e293b; }
+		.sociallane-preview-viewports button.active { color: #38bdf8; background: #0f172a; }
+		.sociallane-preview-main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 1.5rem; min-height: 0; overflow-y: auto; }
+		.sociallane-preview-viewport { position: relative; display: flex; align-items: flex-start; justify-content: center; background: #0f172a; border-radius: 0.5rem; overflow: visible; }
+		.sociallane-preview-iframe-wrap { position: relative; min-height: 800px; overflow: hidden; border-radius: 0.375rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4); }
+		.sociallane-preview-iframe-wrap iframe { display: block; border: none; background: #fff; min-height: 800px; }
+		.sociallane-preview-resize-handle { position: absolute; top: 0; right: -4px; bottom: 0; width: 8px; cursor: col-resize; z-index: 10; display: flex; align-items: center; justify-content: center; }
+		.sociallane-preview-resize-handle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 2px; height: 48px; border-radius: 1px; background: #475569; opacity: 0.6; }
+		.sociallane-preview-resize-handle:hover::after { background: #38bdf8; opacity: 1; }
+		.sociallane-preview-back { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 20; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 500; color: #f8fafc; background: #1e293b; border: 1px solid #334155; border-radius: 0.5rem; text-decoration: none; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3); transition: background 0.2s, color 0.2s; }
+		.sociallane-preview-back:hover { background: #334155; color: #fff; }
+		.sociallane-preview-back:focus { outline: none; box-shadow: 0 0 0 2px #38bdf8; }
+		.sociallane-preview-back svg { flex-shrink: 0; }
+	</style>
+</head>
+<body class="sociallane-preview-body">
+	<div class="sociallane-preview-frame">
+		<header class="sociallane-preview-toolbar" role="banner">
+			<div class="sociallane-preview-toolbar-left">
+				<h1><?php echo esc_html( $name ); ?></h1>
+				<span class="sociallane-preview-pill"><?php esc_html_e( 'Preview', 'sociallane-elements' ); ?></span>
+			</div>
+			<div class="sociallane-preview-viewports" role="group" aria-label="<?php esc_attr_e( 'Viewport size', 'sociallane-elements' ); ?>">
+				<button type="button" data-viewport="1280" class="active" aria-pressed="true" aria-label="<?php esc_attr_e( 'Desktop', 'sociallane-elements' ); ?>">
+					<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+				</button>
+				<button type="button" data-viewport="768" aria-pressed="false" aria-label="<?php esc_attr_e( 'Tablet', 'sociallane-elements' ); ?>">
+					<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
+				</button>
+				<button type="button" data-viewport="375" aria-pressed="false" aria-label="<?php esc_attr_e( 'Mobile', 'sociallane-elements' ); ?>">
+					<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
+				</button>
+			</div>
+		</header>
+		<main class="sociallane-preview-main">
+			<div class="sociallane-preview-viewport">
+				<div class="sociallane-preview-iframe-wrap" id="sociallane-iframe-wrap" style="width: 1280px;">
+					<iframe
+						id="sociallane-preview-iframe"
+						src="<?php echo esc_url( $embed_url ); ?>"
+						title="<?php echo esc_attr( sprintf( __( 'Preview of %s', 'sociallane-elements' ), $name ) ); ?>"
+						style="width: 1280px;"
+					></iframe>
+					<div class="sociallane-preview-resize-handle" id="sociallane-resize-handle" role="separator" aria-orientation="vertical" aria-label="<?php esc_attr_e( 'Resize viewport', 'sociallane-elements' ); ?>"></div>
+				</div>
+			</div>
+		</main>
+		<a href="<?php echo esc_url( $overview_url ); ?>" class="sociallane-preview-back" aria-label="<?php esc_attr_e( 'Back to overview', 'sociallane-elements' ); ?>">
+			<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><polyline points="12 19 5 12 12 5"/></svg>
+			<span><?php esc_html_e( 'Back to overview', 'sociallane-elements' ); ?></span>
+		</a>
+	</div>
+	<script>
+		(function() {
+			var wrap = document.getElementById('sociallane-iframe-wrap');
+			var iframe = document.getElementById('sociallane-preview-iframe');
+			var handle = document.getElementById('sociallane-resize-handle');
+			var buttons = document.querySelectorAll('.sociallane-preview-viewports button');
+			var widths = { '1280': 1280, '768': 768, '375': 375 };
+			var minW = 320;
+			var maxW = 1920;
+			var DEFAULT_VIEWPORT = 1280;
+			var minH = 600;
+			var maxH = 8000;
+			function setWidth(px) {
+				px = Math.max(minW, Math.min(maxW, px));
+				wrap.style.width = px + 'px';
+				iframe.style.width = px + 'px';
+			}
+			function setIframeHeightToContent() {
+				try {
+					var doc = iframe.contentDocument;
+					if (!doc || !doc.body) return;
+					var html = doc.documentElement;
+					var h = Math.max(
+						doc.body.scrollHeight,
+						doc.body.offsetHeight,
+						html ? html.clientHeight : 0,
+						html ? html.scrollHeight : 0,
+						html ? html.offsetHeight : 0
+					);
+					h = Math.max(minH, Math.min(maxH, h));
+					iframe.style.height = h + 'px';
+					wrap.style.height = h + 'px';
+					wrap.style.minHeight = h + 'px';
+				} catch (e) {}
+			}
+			iframe.addEventListener('load', function() {
+				setIframeHeightToContent();
+				setTimeout(setIframeHeightToContent, 100);
+				setTimeout(setIframeHeightToContent, 500);
+			});
+			setWidth(DEFAULT_VIEWPORT);
+			buttons.forEach(function(btn) {
+				btn.addEventListener('click', function() {
+					var w = this.getAttribute('data-viewport');
+					var px = widths[w] || 1280;
+					buttons.forEach(function(b) { b.classList.remove('active'); b.setAttribute('aria-pressed', 'false'); });
+					this.classList.add('active');
+					this.setAttribute('aria-pressed', 'true');
+					setWidth(px);
+				});
+			});
+			if (handle && wrap) {
+				var dragging = false;
+				var startX = 0;
+				var startW = 0;
+				handle.addEventListener('mousedown', function(e) {
+					e.preventDefault();
+					dragging = true;
+					startX = e.clientX;
+					startW = wrap.offsetWidth;
+					document.body.style.cursor = 'col-resize';
+					document.body.style.userSelect = 'none';
+				});
+				document.addEventListener('mousemove', function(e) {
+					if (!dragging) return;
+					var dx = e.clientX - startX;
+					setWidth(startW + dx);
+				});
+				document.addEventListener('mouseup', function() {
+					if (dragging) {
+						dragging = false;
+						document.body.style.cursor = '';
+						document.body.style.userSelect = '';
+					}
+				});
+			}
+		})();
+	</script>
+	<?php wp_footer(); ?>
+</body>
+</html>
+<?php
+error_reporting( $prev_error_level );
+exit;

package/admin/views/preview-index.php ADDED Viewed

@@ -0,0 +1,74 @@
+<?php
+/**
+ * Widget Preview — Index (list all widgets with thumbnails and links)
+ *
+ * @package SocialLane\Elements
+ */
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+$prev_error_level = error_reporting( E_ERROR | E_PARSE );
+$registry     = \SocialLane\Elements\Widget_Manager::get_widget_registry();
+$widgets_dir  = SOCIALLANE_ELEMENTS_PATH . 'packages/widgets';
+if ( ! is_dir( $widgets_dir ) ) {
+	$widgets_dir = SOCIALLANE_ELEMENTS_PATH . 'widgets';
+}
+$widgets = [];
+foreach ( $registry as $slug => $widget ) {
+	$view_file = $widgets_dir . '/' . $slug . '/data/view.php';
+	$wrapper   = $widgets_dir . '/' . $slug . '/templates/wrapper.php';
+	if ( is_file( $view_file ) && is_file( $wrapper ) ) {
+		$widgets[ $slug ] = $widget;
+	}
+}
+$preview_base = home_url( '/widget-preview/' );
+?>
+<!DOCTYPE html>
+<html <?php language_attributes(); ?>>
+<head>
+	<meta charset="<?php bloginfo( 'charset' ); ?>">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title><?php esc_html_e( 'Widget Preview', 'sociallane-elements' ); ?></title>
+	<?php wp_head(); ?>
+	<style>
+		.sociallane-preview-index { min-height: 100vh; background: #262626; color: #fafafa; padding: 2rem; }
+		.sociallane-preview-index h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 1.5rem; }
+		.sociallane-preview-index .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25rem; }
+		.sociallane-preview-index a { display: block; background: #404040; border-radius: 0.5rem; overflow: hidden; text-decoration: none; color: inherit; transition: background 0.2s; }
+		.sociallane-preview-index a:hover { background: #525252; }
+		.sociallane-preview-index .thumb { aspect-ratio: 16/10; background: #171717; object-fit: cover; width: 100%; }
+		.sociallane-preview-index .name { padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 500; }
+	</style>
+</head>
+<body class="sociallane-preview-index-body">
+	<div class="sociallane-preview-index">
+		<h1><?php esc_html_e( 'Widget Preview', 'sociallane-elements' ); ?></h1>
+		<div class="grid">
+			<?php foreach ( $widgets as $slug => $widget ) : ?>
+				<?php
+				$url   = $preview_base . $slug . '/';
+				$name  = $widget['name'] ?? $slug;
+				$thumb = \SocialLane\Elements\Widget_Manager::get_widget_preview_url( $slug, $widget );
+				?>
+				<a href="<?php echo esc_url( $url ); ?>">
+					<?php if ( $thumb ) : ?>
+						<img src="<?php echo esc_url( $thumb ); ?>" alt="" class="thumb" loading="lazy" />
+					<?php else : ?>
+						<div class="thumb" style="display:flex;align-items:center;justify-content:center;font-size:0.75rem;color:#737373;"><?php echo esc_html( $name ); ?></div>
+					<?php endif; ?>
+					<span class="name"><?php echo esc_html( $name ); ?></span>
+				</a>
+			<?php endforeach; ?>
+		</div>
+	</div>
+	<?php wp_footer(); ?>
+</body>
+</html>
+<?php
+error_reporting( $prev_error_level );
+exit;

package/admin/views/settings.php ADDED Viewed

@@ -0,0 +1,94 @@
+<?php
+/**
+ * Admin Settings Page — Widget management
+ *
+ * @var array $data Contains 'registry', 'categories', 'enabled', 'saved'
+ *
+ * @package SocialLane\Elements
+ */
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+$registry   = $data['registry'];
+$categories = $data['categories'];
+$enabled    = $data['enabled'];
+$saved      = ! empty( $data['saved'] );
+$preview_pages_enabled = ! empty( $data['preview_pages_enabled'] );
+$prefix     = 'settings-';
+$grid_class = 'settings-widget-grid';
+?>
+<div class="wrap max-w-5xl mx-auto py-8 px-4">
+	<h1 class="text-2xl font-bold text-neutral-900 mb-2">
+		<?php esc_html_e( 'SocialLane Elements', 'sociallane-elements' ); ?>
+	</h1>
+	<p class="text-neutral-500 mb-6">
+		<?php esc_html_e( 'Choose which widgets to load in the Elementor editor. Elements (Button, Image) are always available.', 'sociallane-elements' ); ?>
+	</p>
+	<?php if ( $saved ) : ?>
+		<div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg text-green-800" role="alert">
+			<?php esc_html_e( 'Settings saved.', 'sociallane-elements' ); ?>
+		</div>
+	<?php endif; ?>
+	<form method="post" action="">
+		<?php wp_nonce_field( 'sociallane_settings', 'sociallane_settings_nonce' ); ?>
+		<div class="mb-8 p-4 bg-neutral-50 border border-neutral-200 rounded-lg">
+			<label class="flex items-center gap-3 cursor-pointer">
+				<input type="checkbox" name="preview_pages_enabled" value="1" <?php checked( $preview_pages_enabled ); ?> class="rounded border-neutral-300 text-primary focus:ring-primary" />
+				<span class="font-medium text-neutral-800"><?php esc_html_e( 'Enable preview pages', 'sociallane-elements' ); ?></span>
+			</label>
+			<p class="mt-2 text-sm text-neutral-500 ml-7">
+				<?php esc_html_e( 'When enabled, each widget gets a preview page at /widget-preview/{slug}/ with desktop, tablet, and mobile viewport controls. Only for this installation; imported components do not include the frame.', 'sociallane-elements' ); ?>
+			</p>
+			<?php if ( $preview_pages_enabled ) : ?>
+				<p class="mt-2 text-sm ml-7">
+					<a href="<?php echo esc_url( home_url( '/widget-preview/' ) ); ?>" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline"><?php esc_html_e( 'View all previews', 'sociallane-elements' ); ?></a>
+				</p>
+			<?php endif; ?>
+		</div>
+		<?php
+		require __DIR__ . '/partials/category-tabs.php';
+		$count_id        = 'settings-selected-count';
+		$select_all_id   = 'settings-select-all';
+		$deselect_all_id = 'settings-deselect-all';
+		require __DIR__ . '/partials/widget-toolbar.php';
+		?>
+		<?php $first = true; ?>
+		<?php foreach ( $categories as $cat_key => $cat_label ) : ?>
+			<?php
+			$cat_widgets = array_filter( $registry, function ( $w ) use ( $cat_key ) {
+				return $w['category'] === $cat_key;
+			} );
+			if ( empty( $cat_widgets ) ) {
+				continue;
+			}
+			?>
+			<div class="<?php echo esc_attr( $grid_class ); ?> <?php echo $first ? '' : 'hidden'; ?>" data-category="<?php echo esc_attr( $cat_key ); ?>">
+				<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+					<?php foreach ( $cat_widgets as $slug => $widget ) : ?>
+						<?php
+						$is_enabled = in_array( $slug, $enabled, true );
+						require __DIR__ . '/partials/widget-card.php';
+						?>
+					<?php endforeach; ?>
+				</div>
+			</div>
+			<?php $first = false; ?>
+		<?php endforeach; ?>
+		<div class="mt-8 pt-6 border-t border-neutral-200 flex items-center justify-between flex-wrap gap-4">
+			<a href="<?php echo esc_url( admin_url( 'admin.php?page=sociallane-onboarding' ) ); ?>" class="text-sm text-neutral-500 hover:text-neutral-700 no-underline">
+				<?php esc_html_e( 'Re-run Setup Wizard', 'sociallane-elements' ); ?>
+			</a>
+			<button type="submit" class="px-6 py-3 bg-primary text-white font-semibold rounded-lg hover:opacity-90 cursor-pointer border-0 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
+				<?php esc_html_e( 'Save Changes', 'sociallane-elements' ); ?>
+			</button>
+		</div>
+	</form>
+</div>

package/admin/views/setup-widget-catalog-frontend.php ADDED Viewed

@@ -0,0 +1,189 @@
+<?php
+/**
+ * Front-end setup guide — Widget Catalog (Widget Filter)
+ * Used by shortcode [sociallane_widget_catalog_setup].
+ *
+ * @package SocialLane_Elements
+ */
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+?>
+<div class="sociallane-setup-guide max-w-4xl mx-auto py-8 px-4 sm:px-6 text-neutral-700 dark:text-neutral-300">
+	<h1 class="text-2xl sm:text-3xl font-bold text-neutral-900 dark:text-white mb-2">
+		<?php esc_html_e( 'Widget Catalog Setup', 'sociallane-elements' ); ?>
+	</h1>
+	<p class="text-neutral-500 dark:text-neutral-400 mb-8">
+		<?php esc_html_e( 'How to add the Widget Catalog to a page and which commands to run so you can browse and copy npm install commands for components.', 'sociallane-elements' ); ?>
+	</p>
+	<section class="mb-10">
+		<h2 class="text-lg font-semibold text-neutral-800 dark:text-neutral-100 mb-3 border-b border-neutral-200 dark:border-neutral-700 pb-2">
+			<?php esc_html_e( '1. What is the Widget Catalog?', 'sociallane-elements' ); ?>
+		</h2>
+		<p class="mb-2">
+			<?php esc_html_e( 'The Widget Catalog (Widget Filter) is an Elementor widget that shows a filterable grid of all available SocialLane widgets. You can:', 'sociallane-elements' ); ?>
+		</p>
+		<ul class="list-disc list-inside space-y-1 mb-4 ml-2">
+			<li><?php esc_html_e( 'Filter and search by category', 'sociallane-elements' ); ?></li>
+			<li><?php esc_html_e( 'See the exact npm install command for each widget', 'sociallane-elements' ); ?></li>
+			<li><?php esc_html_e( 'Copy a single command or build a collection and copy one command to install multiple widgets', 'sociallane-elements' ); ?></li>
+			<li><?php esc_html_e( 'Copy the widget slug (e.g. for widgets.json)', 'sociallane-elements' ); ?></li>
+		</ul>
+	</section>
+	<section class="mb-10">
+		<h2 class="text-lg font-semibold text-neutral-800 dark:text-neutral-100 mb-3 border-b border-neutral-200 dark:border-neutral-700 pb-2">
+			<?php esc_html_e( '2. Installing the plugin', 'sociallane-elements' ); ?>
+		</h2>
+		<p class="mb-4">
+			<?php esc_html_e( 'Choose one way to get SocialLane Elements into your site.', 'sociallane-elements' ); ?>
+		</p>
+		<div class="mb-6">
+			<h3 class="text-sm font-semibold text-neutral-800 dark:text-neutral-200 mb-2"><?php esc_html_e( 'Option A: Clone from Git', 'sociallane-elements' ); ?></h3>
+			<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>cd wp-content/plugins
+git clone https://github.com/Mitch00llK/sociallane-elements.git
+cd sociallane-elements
+npm install</code></pre>
+			<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-2">
+				<?php esc_html_e( 'Build runs automatically after npm install. Then activate the plugin in WordPress → Plugins.', 'sociallane-elements' ); ?>
+			</p>
+		</div>
+		<div class="mb-6">
+			<h3 class="text-sm font-semibold text-neutral-800 dark:text-neutral-200 mb-2"><?php esc_html_e( 'Option B: Git submodule (versioned projects)', 'sociallane-elements' ); ?></h3>
+			<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>cd wp-content/plugins
+git submodule add https://github.com/Mitch00llK/sociallane-elements.git
+cd sociallane-elements
+git submodule update --init --recursive
+npm install</code></pre>
+		</div>
+		<div class="mb-6">
+			<h3 class="text-sm font-semibold text-neutral-800 dark:text-neutral-200 mb-2"><?php esc_html_e( 'Option C: Install from npm', 'sociallane-elements' ); ?></h3>
+			<p class="text-sm mb-2">
+				<?php esc_html_e( 'If the plugin is published as @sociallane/elements:', 'sociallane-elements' ); ?>
+			</p>
+			<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>npm install @sociallane/elements
+# Then copy into WordPress and install dependencies:
+cp -r node_modules/@sociallane/elements wp-content/plugins/sociallane-elements
+cd wp-content/plugins/sociallane-elements
+npm install</code></pre>
+			<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-2">
+				<?php esc_html_e( 'Or from wp-content/plugins: npm install @sociallane/elements, then move node_modules/@sociallane/elements to ./sociallane-elements and run npm install there.', 'sociallane-elements' ); ?>
+			</p>
+		</div>
+	</section>
+	<section class="mb-10">
+		<h2 class="text-lg font-semibold text-neutral-800 dark:text-neutral-100 mb-3 border-b border-neutral-200 dark:border-neutral-700 pb-2">
+			<?php esc_html_e( '3. Add the Widget Catalog to a page', 'sociallane-elements' ); ?>
+		</h2>
+		<ol class="list-decimal list-inside space-y-2 ml-2">
+			<li><?php esc_html_e( 'Edit any page with Elementor.', 'sociallane-elements' ); ?></li>
+			<li><?php esc_html_e( 'In the left panel, search for “Widget Filter” or “Widget Catalog”.', 'sociallane-elements' ); ?></li>
+			<li><?php esc_html_e( 'Drag the Widget Filter widget into your layout (e.g. in a section or container).', 'sociallane-elements' ); ?></li>
+			<li><?php esc_html_e( 'Optionally change the headline, number of columns, and whether search and category filters are shown.', 'sociallane-elements' ); ?></li>
+			<li><?php esc_html_e( 'Update the page. The catalog will list widgets based on the plugin’s widgets.json.', 'sociallane-elements' ); ?></li>
+		</ol>
+	</section>
+	<section class="mb-10">
+		<h2 class="text-lg font-semibold text-neutral-800 dark:text-neutral-100 mb-3 border-b border-neutral-200 dark:border-neutral-700 pb-2">
+			<?php esc_html_e( '4. Commands you need (plugin setup)', 'sociallane-elements' ); ?>
+		</h2>
+		<p class="mb-4">
+			<?php esc_html_e( 'For the catalog and all SocialLane widgets to work and look correct, run these from the plugin root.', 'sociallane-elements' ); ?>
+		</p>
+		<div class="mb-6">
+			<h3 class="text-sm font-semibold text-neutral-800 dark:text-neutral-200 mb-2"><?php esc_html_e( 'First-time or full install', 'sociallane-elements' ); ?></h3>
+			<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>cd wp-content/plugins/sociallane-elements
+# Install dependencies (core + widget packages)
+npm install
+# Build — REQUIRED so Tailwind includes widget styles
+npm run build</code></pre>
+			<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-2">
+				<?php esc_html_e( 'Tailwind scans the plugin’s PHP templates; without a build, widgets can render unstyled.', 'sociallane-elements' ); ?>
+			</p>
+		</div>
+		<div class="mb-6">
+			<h3 class="text-sm font-semibold text-neutral-800 dark:text-neutral-200 mb-2"><?php esc_html_e( 'After adding or removing widgets', 'sociallane-elements' ); ?></h3>
+			<p class="text-sm mb-2">
+				<?php esc_html_e( 'widgets.json is synced automatically on npm install. To sync manually (e.g. after adding/removing widget folders or submodules), run:', 'sociallane-elements' ); ?>
+			</p>
+			<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>npm run sync-widgets</code></pre>
+			<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-2">
+				<?php esc_html_e( 'This adds new widget slugs from packages/widgets/ and removes slugs whose folders are missing. You can also edit widgets.json by hand. Include "widget-filter" so the Widget Catalog is available in Elementor. Then run:', 'sociallane-elements' ); ?>
+			</p>
+			<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200 mt-2"><code>npm run build</code></pre>
+		</div>
+		<div class="mb-6">
+			<h3 class="text-sm font-semibold text-neutral-800 dark:text-neutral-200 mb-2"><?php esc_html_e( 'Uninstall and reinstall', 'sociallane-elements' ); ?></h3>
+			<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>npm run reinstall</code></pre>
+			<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-2">
+				<?php esc_html_e( 'Removes node_modules and runs npm install (and postinstall build). Use when dependencies are broken or after changing Node version.', 'sociallane-elements' ); ?>
+			</p>
+		</div>
+		<div>
+			<h3 class="text-sm font-semibold text-neutral-800 dark:text-neutral-200 mb-2"><?php esc_html_e( 'Development (watch mode)', 'sociallane-elements' ); ?></h3>
+			<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>npm run dev</code></pre>
+			<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-2">
+				<?php esc_html_e( 'Rebuilds automatically when you change templates or styles.', 'sociallane-elements' ); ?>
+			</p>
+		</div>
+	</section>
+	<section class="mb-10">
+		<h2 class="text-lg font-semibold text-neutral-800 dark:text-neutral-100 mb-3 border-b border-neutral-200 dark:border-neutral-700 pb-2">
+			<?php esc_html_e( '5. Using the catalog', 'sociallane-elements' ); ?>
+		</h2>
+		<ul class="space-y-2 list-disc list-inside ml-2">
+			<li><strong><?php esc_html_e( 'Copy single widget', 'sociallane-elements' ); ?></strong> — Each card shows the full <code class="bg-neutral-100 dark:bg-neutral-700 px-1 rounded text-sm">npm install @sociallane/widget-…</code> command; use the Copy button next to it.</li>
+			<li><strong><?php esc_html_e( 'Collection', 'sociallane-elements' ); ?></strong> — Check “Add to collection” on the widgets you want, then use “Copy npm install” in the sidebar to get one command that installs all selected packages.</li>
+			<li><strong><?php esc_html_e( 'Copy Name', 'sociallane-elements' ); ?></strong> — Copies the widget slug (e.g. hero-split) for use in widgets.json or docs.</li>
+		</ul>
+	</section>
+	<section class="mb-10">
+		<h2 class="text-lg font-semibold text-neutral-800 dark:text-neutral-100 mb-3 border-b border-neutral-200 dark:border-neutral-700 pb-2">
+			<?php esc_html_e( '6. Package mode (widgets.json)', 'sociallane-elements' ); ?>
+		</h2>
+		<p class="mb-2">
+			<?php esc_html_e( 'When widgets.json exists at the plugin root, the plugin runs in package mode: only widget components are loaded. The onboarding wizard, SocialLane settings page, widget preview pages, and this setup guide are not available on that installation.', 'sociallane-elements' ); ?>
+		</p>
+		<p class="mb-2">
+			<?php esc_html_e( 'To get the full admin (widget management, previews, this setup page), remove or rename widgets.json; the plugin will then use the Widget Manager and show all admin features.', 'sociallane-elements' ); ?>
+		</p>
+	</section>
+	<section class="mb-10">
+		<h2 class="text-lg font-semibold text-neutral-800 dark:text-neutral-100 mb-3 border-b border-neutral-200 dark:border-neutral-700 pb-2">
+			<?php esc_html_e( '7. Troubleshooting', 'sociallane-elements' ); ?>
+		</h2>
+		<dl class="space-y-4">
+			<dt class="font-medium text-neutral-800 dark:text-neutral-100"><?php esc_html_e( 'Widgets appear unstyled', 'sociallane-elements' ); ?></dt>
+			<dd class="ml-4">
+				<?php esc_html_e( 'Run', 'sociallane-elements' ); ?> <code class="bg-neutral-100 dark:bg-neutral-700 px-1 rounded text-sm">npm run build</code> <?php esc_html_e( 'from the plugin root. Tailwind only outputs classes it finds in the current PHP templates.', 'sociallane-elements' ); ?>
+			</dd>
+			<dt class="font-medium text-neutral-800 dark:text-neutral-100"><?php esc_html_e( 'Tailwind / styles not loading', 'sociallane-elements' ); ?></dt>
+			<dd class="ml-4">
+				<?php esc_html_e( 'If the plugin is using the Vite dev server and styles don’t appear, force production assets by adding to wp-config.php:', 'sociallane-elements' ); ?>
+				<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded p-2 text-sm mt-2 text-neutral-800 dark:text-neutral-200"><code>define( 'SOCIALLANE_ELEMENTS_VITE_PRODUCTION', true );</code></pre>
+				<?php esc_html_e( 'Then run', 'sociallane-elements' ); ?> <code class="bg-neutral-100 dark:bg-neutral-700 px-1 rounded text-sm">npm run build</code>.
+			</dd>
+			<dt class="font-medium text-neutral-800 dark:text-neutral-100"><?php esc_html_e( 'Widget Filter not in Elementor panel', 'sociallane-elements' ); ?></dt>
+			<dd class="ml-4">
+				<?php esc_html_e( 'Ensure "widget-filter" is listed in widgets.json and that SocialLane settings (Widget management) has the widget enabled.', 'sociallane-elements' ); ?>
+			</dd>
+		</dl>
+	</section>
+</div>