@sociallane/elements 1.0.0

package/packages/core/assets/js/utilities/split-text.js

@@ -0,0 +1,74 @@
+/**
+ * Split text animation utility.
+ * Text elements with data-sl-split animate characters/words/lines on scroll.
+ *
+ * @package SocialLane_Elements
+ */
+
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import SplitText from 'gsap/SplitText';
+
+const splitInstances = new WeakMap();
+
+/**
+ * Initialize split text animations within a scope.
+ *
+ * @param {Element|Document} scope Root element or document to search.
+ */
+export function initSplitText(scope = document) {
+  const container = scope instanceof Document ? scope.body : scope;
+  const els = container.querySelectorAll('[data-sl-split]');
+
+  els.forEach((el) => {
+    const type = el.getAttribute('data-sl-split') || 'words';
+    const staggerVal = parseFloat(el.getAttribute('data-sl-split-stagger') || 0.02);
+
+    if (!el.textContent.trim()) return;
+
+    const typeMap = { chars: 'chars', words: 'words', lines: 'lines' };
+    const splitType = typeMap[type] || 'words';
+
+    const split = new SplitText(el, {
+      type: splitType,
+      charsClass: 'sl-split-char',
+      wordsClass: 'sl-split-word',
+      linesClass: 'sl-split-line',
+    });
+
+    splitInstances.set(el, split);
+
+    const targets = split[splitType] ?? split.chars ?? split.words ?? split.lines;
+    if (!targets || targets.length === 0) return;
+
+    gsap.fromTo(
+      targets,
+      { opacity: 0, y: 15 },
+      {
+        opacity: 1,
+        y: 0,
+        duration: 0.5,
+        stagger: staggerVal,
+        ease: 'power2.out',
+        scrollTrigger: {
+          trigger: el,
+          start: 'top 85%',
+          toggleActions: 'play none none none',
+        },
+      }
+    );
+  });
+}
+
+/**
+ * Revert split text and clean up.
+ *
+ * @param {Element} el Element that was split.
+ */
+export function revertSplitText(el) {
+  const split = splitInstances.get(el);
+  if (split && typeof split.revert === 'function') {
+    split.revert();
+    splitInstances.delete(el);
+  }
+}

package/packages/core/assets/js/utilities/stagger.js

@@ -0,0 +1,46 @@
+/**
+ * Stagger animation utility.
+ * Children of elements with data-sl-stagger animate in sequence.
+ *
+ * @package SocialLane_Elements
+ */
+
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+/**
+ * Initialize stagger animations within a scope.
+ *
+ * @param {Element|Document} scope Root element or document to search.
+ */
+export function initStagger(scope = document) {
+  const container = scope instanceof Document ? scope.body : scope;
+  const parents = container.querySelectorAll('[data-sl-stagger]');
+
+  parents.forEach((parent) => {
+    const delayStr = parent.getAttribute('data-sl-stagger');
+    const staggerDelay = delayStr ? parseFloat(delayStr) : 0.1;
+    const children = Array.from(parent.children).filter(
+      (c) => !c.hasAttribute('data-sl-stagger-skip')
+    );
+
+    if (children.length === 0) return;
+
+    gsap.fromTo(
+      children,
+      { opacity: 0, y: 20 },
+      {
+        opacity: 1,
+        y: 0,
+        duration: 0.5,
+        stagger: staggerDelay,
+        ease: 'power2.out',
+        scrollTrigger: {
+          trigger: parent,
+          start: 'top 85%',
+          toggleActions: 'play none none none',
+        },
+      }
+    );
+  });
+}

package/packages/core/includes/class-plugin.php

@@ -0,0 +1,75 @@
+<?php
+/**
+ * Main Plugin Class
+ *
+ * @package SocialLane_Elements
+ */
+
+namespace SocialLane\Elements;
+
+// Prevent direct access
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Plugin bootstrap and service orchestration
+ */
+class Plugin {
+
+	/**
+	 * @var Vite_Assets
+	 */
+	private Vite_Assets $vite_assets;
+
+	/**
+	 * @var Widget_Manager
+	 */
+	private Widget_Manager $widget_manager;
+
+	/**
+	 * @var Widgets_Loader
+	 */
+	private Widgets_Loader $widgets_loader;
+
+	/**
+	 * @var Onboarding|null
+	 */
+	private $onboarding;
+
+	/**
+	 * @var Admin_Settings|null
+	 */
+	private $admin_settings;
+
+	/**
+	 * Initialize plugin
+	 */
+	public function init(): void {
+		$this->vite_assets    = new Vite_Assets( SOCIALLANE_CORE_PATH, SOCIALLANE_CORE_URL );
+		$this->widget_manager = new Widget_Manager();
+		$this->widgets_loader  = new Widgets_Loader( $this->widget_manager );
+
+		$this->vite_assets->init();
+
+		if ( ! sociallane_is_package_mode() ) {
+			$this->onboarding     = new Onboarding( $this->widget_manager );
+			$this->admin_settings = new Admin_Settings( $this->widget_manager );
+			$this->onboarding->init();
+			$this->admin_settings->init();
+		}
+
+		add_action( 'elementor/widgets/register', [ $this->widgets_loader, 'register_widgets' ] );
+		add_action( 'elementor/elements/categories_registered', [ $this->widgets_loader, 'register_categories' ] );
+
+		// Disable Elementor and Hello theme reset CSS so Tailwind/base controls the document.
+		Disable_Reset_Css::init();
+
+		// Dequeue Gravity Forms styles when Newsletter widget is present (allows Tailwind Forms).
+		if ( class_exists( 'GFForms' ) ) {
+			Gravity_Forms_Styles::init();
+		}
+
+		do_action( 'sociallane_elements_init' );
+	}
+}

