@sociallane/elements 1.0.0

package/elements/button/templates/render.php

@@ -0,0 +1,89 @@
+<?php
+/**
+ * Element Template: Button
+ *
+ * REQUIRED DATA ($button): text, url
+ * OPTIONAL: variant, size, color (accent), icon, icon_position, attrs, class
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( empty( $button ) || empty( $button['text'] ) ) {
+	return;
+}
+
+$text          = $button['text'];
+$url           = $button['url'] ?? '#';
+$variant       = $button['variant'] ?? 'primary';
+$size          = $button['size'] ?? 'md';
+$color         = $button['color'] ?? 'default';
+$icon          = $button['icon'] ?? null;
+$icon_position = $button['icon_position'] ?? 'right';
+$attrs         = $button['attrs'] ?? '';
+$extra_class   = $button['class'] ?? '';
+
+// Variant styles: Primary, Secondary, Ghost, Outline
+$variant_classes = [
+	'primary'   => 'bg-transparent text-white border border-blue-chill-100/30 hover:bg-blue-chill-400/20 focus:ring-2 focus:ring-primary focus:ring-offset-2 dark:focus:ring-offset-neutral-900',
+	'secondary' => 'bg-blue-chill-100/30 text-white hover:bg-blue-chill-200/50 focus:ring-2 focus:ring-secondary focus:ring-offset-2 dark:focus:ring-offset-neutral-900',
+	'ghost'     => 'bg-transparent text-primary hover:bg-primary/10 focus:ring-2 focus:ring-primary focus:ring-offset-2 dark:text-primary-light dark:hover:bg-white/10 dark:focus:ring-offset-neutral-900',
+	'outline'   => 'bg-transparent text-primary border border-primary hover:bg-primary hover:text-white focus:ring-2 focus:ring-primary focus:ring-offset-2 dark:text-primary-light dark:border-primary-light dark:hover:bg-primary dark:hover:text-white dark:focus:ring-offset-neutral-900',
+];
+
+// Optional accent color override: same style, different palette
+$accent_classes = [
+	'primary' => [
+		'default'     => null,
+		'blue-chill'  => 'bg-blue-chill-500 text-white hover:bg-blue-chill-600 focus:ring-2 focus:ring-blue-chill-500 focus:ring-offset-2 dark:focus:ring-offset-neutral-900',
+		'web-orange'  => 'bg-web-orange-500 text-white hover:bg-web-orange-600 focus:ring-2 focus:ring-web-orange-500 focus:ring-offset-2 dark:focus:ring-offset-neutral-900',
+	],
+	'outline' => [
+		'default'     => null,
+		'blue-chill'  => 'bg-transparent text-blue-chill-500 border border-blue-chill-500 hover:bg-blue-chill-500 hover:text-white focus:ring-2 focus:ring-blue-chill-500 focus:ring-offset-2 dark:text-blue-chill-300 dark:border-blue-chill-300 dark:hover:bg-blue-chill-500 dark:hover:text-white dark:focus:ring-offset-neutral-900',
+		'web-orange'  => 'bg-transparent text-web-orange-500 border border-web-orange-500 hover:bg-web-orange-500 hover:text-white focus:ring-2 focus:ring-web-orange-500 focus:ring-offset-2 dark:text-web-orange-400 dark:border-web-orange-400 dark:hover:bg-web-orange-500 dark:hover:text-white dark:focus:ring-offset-neutral-900',
+	],
+	'ghost' => [
+		'default'     => null,
+		'blue-chill'  => 'bg-transparent text-blue-chill-500 hover:bg-blue-chill-500/10 focus:ring-2 focus:ring-blue-chill-500 focus:ring-offset-2 dark:text-blue-chill-300 dark:hover:bg-blue-chill-500/10 dark:focus:ring-offset-neutral-900',
+		'web-orange'  => 'bg-transparent text-web-orange-500 hover:bg-web-orange-500/10 focus:ring-2 focus:ring-web-orange-500 focus:ring-offset-2 dark:text-web-orange-400 dark:hover:bg-web-orange-500/10 dark:focus:ring-offset-neutral-900',
+	],
+];
+if ( in_array( $variant, [ 'primary', 'outline', 'ghost' ], true ) && $color !== 'default' && isset( $accent_classes[ $variant ][ $color ] ) ) {
+	$variant_classes[ $variant ] = $accent_classes[ $variant ][ $color ];
+}
+
+$size_classes = [
+	'sm' => 'px-4 py-2 text-sm gap-1.5',
+	'md' => 'px-6 py-3 text-base gap-2',
+	'lg' => 'px-8 py-4 text-lg gap-2.5',
+];
+
+$base_classes = 'no-underline inline-flex items-center justify-center font-normal rounded-full transition-all duration-200 focus:outline-none';
+$classes      = implode( ' ', array_filter( [
+	$base_classes,
+	$variant_classes[ $variant ] ?? $variant_classes['primary'],
+	$size_classes[ $size ] ?? $size_classes['md'],
+	$extra_class,
+] ) );
+
+$icon_html = '';
+if ( ! empty( $icon['value'] ) ) {
+	ob_start();
+	\Elementor\Icons_Manager::render_icon( $icon, [ 'aria-hidden' => 'true', 'class' => 'size-5' ] );
+	$icon_html = ob_get_clean();
+}
+?>
+
+<a href="<?php echo esc_url( $url ); ?>" <?php echo $attrs; ?> class="<?php echo esc_attr( $classes ); ?>">
+	<?php if ( $icon_html && $icon_position === 'left' ) : ?>
+		<?php echo $icon_html; ?>
+	<?php endif; ?>
+	<span><?php echo $text; ?></span>
+	<?php if ( $icon_html && $icon_position === 'right' ) : ?>
+		<?php echo $icon_html; ?>
+	<?php endif; ?>
+</a>

package/elements/cta-group/templates/render.php

@@ -0,0 +1,61 @@
+<?php
+/**
+ * Element Template: CTA Group
+ *
+ * Renders primary + secondary button in a flex row. Uses button element internally.
+ *
+ * REQUIRED: None (renders nothing if no buttons)
+ * $cta_group = [
+ *   'show_primary'    => bool
+ *   'primary'         => array|null  Button data for elements/button
+ *   'show_secondary'  => bool
+ *   'secondary'       => array|null  Button data for elements/button
+ *   'class'           => string      Wrapper classes (default: mt-8 flex flex-col sm:flex-row gap-4)
+ *   'primary_extras'  => string      Extra classes for primary button
+ *   'secondary_extras'=> string      Extra classes for secondary button
+ *   'elements_path'   => string      Path to elements dir (optional; uses SOCIALLANE_ELEMENTS_PATH if not set)
+ * ]
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( empty( $cta_group ) || ! is_array( $cta_group ) ) {
+	return;
+}
+
+$show_primary   = ! empty( $cta_group['show_primary'] ) && ! empty( $cta_group['primary'] );
+$show_secondary = ! empty( $cta_group['show_secondary'] ) && ! empty( $cta_group['secondary'] );
+
+if ( ! $show_primary && ! $show_secondary ) {
+	return;
+}
+
+$wrapper_class  = $cta_group['class'] ?? 'mt-8 flex flex-col sm:flex-row gap-4';
+$primary_extras = $cta_group['primary_extras'] ?? '';
+$secondary_extras = $cta_group['secondary_extras'] ?? '';
+$elements_path  = $cta_group['elements_path'] ?? SOCIALLANE_ELEMENTS_PATH . 'elements';
+?>
+<div class="<?php echo esc_attr( $wrapper_class ); ?>">
+	<?php if ( $show_primary ) : ?>
+		<?php
+		$button = $cta_group['primary'];
+		if ( $primary_extras !== '' ) {
+			$button['class'] = ( $button['class'] ?? '' ) . ' ' . $primary_extras;
+		}
+		include $elements_path . '/button/templates/render.php';
+		?>
+	<?php endif; ?>
+	<?php if ( $show_secondary ) : ?>
+		<?php
+		$button = $cta_group['secondary'];
+		if ( $secondary_extras !== '' ) {
+			$button['class'] = ( $button['class'] ?? '' ) . ' ' . $secondary_extras;
+		}
+		include $elements_path . '/button/templates/render.php';
+		?>
+	<?php endif; ?>
+</div>

package/elements/image/image.php

@@ -0,0 +1,113 @@
+<?php
+/**
+ * Element: Image
+ *
+ * Optimized, accessible image with srcset support.
+ * Available as standalone Elementor widget AND as includable template.
+ *
+ * @package SocialLane_Elements
+ */
+
+namespace SocialLane\Elements;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Image Element
+ */
+class Image extends Widget_Base {
+
+	public function get_name(): string {
+		return 'image';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'Image', 'sociallane-elements' );
+	}
+
+	public function get_icon(): string {
+		return 'eicon-image';
+	}
+
+	public function get_categories(): array {
+		return [ 'sociallane-elements' ];
+	}
+
+	public function get_keywords(): array {
+		return [ 'image', 'photo', 'media' ];
+	}
+
+	protected function register_controls(): void {
+		$this->start_controls_section(
+			'section_image',
+			[
+				'label' => esc_html__( 'Image', 'sociallane-elements' ),
+			]
+		);
+
+		$this->add_control(
+			'image',
+			[
+				'label'   => esc_html__( 'Choose Image', 'sociallane-elements' ),
+				'type'    => Controls_Manager::MEDIA,
+				'default' => [ 'url' => \Elementor\Utils::get_placeholder_image_src() ],
+			]
+		);
+
+		$this->add_control(
+			'alt',
+			[
+				'label'       => esc_html__( 'Alt Text', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'description' => esc_html__( 'Required for accessibility', 'sociallane-elements' ),
+			]
+		);
+
+		$this->add_control(
+			'loading',
+			[
+				'label'   => esc_html__( 'Loading', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => 'lazy',
+				'options' => [
+					'lazy'  => esc_html__( 'Lazy', 'sociallane-elements' ),
+					'eager' => esc_html__( 'Eager', 'sociallane-elements' ),
+				],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	protected function render(): void {
+		$settings = $this->get_settings_for_display();
+		$img      = $settings['image'] ?? [];
+
+		$image = [
+			'src'     => esc_url( $img['url'] ?? '' ),
+			'alt'     => esc_attr( $settings['alt'] ?? '' ),
+			'id'      => $img['id'] ?? 0,
+			'srcset'  => '',
+			'sizes'   => '100vw',
+			'width'   => '',
+			'height'  => '',
+			'loading' => $settings['loading'] ?? 'lazy',
+		];
+
+		if ( $image['id'] ) {
+			$meta = wp_get_attachment_metadata( $image['id'] );
+			if ( $meta ) {
+				$image['width']  = $meta['width'] ?? '';
+				$image['height'] = $meta['height'] ?? '';
+				$image['srcset'] = wp_get_attachment_image_srcset( $image['id'], 'full' ) ?: '';
+			}
+		}
+
+		include __DIR__ . '/templates/render.php';
+	}
+}

package/elements/image/templates/render.php

@@ -0,0 +1,43 @@
+<?php
+/**
+ * Element Template: Image
+ *
+ * REQUIRED DATA ($image): src, alt
+ * OPTIONAL: srcset, sizes, width, height, loading, class
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( empty( $image ) || empty( $image['src'] ) ) {
+	return;
+}
+
+$src     = esc_url( $image['src'] );
+$alt     = esc_attr( $image['alt'] ?? '' );
+$srcset  = $image['srcset'] ?? '';
+$sizes   = $image['sizes'] ?? '';
+$width   = $image['width'] ?? '';
+$height  = $image['height'] ?? '';
+$loading = $image['loading'] ?? 'lazy';
+$class   = $image['class'] ?? '';
+
+$fetchpriority = ( $loading === 'eager' ) ? 'high' : '';
+$classes       = implode( ' ', array_filter( [ 'max-w-full h-full', $class ] ) );
+?>
+
+<img
+	src="<?php echo $src; ?>"
+	alt="<?php echo $alt; ?>"
+	<?php if ( $srcset ) : ?>srcset="<?php echo esc_attr( $srcset ); ?>"<?php endif; ?>
+	<?php if ( $sizes ) : ?>sizes="<?php echo esc_attr( $sizes ); ?>"<?php endif; ?>
+	<?php if ( $width ) : ?>width="<?php echo esc_attr( $width ); ?>"<?php endif; ?>
+	<?php if ( $height ) : ?>height="<?php echo esc_attr( $height ); ?>"<?php endif; ?>
+	loading="<?php echo esc_attr( $loading ); ?>"
+	decoding="async"
+	<?php if ( $fetchpriority ) : ?>fetchpriority="<?php echo esc_attr( $fetchpriority ); ?>"<?php endif; ?>
+	class="<?php echo esc_attr( $classes ); ?>"
+/>

package/elements/section-header/templates/render.php

@@ -0,0 +1,103 @@
+<?php
+/**
+ * Element Template: Section Header
+ *
+ * Renders eyebrow + headline + optional description. Supports centered, left, or right alignment.
+ * Use with or without a wrapping <header> element.
+ *
+ * REQUIRED: None (all fields optional; renders nothing if no content)
+ * $header = [
+ *   'id'                => string   Section/header id for aria-labelledby
+ *   'use_wrapper'       => bool     Wrap in <header> (default true)
+ *   'alignment'         => string   'center'|'left'|'right'
+ *   'block_class'       => string   Outer constraint e.g. 'max-w-3xl mx-auto'
+ *   'margin_bottom'     => string   e.g. 'mb-12 md:mb-16'
+ *   'show_eyebrow'      => bool
+ *   'eyebrow'           => string
+ *   'eyebrow_class'     => string   From $view['classes']['eyebrow']
+ *   'eyebrow_extras'    => string   Per-widget sizing e.g. 'mb-2'
+ *   'show_headline'     => bool
+ *   'headline'          => string
+ *   'headline_tag'      => string   h1, h2, h3
+ *   'headline_class'    => string   From $view['classes']['headline']
+ *   'headline_extras'   => string   e.g. 'text-3xl sm:text-4xl md:text-5xl font-bold font-heading leading-tight'
+ *   'headline_id'       => string   Optional; if set, headline gets id (for hero aria-labelledby)
+ *   'show_description'  => bool     Or use show_subtitle
+ *   'description'       => string   Or use subtitle
+ *   'description_class' => string   Or use subtitle_class
+ *   'description_extras'=> string   Or use subtitle_extras
+ * ]
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( empty( $header ) || ! is_array( $header ) ) {
+	return;
+}
+
+$use_wrapper   = $header['use_wrapper'] ?? true;
+$alignment     = $header['alignment'] ?? 'center';
+$block_class   = $header['block_class'] ?? 'max-w-3xl mx-auto';
+$margin_bottom = $header['margin_bottom'] ?? 'mb-12 md:mb-16';
+
+$show_eyebrow     = ! empty( $header['show_eyebrow'] ) && ( $header['eyebrow'] ?? '' ) !== '';
+$show_headline    = ! empty( $header['show_headline'] ) && ( $header['headline'] ?? '' ) !== '';
+$show_description = ! empty( $header['show_description'] ?? $header['show_subtitle'] ?? false )
+	&& ( ( $header['description'] ?? $header['subtitle'] ?? '' ) ) !== '';
+
+$has_content = $show_eyebrow || $show_headline || $show_description;
+if ( ! $has_content ) {
+	return;
+}
+
+$align_map = [
+	'center' => 'text-center',
+	'left'   => 'text-left',
+	'right'  => 'text-right',
+];
+$align_class = $align_map[ $alignment ] ?? 'text-center';
+
+$header_tag  = $header['headline_tag'] ?? 'h2';
+$headline_id = $header['headline_id'] ?? '';
+// When headline_id is set, put id on headline; otherwise use header id for the wrapper
+$header_id   = $headline_id ? '' : ( $header['id'] ?? '' );
+
+$eyebrow_class   = trim( ( $header['eyebrow_class'] ?? '' ) . ' ' . ( $header['eyebrow_extras'] ?? 'mb-2' ) );
+$headline_class  = trim( ( $header['headline_class'] ?? '' ) . ' ' . ( $header['headline_extras'] ?? 'text-3xl sm:text-4xl md:text-5xl font-bold font-heading leading-tight' ) );
+$desc_text       = $header['description'] ?? $header['subtitle'] ?? '';
+$desc_class      = trim( ( $header['description_class'] ?? $header['subtitle_class'] ?? '' ) . ' ' . ( $header['description_extras'] ?? $header['subtitle_extras'] ?? 'mt-4 md:mt-6 text-base md:text-lg leading-relaxed' ) );
+
+$wrapper_class = trim( $align_class . ' ' . $block_class . ' ' . $margin_bottom );
+if ( $use_wrapper && $header_id ) {
+	$wrapper_class .= '';
+}
+?>
+<?php if ( $use_wrapper ) : ?>
+<header<?php echo $header_id ? ' id="' . esc_attr( $header_id ) . '"' : ''; ?> class="<?php echo esc_attr( $wrapper_class ); ?>">
+<?php endif; ?>
+	<?php if ( $show_eyebrow ) : ?>
+		<p class="<?php echo esc_attr( $eyebrow_class ); ?>">
+			<?php echo $header['eyebrow']; ?>
+		</p>
+	<?php endif; ?>
+	<?php if ( $show_headline ) : ?>
+		<<?php echo $header_tag; ?>
+			<?php echo $headline_id ? ' id="' . esc_attr( $headline_id ) . '"' : ''; ?>
+			class="<?php echo esc_attr( $headline_class ); ?>"
+			<?php echo ! empty( $header['headline_attrs'] ) ? ' ' . $header['headline_attrs'] : ''; ?>
+		>
+			<?php echo $header['headline']; ?>
+		</<?php echo $header_tag; ?>>
+	<?php endif; ?>
+	<?php if ( $show_description ) : ?>
+		<p class="<?php echo esc_attr( $desc_class ); ?>">
+			<?php echo $desc_text; ?>
+		</p>
+	<?php endif; ?>
+<?php if ( $use_wrapper ) : ?>
+</header>
+<?php endif; ?>

package/includes/button-presets.php

@@ -0,0 +1,71 @@
+<?php
+/**
+ * Button preset styles for Elementor widgets
+ *
+ * Single source of truth for button variant + size combinations so every widget
+ * can offer a "Button style" dropdown with the same preset options.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Get button preset options for Elementor SELECT control
+ *
+ * Style only (no size); all presets use size 'md' for consistent appearance.
+ *
+ * @return array<string, string> Option key => label
+ */
+function sociallane_get_button_preset_options(): array {
+	return [
+		'primary'   => esc_html__( 'Primary', 'sociallane-elements' ),
+		'secondary' => esc_html__( 'Secondary', 'sociallane-elements' ),
+		'ghost'     => esc_html__( 'Ghost', 'sociallane-elements' ),
+		'outline'   => esc_html__( 'Outline', 'sociallane-elements' ),
+	];
+}
+
+/**
+ * Parse a preset key into variant and size
+ *
+ * All presets use size 'md'. Legacy keys (e.g. primary_lg) fall back to variant + md.
+ *
+ * @param string $preset Preset key (e.g. 'primary', 'outline', 'ghost')
+ * @return array{ variant: string, size: string }
+ */
+function sociallane_parse_button_preset( string $preset ): array {
+	$valid = [
+		'primary'   => [ 'variant' => 'primary', 'size' => 'md' ],
+		'secondary' => [ 'variant' => 'secondary', 'size' => 'md' ],
+		'ghost'     => [ 'variant' => 'ghost', 'size' => 'md' ],
+		'outline'   => [ 'variant' => 'outline', 'size' => 'md' ],
+	];
+	if ( isset( $valid[ $preset ] ) ) {
+		return $valid[ $preset ];
+	}
+	// Legacy: e.g. primary_lg, outline_sm → use variant, force size md
+	$variant = preg_replace( '/_(sm|md|lg)$/', '', $preset );
+	if ( in_array( $variant, [ 'primary', 'secondary', 'ghost', 'outline' ], true ) ) {
+		return [ 'variant' => $variant, 'size' => 'md' ];
+	}
+	return [ 'variant' => 'primary', 'size' => 'md' ];
+}
+
+/**
+ * Get button color (accent) options for an optional "Button color" dropdown
+ *
+ * Use the same button style (e.g. Primary) with different accent colors.
+ * Pass the selected value as $button['color'] when rendering; default means use variant default.
+ *
+ * @return array<string, string> Option key => label
+ */
+function sociallane_get_button_color_options(): array {
+	return [
+		'default'     => esc_html__( 'Default (brand)', 'sociallane-elements' ),
+		'blue-chill'  => esc_html__( 'Blue Chilli', 'sociallane-elements' ),
+		'web-orange'  => esc_html__( 'Web Orange', 'sociallane-elements' ),
+	];
+}

package/includes/class-admin-settings.php

@@ -0,0 +1,134 @@
+<?php
+/**
+ * Admin Settings Page
+ *
+ * Post-onboarding widget management and plugin settings.
+ *
+ * @package SocialLane\Elements
+ * @since   1.1.0
+ */
+
+namespace SocialLane\Elements;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class Admin_Settings {
+
+	private Widget_Manager $widget_manager;
+
+	public function __construct( Widget_Manager $widget_manager ) {
+		$this->widget_manager = $widget_manager;
+	}
+
+	public function init(): void {
+		add_action( 'admin_menu', [ $this, 'register_menu' ] );
+		add_action( 'admin_init', [ $this, 'handle_save' ] );
+		add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_assets' ] );
+	}
+
+	public function register_menu(): void {
+		add_menu_page(
+			__( 'SocialLane Elements', 'sociallane-elements' ),
+			__( 'SocialLane', 'sociallane-elements' ),
+			'manage_options',
+			'sociallane-settings',
+			[ $this, 'render' ],
+			'dashicons-layout',
+			58
+		);
+		add_submenu_page(
+			'sociallane-settings',
+			__( 'Widget Catalog Setup', 'sociallane-elements' ),
+			__( 'Widget Catalog Setup', 'sociallane-elements' ),
+			'manage_options',
+			'sociallane-widget-catalog-setup',
+			[ $this, 'render_setup_page' ]
+		);
+	}
+
+	public function handle_save(): void {
+		if ( ! isset( $_POST['sociallane_settings_nonce'] ) ) {
+			return;
+		}
+		if ( ! wp_verify_nonce( sanitize_text_field( wp_unslash( $_POST['sociallane_settings_nonce'] ) ), 'sociallane_settings' ) ) {
+			return;
+		}
+		if ( ! current_user_can( 'manage_options' ) ) {
+			return;
+		}
+
+		$widgets = isset( $_POST['widgets'] ) && is_array( $_POST['widgets'] )
+			? array_map( 'sanitize_text_field', wp_unslash( $_POST['widgets'] ) )
+			: [];
+		$this->widget_manager->set_enabled_widgets( $widgets );
+
+		$prev_preview = (bool) get_option( 'sociallane_preview_pages_enabled', false );
+		$new_preview  = isset( $_POST['preview_pages_enabled'] ) && $_POST['preview_pages_enabled'] === '1';
+		update_option( 'sociallane_preview_pages_enabled', $new_preview );
+		if ( $prev_preview !== $new_preview ) {
+			if ( $new_preview ) {
+				set_transient( 'sociallane_preview_flush_rules', 1, 60 );
+			} else {
+				flush_rewrite_rules();
+			}
+		}
+
+		wp_safe_redirect( admin_url( 'admin.php?page=sociallane-settings&saved=1' ) );
+		exit;
+	}
+
+	/**
+	 * @param string $hook Current admin page hook.
+	 */
+	public function enqueue_assets( string $hook ): void {
+		if ( $hook !== 'toplevel_page_sociallane-settings' && $hook !== 'sociallane-settings_page_sociallane-widget-catalog-setup' ) {
+			return;
+		}
+
+		$css_url = Vite_Assets::get_admin_css_url( SOCIALLANE_CORE_PATH, SOCIALLANE_CORE_URL );
+		if ( $css_url !== '' ) {
+			wp_enqueue_style(
+				'sociallane-admin',
+				$css_url,
+				[],
+				SOCIALLANE_ELEMENTS_VERSION
+			);
+		}
+
+		wp_enqueue_script(
+			'sociallane-widget-browser',
+			SOCIALLANE_ELEMENTS_URL . 'admin/js/widget-browser.js',
+			[],
+			SOCIALLANE_ELEMENTS_VERSION,
+			true
+		);
+	}
+
+	public function render(): void {
+		$data = [
+			'registry'              => Widget_Manager::get_widget_registry(),
+			'categories'             => Widget_Manager::get_categories(),
+			'enabled'                => $this->widget_manager->get_enabled_widgets(),
+			'saved'                  => isset( $_GET['saved'] ),
+			'preview_pages_enabled'  => (bool) get_option( 'sociallane_preview_pages_enabled', false ),
+		];
+
+		$view_file = SOCIALLANE_ELEMENTS_PATH . 'admin/views/settings.php';
+		if ( file_exists( $view_file ) ) {
+			include $view_file;
+		} else {
+			wp_die( esc_html__( 'Settings view file not found.', 'sociallane-elements' ) );
+		}
+	}
+
+	public function render_setup_page(): void {
+		$view_file = SOCIALLANE_ELEMENTS_PATH . 'admin/views/setup-widget-catalog.php';
+		if ( file_exists( $view_file ) ) {
+			include $view_file;
+		} else {
+			wp_die( esc_html__( 'Setup view file not found.', 'sociallane-elements' ) );
+		}
+	}
+}