package/packages/core/includes/class-vite-assets.php

@@ -0,0 +1,357 @@
+<?php
+/**
+ * Vite Assets Integration
+ *
+ * Loads Vite assets in WordPress with support for development HMR and production hashed filenames.
+ * Compatible with Local by Flywheel: uses site protocol (HTTPS) for dev server URL to avoid
+ * mixed-content blocking when the site runs at e.g. https://baseplate.development.
+ *
+ * @package SocialLane_Elements
+ */
+
+namespace SocialLane\Elements;
+
+// Prevent direct access
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Vite Assets Class
+ */
+class Vite_Assets {
+
+	private string $plugin_path;
+	private string $plugin_url;
+	private string $dev_server;
+	private ?array $manifest = null;
+
+	public function __construct( string $plugin_path, string $plugin_url ) {
+		$this->plugin_path = trailingslashit( $plugin_path );
+		$this->plugin_url  = trailingslashit( $plugin_url );
+		$this->dev_server  = $this->get_dev_server_url();
+	}
+
+	/**
+	 * Dev server URL for Vite. Matches site protocol for Local by Flywheel (HTTPS) to avoid mixed content.
+	 * Override with SOCIALLANE_ELEMENTS_VITE_DEV_SERVER (e.g. 'https://localhost:5173').
+	 */
+	private function get_dev_server_url(): string {
+		if ( defined( 'SOCIALLANE_ELEMENTS_VITE_DEV_SERVER' ) && SOCIALLANE_ELEMENTS_VITE_DEV_SERVER !== '' ) {
+			return rtrim( SOCIALLANE_ELEMENTS_VITE_DEV_SERVER, '/' );
+		}
+		$port = defined( 'SOCIALLANE_ELEMENTS_VITE_DEV_PORT' ) ? (int) SOCIALLANE_ELEMENTS_VITE_DEV_PORT : 5173;
+		$port = $port > 0 ? $port : 5173;
+		$protocol = is_ssl() ? 'https' : 'http';
+		return $protocol . '://localhost:' . $port;
+	}
+
+	public function init(): void {
+		add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_assets' ] );
+		add_action( 'elementor/frontend/after_enqueue_styles', [ $this, 'enqueue_assets' ] );
+		add_action( 'elementor/preview/enqueue_scripts', [ $this, 'enqueue_animations_script' ] );
+		add_filter( 'script_loader_tag', [ $this, 'script_loader_tag_module' ], 10, 3 );
+	}
+
+	/**
+	 * Add type="module" defer to animations script.
+	 *
+	 * @param string $tag    Script tag HTML.
+	 * @param string $handle Script handle.
+	 * @param string $src    Script URL.
+	 * @return string
+	 */
+	public function script_loader_tag_module( string $tag, string $handle, string $src ): string {
+		if ( $handle === 'sociallane-animations' ) {
+			return str_replace( '<script ', '<script type="module" defer ', $tag );
+		}
+		return $tag;
+	}
+
+	/**
+	 * Get Tailwind CSS URL for admin pages (onboarding, settings).
+	 * Only returns the built CSS URL (from manifest). Never returns the source
+	 * file — it contains @import 'tailwindcss' and would 404 in the browser.
+	 *
+	 * @param string $plugin_path Plugin directory path.
+	 * @param string $plugin_url  Plugin directory URL.
+	 * @return string CSS URL, or empty string if build not found.
+	 */
+	public static function get_admin_css_url( string $plugin_path, string $plugin_url ): string {
+		$plugin_path  = trailingslashit( $plugin_path );
+		$plugin_url   = trailingslashit( $plugin_url );
+		$manifest_paths = [
+			$plugin_path . 'assets/dist/manifest.json',
+			$plugin_path . 'assets/dist/.vite/manifest.json',
+		];
+
+		foreach ( $manifest_paths as $manifest_path ) {
+			if ( ! file_exists( $manifest_path ) ) {
+				continue;
+			}
+			$content  = file_get_contents( $manifest_path );
+			$manifest = is_string( $content ) ? json_decode( $content, true ) : null;
+			if ( ! is_array( $manifest ) ) {
+				continue;
+			}
+			// Vite may key by input path or by input name.
+			$entry = $manifest['assets/css/tailwind.css'] ?? $manifest['tailwind'] ?? null;
+			if ( ! empty( $entry['file'] ) ) {
+				return $plugin_url . 'assets/dist/' . $entry['file'];
+			}
+		}
+
+		return '';
+	}
+
+	/**
+	 * Whether to use the Vite dev server (HMR). Default workflow is `npm run dev` = `vite build --watch`:
+	 * assets are always loaded from built files (no probe). Optional: run `vite` (dev server) and set
+	 * SOCIALLANE_ELEMENTS_VITE_DEV_FORCE so the site loads from localhost (in Local/Docker the probe
+	 * fails because PHP cannot reach localhost:5173).
+	 *
+	 * Set SOCIALLANE_ELEMENTS_VITE_PRODUCTION to true in wp-config.php to always use built files
+	 * (fixes Tailwind not loading when dev server probe is wrong or transient is stale).
+	 */
+	private function use_dev_server(): bool {
+		if ( defined( 'SOCIALLANE_ELEMENTS_VITE_PRODUCTION' ) && SOCIALLANE_ELEMENTS_VITE_PRODUCTION ) {
+			delete_transient( 'sociallane_vite_dev_up' );
+			return false;
+		}
+		if ( defined( 'SOCIALLANE_ELEMENTS_VITE_DEV_FORCE' ) && SOCIALLANE_ELEMENTS_VITE_DEV_FORCE ) {
+			return true;
+		}
+
+		$cache_key = 'sociallane_vite_dev_up';
+		$cached    = get_transient( $cache_key );
+		if ( $cached === 'no' ) {
+			return false;
+		}
+		if ( $cached === 'yes' ) {
+			return true;
+		}
+
+		$is_running = $this->probe_dev_server( $this->dev_server );
+		if ( ! $is_running && strpos( $this->dev_server, 'localhost' ) !== false ) {
+			$host_alt = str_replace( 'localhost', 'host.docker.internal', $this->dev_server );
+			$is_running = $this->probe_dev_server( $host_alt );
+		}
+
+		set_transient( $cache_key, $is_running ? 'yes' : 'no', $is_running ? 30 : 2 );
+
+		return $is_running;
+	}
+
+	/**
+	 * Probe a dev server URL to see if Vite is running.
+	 */
+	private function probe_dev_server( string $base_url ): bool {
+		$is_https = ( strpos( $base_url, 'https://' ) === 0 );
+		$context  = stream_context_create( [
+			'http' => [ 'timeout' => 1 ],
+			'ssl'  => $is_https ? [
+				'verify_peer'      => false,
+				'verify_peer_name' => false,
+			] : [],
+		] );
+		$url = $base_url . '/@vite/client';
+		// Suppress PHP warnings for connection failures (expected when dev server is not running).
+		set_error_handler( function () {
+			return true;
+		}, E_WARNING );
+		$response = file_get_contents( $url, false, $context );
+		restore_error_handler();
+		return $response !== false;
+	}
+
+	/**
+	 * Manifest paths to check (core first, then .vite subdir).
+	 *
+	 * @return array List of manifest file paths
+	 */
+	private function get_core_manifest_paths(): array {
+		return [
+			$this->plugin_path . 'assets/dist/manifest.json',
+			$this->plugin_path . 'assets/dist/.vite/manifest.json',
+		];
+	}
+
+	/**
+	 * Get paths to widget package manifests (packages/widgets/{slug}/assets/dist).
+	 *
+	 * @return array List of [ 'path' => dir path, 'url' => base URL, 'slug' => widget slug ]
+	 */
+	public static function get_widget_manifest_locations(): array {
+		$widgets_dir = SOCIALLANE_ELEMENTS_PATH . 'packages/widgets';
+		if ( ! is_dir( $widgets_dir ) ) {
+			return [];
+		}
+		$locations = [];
+		$items     = glob( $widgets_dir . '/*', GLOB_ONLYDIR );
+		foreach ( $items as $item_dir ) {
+			$slug = basename( $item_dir );
+			$dist = $item_dir . '/assets/dist';
+			if ( ! is_dir( $dist ) ) {
+				continue;
+			}
+			foreach ( [ $dist . '/.vite/manifest.json', $dist . '/manifest.json' ] as $manifest_path ) {
+				if ( file_exists( $manifest_path ) ) {
+					$locations[] = [
+						'path' => $dist,
+						'url'  => SOCIALLANE_ELEMENTS_URL . 'packages/widgets/' . $slug . '/assets/dist/',
+						'slug' => $slug,
+					];
+					break;
+				}
+			}
+		}
+		return $locations;
+	}
+
+	/**
+	 * Get asset URL for a widget package entry (e.g. 'widget.css', 'widget.js').
+	 * Returns empty string if manifest or entry not found.
+	 *
+	 * @param string $widget_slug Widget package slug (e.g. 'hero-overlay').
+	 * @param string $entry_key   Manifest entry key (e.g. 'assets/css/widget.css').
+	 * @return string URL to the built asset, or empty string.
+	 */
+	public static function get_widget_asset_url( string $widget_slug, string $entry_key ): string {
+		$locations = self::get_widget_manifest_locations();
+		foreach ( $locations as $loc ) {
+			if ( $loc['slug'] !== $widget_slug ) {
+				continue;
+			}
+			$manifest_path = $loc['path'] . '/.vite/manifest.json';
+			if ( ! file_exists( $manifest_path ) ) {
+				$manifest_path = $loc['path'] . '/manifest.json';
+			}
+			if ( ! file_exists( $manifest_path ) ) {
+				return '';
+			}
+			$content  = file_get_contents( $manifest_path );
+			$manifest = is_string( $content ) ? json_decode( $content, true ) : null;
+			if ( ! is_array( $manifest ) ) {
+				return '';
+			}
+			$entry = $manifest[ $entry_key ] ?? $manifest[ basename( $entry_key, '.css' ) ] ?? null;
+			if ( ! empty( $entry['file'] ) ) {
+				return $loc['url'] . $entry['file'];
+			}
+		}
+		return '';
+	}
+
+	private function get_manifest(): array {
+		if ( $this->manifest !== null ) {
+			return $this->manifest;
+		}
+
+		$paths = $this->get_core_manifest_paths();
+
+		foreach ( $paths as $manifest_path ) {
+			if ( file_exists( $manifest_path ) ) {
+				$content        = file_get_contents( $manifest_path );
+				$this->manifest = is_string( $content )
+					? ( json_decode( $content, true ) ?: [] )
+					: [];
+				$this->manifest = apply_filters( 'sociallane_elements_vite_manifest', $this->manifest );
+				return $this->manifest;
+			}
+		}
+
+		$this->manifest = [];
+		return $this->manifest;
+	}
+
+	public function enqueue_assets(): void {
+		if ( $this->use_dev_server() ) {
+			$this->enqueue_dev_assets();
+			return;
+		}
+
+		$this->enqueue_production_assets();
+	}
+
+	private function enqueue_dev_assets(): void {
+		wp_enqueue_script(
+			'sociallane-vite-client',
+			$this->dev_server . '/@vite/client',
+			[],
+			null,
+			false
+		);
+
+		add_filter( 'script_loader_tag', function ( $tag, $handle ) {
+			if ( $handle === 'sociallane-vite-client' ) {
+				return str_replace( '<script ', '<script type="module" ', $tag );
+			}
+			return $tag;
+		}, 10, 2 );
+
+		wp_enqueue_style(
+			'sociallane-tailwind',
+			$this->dev_server . '/assets/css/tailwind.css',
+			[],
+			null
+		);
+
+		wp_enqueue_script(
+			'sociallane-animations',
+			$this->dev_server . '/assets/js/animations.js',
+			[],
+			null,
+			true
+		);
+	}
+
+	/**
+	 * Enqueue animations script (frontend and Elementor preview).
+	 * Called by enqueue_assets (dev/prod) and elementor/preview/enqueue_scripts.
+	 */
+	public function enqueue_animations_script(): void {
+		if ( $this->use_dev_server() ) {
+			wp_enqueue_script(
+				'sociallane-animations',
+				$this->dev_server . '/assets/js/animations.js',
+				[],
+				null,
+				true
+			);
+			return;
+		}
+
+		$manifest = $this->get_manifest();
+		$js_entry = 'assets/js/animations.js';
+		$entry    = $manifest[ $js_entry ] ?? null;
+
+		if ( $entry && ! empty( $entry['file'] ) ) {
+			wp_enqueue_script(
+				'sociallane-animations',
+				$this->plugin_url . 'assets/dist/' . $entry['file'],
+				[],
+				null,
+				true
+			);
+		}
+	}
+
+	private function enqueue_production_assets(): void {
+		$manifest  = $this->get_manifest();
+		$css_entry = 'assets/css/tailwind.css';
+
+		if ( isset( $manifest[ $css_entry ] ) ) {
+			$file = $manifest[ $css_entry ]['file'] ?? null;
+			if ( $file ) {
+				wp_enqueue_style(
+					'sociallane-tailwind',
+					$this->plugin_url . 'assets/dist/' . $file,
+					[],
+					null
+				);
+			}
+		}
+
+		$this->enqueue_animations_script();
+	}
+}