@sociallane/elements 1.0.0

package/packages/widgets/bento-grid/data/view.php

@@ -0,0 +1,327 @@
+<?php
+/**
+ * Data Preparation: Bento Grid
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Registered bento grid layouts (single source of truth).
+ * Key = layout value in settings, label = editor dropdown, partial = template filename in partials/.
+ *
+ * @return array<string, array{label: string, partial: string}>
+ */
+function get_bento_grid_layouts(): array {
+	return [
+		'default'                  => [
+			'label'   => esc_html__( 'Default (4 cells)', 'sociallane-elements' ),
+			'partial' => 'default-grid.php',
+		],
+		'two-row'                  => [
+			'label'   => esc_html__( 'Two Row Bento Grid', 'sociallane-elements' ),
+			'partial' => 'two-row-grid.php',
+		],
+		'two-column-second-row'    => [
+			'label'   => esc_html__( 'Grid two column second row', 'sociallane-elements' ),
+			'partial' => 'two-column-second-row-grid.php',
+		],
+	];
+}
+
+/**
+ * Prepare view data for Bento Grid widget
+ *
+ * @param array  $settings  Raw Elementor settings
+ * @param string $widget_id Unique widget ID
+ * @return array Template-ready data
+ */
+function prepare_bento_grid_view( array $settings, string $widget_id ): array {
+	$layouts       = get_bento_grid_layouts();
+	$layout        = $settings['layout'] ?? 'default';
+	if ( ! isset( $layouts[ $layout ] ) ) {
+		$layout = array_key_first( $layouts );
+	}
+	$fields       = sociallane_extract_fields( $settings, [ 'eyebrow' => [], 'headline' => [] ] );
+	$headline_tag = sociallane_validate_heading_tag( $settings );
+
+	// Cell 1 (left)
+	$cell1 = [
+		'title'       => esc_html( $settings['cell1_title'] ?? '' ),
+		'description' => esc_html( $settings['cell1_description'] ?? '' ),
+		'visual'      => ( $settings['cell1_visual'] ?? 'none' ) === 'image' ? 'image' : 'none',
+		'image'       => null,
+	];
+	if ( $cell1['visual'] === 'image' ) {
+		$cell1['image'] = sociallane_prepare_image_data(
+			$settings['cell1_image'] ?? [],
+			[ 'alt' => $settings['cell1_image_alt'] ?? '', 'loading' => 'lazy' ]
+		);
+		$cell1['image'] = ! empty( $cell1['image']['src'] ) ? $cell1['image'] : null;
+	}
+	$cell1_preset = function_exists( 'sociallane_parse_button_preset' ) ? sociallane_parse_button_preset( $settings['cell1_button_style'] ?? 'primary' ) : [ 'variant' => 'primary', 'size' => 'md' ];
+	$cell1['button'] = ( $settings['cell1_show_button'] ?? 'no' ) === 'yes'
+		? sociallane_prepare_button_data(
+			$settings['cell1_button_text'] ?? '',
+			$settings['cell1_button_url'] ?? [],
+			[ 'variant' => $cell1_preset['variant'], 'size' => $cell1_preset['size'] ]
+		)
+		: null;
+
+	// Cell 2 (middle top)
+	$cell2 = [
+		'title'         => esc_html( $settings['cell2_title'] ?? '' ),
+		'description'   => esc_html( $settings['cell2_description'] ?? '' ),
+		'visual'        => ( $settings['cell2_visual'] ?? 'none' ) === 'metric' ? 'metric' : 'none',
+		'metric_value'  => esc_html( $settings['cell2_metric_value'] ?? '' ),
+		'metric_change' => esc_html( $settings['cell2_metric_change'] ?? '' ),
+	];
+	$cell2_preset = function_exists( 'sociallane_parse_button_preset' ) ? sociallane_parse_button_preset( $settings['cell2_button_style'] ?? 'primary' ) : [ 'variant' => 'primary', 'size' => 'md' ];
+	$cell2['button'] = ( $settings['cell2_show_button'] ?? 'no' ) === 'yes'
+		? sociallane_prepare_button_data(
+			$settings['cell2_button_text'] ?? '',
+			$settings['cell2_button_url'] ?? [],
+			[ 'variant' => $cell2_preset['variant'], 'size' => $cell2_preset['size'] ]
+		)
+		: null;
+
+	// Cell 3 (middle bottom)
+	$cell3 = [
+		'title'       => esc_html( $settings['cell3_title'] ?? '' ),
+		'description' => esc_html( $settings['cell3_description'] ?? '' ),
+		'visual'      => ( $settings['cell3_visual'] ?? 'none' ) === 'icons' ? 'icons' : 'none',
+		'icon_1'      => $settings['cell3_icon_1'] ?? null,
+		'icon_2'      => $settings['cell3_icon_2'] ?? null,
+		'icon_3'      => $settings['cell3_icon_3'] ?? null,
+	];
+	$cell3_preset = function_exists( 'sociallane_parse_button_preset' ) ? sociallane_parse_button_preset( $settings['cell3_button_style'] ?? 'primary' ) : [ 'variant' => 'primary', 'size' => 'md' ];
+	$cell3['button'] = ( $settings['cell3_show_button'] ?? 'no' ) === 'yes'
+		? sociallane_prepare_button_data(
+			$settings['cell3_button_text'] ?? '',
+			$settings['cell3_button_url'] ?? [],
+			[ 'variant' => $cell3_preset['variant'], 'size' => $cell3_preset['size'] ]
+		)
+		: null;
+
+	// Cell 4 (right)
+	$cell4 = [
+		'title'       => esc_html( $settings['cell4_title'] ?? '' ),
+		'description' => esc_html( $settings['cell4_description'] ?? '' ),
+		'visual'      => ( $settings['cell4_visual'] ?? 'none' ) === 'code' ? 'code' : 'none',
+		'code'        => $settings['cell4_code'] ?? '',
+	];
+	$cell4_preset = function_exists( 'sociallane_parse_button_preset' ) ? sociallane_parse_button_preset( $settings['cell4_button_style'] ?? 'primary' ) : [ 'variant' => 'primary', 'size' => 'md' ];
+	$cell4['button'] = ( $settings['cell4_show_button'] ?? 'no' ) === 'yes'
+		? sociallane_prepare_button_data(
+			$settings['cell4_button_text'] ?? '',
+			$settings['cell4_button_url'] ?? [],
+			[ 'variant' => $cell4_preset['variant'], 'size' => $cell4_preset['size'] ]
+		)
+		: null;
+
+	$animation = sociallane_animation_view_data( $settings, [ 'headline' => true, 'stagger' => true ] );
+
+	// Light/dark: section and cards
+	$classes = [
+		'section'     => 'bg-neutral-100 dark:bg-zinc-900',
+		'eyebrow'     => 'text-zinc-900 dark:text-neutral-200',
+		'headline'    => 'text-zinc-900 dark:text-neutral-200',
+		'card'        => 'bg-white dark:bg-zinc-900 rounded-2xl border border-neutral-200 dark:border-neutral-700 dark:shadow-none',
+		'card_title'  => 'text-zinc-900 dark:text-neutral-200 font-bold',
+		'card_desc'   => 'text-zinc-900 dark:text-neutral-200',
+		'metric_val'  => 'text-zinc-900 dark:text-neutral-200',
+		'metric_change' => 'text-primary dark:text-neutral-200',
+		'code_bg'     => 'bg-zinc-900 dark:bg-zinc-900 text-neutral-200',
+		'badge'       => 'bg-primary/20 dark:bg-primary-light/20 text-primary dark:text-primary-light text-xs font-medium px-2.5 py-1 rounded-full',
+	];
+
+	$view = array_merge( $fields, [
+		'layout'       => $layout,
+		'headline_tag' => $headline_tag,
+		'cell1'        => $cell1,
+		'cell2'        => $cell2,
+		'cell3'        => $cell3,
+		'cell4'        => $cell4,
+		'classes'      => $classes,
+		'widget_id'    => $widget_id,
+		'animation'    => $animation,
+	] );
+
+	if ( $layout === 'two-row' ) {
+		$view['two_row'] = prepare_bento_grid_two_row_data( $settings );
+	}
+	if ( $layout === 'two-column-second-row' ) {
+		$view['two_column_second_row'] = prepare_bento_grid_two_column_second_row_data( $settings );
+	}
+
+	return $view;
+}
+
+/**
+ * Prepare two-column-second-row layout data (row 1: 2 cols, row 2: 3 cols)
+ *
+ * @param array $settings Elementor settings
+ * @return array
+ */
+function prepare_bento_grid_two_column_second_row_data( array $settings ): array {
+	$tabs_str = $settings['tcsr_tabs'] ?? 'Overview, Activity, Settings, Collaborators, Notifications';
+	$tabs     = array_map( 'trim', explode( ',', $tabs_str ) );
+
+	$activities_raw = $settings['tcsr_activities'] ?? [];
+	$activities     = [];
+	foreach ( $activities_raw as $item ) {
+		$activities[] = [
+			'name'   => esc_html( $item['name'] ?? '' ),
+			'time'   => esc_html( $item['time'] ?? '' ),
+			'action' => esc_html( $item['action'] ?? '' ),
+			'badge'  => esc_html( $item['badge'] ?? '' ),
+			'avatar' => $item['avatar'] ?? null,
+		];
+	}
+
+	$center_items_raw = $settings['tcsr_row2_center_items'] ?? [];
+	$center_items     = [];
+	foreach ( $center_items_raw as $item ) {
+		$center_items[] = [
+			'icon'  => $item['icon'] ?? null,
+			'label' => esc_html( $item['label'] ?? '' ),
+		];
+	}
+
+	$view_all_url = $settings['tcsr_view_all_url'] ?? [];
+	$view_all_attrs = '';
+	if ( ! empty( $view_all_url['url'] ) ) {
+		$view_all_attrs = 'href="' . esc_url( $view_all_url['url'] ) . '"';
+		if ( ! empty( $view_all_url['is_external'] ) ) {
+			$view_all_attrs .= ' target="_blank" rel="noopener noreferrer"';
+		}
+	}
+
+	return [
+		'row1_left'  => [
+			'search_placeholder' => esc_html( $settings['tcsr_search_placeholder'] ?? '' ),
+			'tabs'                => $tabs,
+			'project'             => esc_html( $settings['tcsr_project'] ?? '' ),
+			'project_meta'        => esc_html( $settings['tcsr_project_meta'] ?? '' ),
+			'stat1_label'         => esc_html( $settings['tcsr_stat1_label'] ?? '' ),
+			'stat1_value'         => esc_html( $settings['tcsr_stat1_value'] ?? '' ),
+			'stat2_label'         => esc_html( $settings['tcsr_stat2_label'] ?? '' ),
+			'stat2_value'         => esc_html( $settings['tcsr_stat2_value'] ?? '' ),
+			'stat2_suffix'        => esc_html( $settings['tcsr_stat2_suffix'] ?? '' ),
+			'perf_title'          => esc_html( $settings['tcsr_perf_title'] ?? '' ),
+			'perf_desc'           => esc_html( $settings['tcsr_perf_desc'] ?? '' ),
+		],
+		'row1_right' => [
+			'activity_title' => esc_html( $settings['tcsr_activity_title'] ?? '' ),
+			'sort_by'        => esc_html( $settings['tcsr_sort_by'] ?? '' ),
+			'view_all'       => esc_html( $settings['tcsr_view_all'] ?? '' ),
+			'view_all_attrs' => $view_all_attrs,
+			'activities'     => $activities,
+			'releases_eyebrow' => esc_html( $settings['tcsr_releases_eyebrow'] ?? '' ),
+			'releases_title'   => esc_html( $settings['tcsr_releases_title'] ?? '' ),
+			'releases_desc'    => esc_html( $settings['tcsr_releases_desc'] ?? '' ),
+		],
+		'row2_left'   => [
+			'eyebrow' => esc_html( $settings['tcsr_row2_left_eyebrow'] ?? '' ),
+			'title'   => esc_html( $settings['tcsr_row2_left_title'] ?? '' ),
+			'desc'    => esc_html( $settings['tcsr_row2_left_desc'] ?? '' ),
+			'image'   => $settings['tcsr_row2_left_image'] ?? null,
+			'image_alt' => esc_attr( $settings['tcsr_row2_left_image_alt'] ?? '' ),
+		],
+		'row2_center' => [
+			'eyebrow' => esc_html( $settings['tcsr_row2_center_eyebrow'] ?? '' ),
+			'title'   => esc_html( $settings['tcsr_row2_center_title'] ?? '' ),
+			'desc'    => esc_html( $settings['tcsr_row2_center_desc'] ?? '' ),
+			'items'   => $center_items,
+		],
+		'row2_right'  => [
+			'eyebrow'   => esc_html( $settings['tcsr_row2_right_eyebrow'] ?? '' ),
+			'title'     => esc_html( $settings['tcsr_row2_right_title'] ?? '' ),
+			'desc'      => esc_html( $settings['tcsr_row2_right_desc'] ?? '' ),
+			'image'     => sociallane_prepare_image_data(
+				$settings['tcsr_row2_right_image'] ?? [],
+				[ 'alt' => $settings['tcsr_row2_right_image_alt'] ?? '', 'loading' => 'lazy' ]
+			),
+		],
+	];
+}
+
+/**
+ * Prepare two-row bento grid data (Deploys, Integrations, Overview, Releases, Security)
+ *
+ * @param array $settings Elementor settings
+ * @return array
+ */
+function prepare_bento_grid_two_row_data( array $settings ): array {
+	$deploys_raw = $settings['two_row_deploys'] ?? [];
+	$deploys     = [];
+	foreach ( $deploys_raw as $item ) {
+		$url_data = $item['url'] ?? [];
+		$href     = esc_url( $url_data['url'] ?? '#' );
+		$attrs    = [];
+		if ( ! empty( $url_data['is_external'] ) ) {
+			$attrs[] = 'target="_blank" rel="noopener noreferrer"';
+		}
+		$deploys[] = [
+			'status' => ( $item['status'] ?? 'success' ) === 'pending' ? 'pending' : 'success',
+			'label'  => esc_html( $item['label'] ?? '' ),
+			'badge'  => esc_html( $item['badge'] ?? '' ),
+			'meta'   => esc_html( $item['meta'] ?? '' ),
+			'href'   => $href,
+			'attrs'  => implode( ' ', $attrs ),
+		];
+	}
+
+	$integrations_raw = $settings['two_row_integrations'] ?? [];
+	$integrations     = [];
+	foreach ( $integrations_raw as $item ) {
+		$integrations[] = [
+			'icon'  => $item['icon'] ?? null,
+			'label' => esc_html( $item['label'] ?? '' ),
+		];
+	}
+
+	$tabs_str = $settings['two_row_overview_tabs'] ?? 'Overview, Activity, Settings, Collaborators, Notifications';
+	$tabs     = array_map( 'trim', explode( ',', $tabs_str ) );
+
+	return [
+		'deploys'     => [
+			'header' => esc_html( $settings['two_row_deploys_header'] ?? '' ),
+			'items'  => $deploys,
+		],
+		'integrations' => [
+			'eyebrow' => esc_html( $settings['two_row_integrations_eyebrow'] ?? '' ),
+			'title'   => esc_html( $settings['two_row_integrations_title'] ?? '' ),
+			'items'   => $integrations,
+		],
+		'overview'    => [
+			'tabs'            => $tabs,
+			'project'        => esc_html( $settings['two_row_overview_project'] ?? '' ),
+			'project_meta'   => esc_html( $settings['two_row_overview_project_meta'] ?? '' ),
+			'stat1_label'    => esc_html( $settings['two_row_overview_stat1_label'] ?? '' ),
+			'stat1_value'    => esc_html( $settings['two_row_overview_stat1_value'] ?? '' ),
+			'stat2_label'    => esc_html( $settings['two_row_overview_stat2_label'] ?? '' ),
+			'stat2_value'    => esc_html( $settings['two_row_overview_stat2_value'] ?? '' ),
+			'stat2_suffix'   => esc_html( $settings['two_row_overview_stat2_suffix'] ?? '' ),
+			'stat3_label'    => esc_html( $settings['two_row_overview_stat3_label'] ?? '' ),
+			'stat3_value'    => esc_html( $settings['two_row_overview_stat3_value'] ?? '' ),
+			'perf_title'     => esc_html( $settings['two_row_overview_perf_title'] ?? '' ),
+			'perf_desc'      => esc_html( $settings['two_row_overview_perf_desc'] ?? '' ),
+		],
+		'releases'    => [
+			'eyebrow' => esc_html( $settings['two_row_releases_eyebrow'] ?? '' ),
+			'title'   => esc_html( $settings['two_row_releases_title'] ?? '' ),
+			'desc'    => esc_html( $settings['two_row_releases_desc'] ?? '' ),
+		],
+		'security'    => [
+			'eyebrow'  => esc_html( $settings['two_row_security_eyebrow'] ?? '' ),
+			'title'    => esc_html( $settings['two_row_security_title'] ?? '' ),
+			'desc'     => esc_html( $settings['two_row_security_desc'] ?? '' ),
+			'avatar1'  => $settings['two_row_security_avatar1'] ?? null,
+			'avatar2'  => $settings['two_row_security_avatar2'] ?? null,
+		],
+	];
+}

package/packages/widgets/bento-grid/package.json

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

package/packages/widgets/bento-grid/templates/partials/cell1.php

@@ -0,0 +1,45 @@
+<?php
+/**
+ * Bento Grid – Cell 1 (left, full height)
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+$cell   = $view['cell1'] ?? [];
+$cls    = $view['classes'] ?? [];
+$title  = $cell['title'] ?? '';
+$desc   = $cell['description'] ?? '';
+$visual = $cell['visual'] ?? 'none';
+$image  = $cell['image'] ?? null;
+$button = $cell['button'] ?? null;
+$elements_path = dirname( __DIR__, 4 ) . '/elements';
+?>
+
+<article class="<?php echo esc_attr( $cls['card'] ); ?> p-5 md:p-6 h-full flex flex-col">
+	<?php if ( $title !== '' ) : ?>
+		<h3 class="<?php echo esc_attr( $cls['card_title'] ); ?> text-lg md:text-xl mb-2"><?php echo $title; ?></h3>
+	<?php endif; ?>
+	<?php if ( $desc !== '' ) : ?>
+		<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-sm md:text-base leading-relaxed mb-4"><?php echo $desc; ?></p>
+	<?php endif; ?>
+	<?php if ( $visual === 'image' ) : ?>
+		<?php if ( $image && ! empty( $image['src'] ) ) : ?>
+			<div class="mt-auto rounded-xl overflow-hidden bg-neutral-200 dark:bg-neutral-700 min-h-[200px] flex items-center justify-center">
+				<?php $image['class'] = 'w-full h-auto object-cover'; include $elements_path . '/image/templates/render.php'; ?>
+			</div>
+		<?php else : ?>
+			<div class="mt-auto rounded-xl overflow-hidden bg-neutral-200 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 min-h-[220px] flex items-center justify-center" aria-hidden="true">
+				<span class="text-neutral-500 dark:text-neutral-500 text-sm"><?php esc_html_e( 'Image placeholder', 'sociallane-elements' ); ?></span>
+			</div>
+		<?php endif; ?>
+	<?php endif; ?>
+	<?php if ( $button ) : ?>
+		<div class="mt-auto pt-4">
+			<?php include $elements_path . '/button/templates/render.php'; ?>
+		</div>
+	<?php endif; ?>
+</article>

package/packages/widgets/bento-grid/templates/partials/cell2.php

@@ -0,0 +1,52 @@
+<?php
+/**
+ * Bento Grid – Cell 2 (middle top): metric + bar chart
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+$cell   = $view['cell2'] ?? [];
+$cls    = $view['classes'] ?? [];
+$title  = $cell['title'] ?? '';
+$desc   = $cell['description'] ?? '';
+$visual = $cell['visual'] ?? 'none';
+$metric_value  = $cell['metric_value'] ?? '';
+$metric_change = $cell['metric_change'] ?? '';
+$button = $cell['button'] ?? null;
+$elements_path = dirname( __DIR__, 4 ) . '/elements';
+?>
+
+<article class="<?php echo esc_attr( $cls['card'] ); ?> p-5 md:p-6 h-full flex flex-col">
+	<?php if ( $title !== '' ) : ?>
+		<h3 class="<?php echo esc_attr( $cls['card_title'] ); ?> text-lg md:text-xl mb-2"><?php echo $title; ?></h3>
+	<?php endif; ?>
+	<?php if ( $desc !== '' ) : ?>
+		<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-sm md:text-base leading-relaxed mb-4"><?php echo $desc; ?></p>
+	<?php endif; ?>
+	<?php if ( $visual === 'metric' ) : ?>
+		<div class="mt-auto space-y-3">
+			<div class="flex items-baseline gap-2">
+				<?php if ( $metric_value !== '' ) : ?>
+					<span class="<?php echo esc_attr( $cls['metric_val'] ); ?> text-2xl md:text-3xl font-bold"><?php echo $metric_value; ?></span>
+				<?php endif; ?>
+				<?php if ( $metric_change !== '' ) : ?>
+					<span class="<?php echo esc_attr( $cls['metric_change'] ); ?> text-sm font-medium"><?php echo $metric_change; ?></span>
+				<?php endif; ?>
+			</div>
+			<div class="sl-bento-bars flex items-end gap-0.5 h-8" aria-hidden="true">
+				<?php for ( $i = 0; $i < 16; $i++ ) : ?>
+					<span class="sl-bento-bar flex-1 min-w-[4px] rounded-t bg-primary/80 dark:bg-primary-light/60" style="height: <?php echo esc_attr( 20 + ( $i * 3 ) % 80 ); ?>%"></span>
+				<?php endfor; ?>
+			</div>
+		</div>
+	<?php endif; ?>
+	<?php if ( $button ) : ?>
+		<div class="mt-auto pt-4">
+			<?php include $elements_path . '/button/templates/render.php'; ?>
+		</div>
+	<?php endif; ?>
+</article>

package/packages/widgets/bento-grid/templates/partials/cell3.php

@@ -0,0 +1,45 @@
+<?php
+/**
+ * Bento Grid – Cell 3 (middle bottom): icons
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+$cell   = $view['cell3'] ?? [];
+$cls    = $view['classes'] ?? [];
+$title  = $cell['title'] ?? '';
+$desc   = $cell['description'] ?? '';
+$visual = $cell['visual'] ?? 'none';
+$icons  = [ $cell['icon_1'] ?? null, $cell['icon_2'] ?? null, $cell['icon_3'] ?? null ];
+$button = $cell['button'] ?? null;
+$elements_path = dirname( __DIR__, 4 ) . '/elements';
+?>
+
+<article class="<?php echo esc_attr( $cls['card'] ); ?> p-5 md:p-6 h-full flex flex-col">
+	<?php if ( $title !== '' ) : ?>
+		<h3 class="<?php echo esc_attr( $cls['card_title'] ); ?> text-lg md:text-xl mb-2"><?php echo $title; ?></h3>
+	<?php endif; ?>
+	<?php if ( $desc !== '' ) : ?>
+		<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-sm md:text-base leading-relaxed mb-4"><?php echo $desc; ?></p>
+	<?php endif; ?>
+	<?php if ( $visual === 'icons' ) : ?>
+		<div class="mt-auto flex items-center justify-center gap-6 py-4" aria-hidden="true">
+			<?php foreach ( $icons as $index => $icon ) : ?>
+				<?php if ( ! empty( $icon['value'] ) ) : ?>
+					<span class="sl-bento-icon-wrapper inline-flex items-center justify-center w-12 h-12 rounded-xl <?php echo $index === 1 ? 'bg-primary/20 dark:bg-primary-light/20 text-primary dark:text-primary-light ring-2 ring-primary/30 dark:ring-primary-light/30' : 'text-neutral-600 dark:text-neutral-400'; ?> [&_.e-icon]:w-7 [&_.e-icon]:h-7">
+						<?php \Elementor\Icons_Manager::render_icon( $icon, [ 'aria-hidden' => 'true' ] ); ?>
+					</span>
+				<?php endif; ?>
+			<?php endforeach; ?>
+		</div>
+	<?php endif; ?>
+	<?php if ( $button ) : ?>
+		<div class="mt-auto pt-4">
+			<?php include $elements_path . '/button/templates/render.php'; ?>
+		</div>
+	<?php endif; ?>
+</article>

package/packages/widgets/bento-grid/templates/partials/cell4.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Bento Grid – Cell 4 (right, full height): code snippet
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+$cell   = $view['cell4'] ?? [];
+$cls    = $view['classes'] ?? [];
+$title  = $cell['title'] ?? '';
+$desc   = $cell['description'] ?? '';
+$visual = $cell['visual'] ?? 'none';
+$code   = $cell['code'] ?? '';
+$button = $cell['button'] ?? null;
+$elements_path = dirname( __DIR__, 4 ) . '/elements';
+?>
+
+<article class="<?php echo esc_attr( $cls['card'] ); ?> p-5 md:p-6 h-full flex flex-col">
+	<?php if ( $title !== '' ) : ?>
+		<h3 class="<?php echo esc_attr( $cls['card_title'] ); ?> text-lg md:text-xl mb-2"><?php echo $title; ?></h3>
+	<?php endif; ?>
+	<?php if ( $desc !== '' ) : ?>
+		<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-sm md:text-base leading-relaxed mb-4"><?php echo $desc; ?></p>
+	<?php endif; ?>
+	<?php if ( $visual === 'code' && $code !== '' ) : ?>
+		<div class="mt-auto sl-bento-code-block <?php echo esc_attr( $cls['code_bg'] ); ?> rounded-xl overflow-hidden border border-neutral-700 dark:border-neutral-600">
+			<div class="flex gap-1 px-3 py-2 border-b border-neutral-700 dark:border-neutral-600">
+				<span class="w-2 h-2 rounded-full bg-neutral-600"></span>
+				<span class="w-2 h-2 rounded-full bg-neutral-600"></span>
+				<span class="w-2 h-2 rounded-full bg-neutral-600"></span>
+			</div>
+			<pre class="p-4 text-xs md:text-sm overflow-x-auto overflow-y-hidden m-0 font-mono leading-relaxed"><code><?php echo esc_html( $code ); ?></code></pre>
+		</div>
+	<?php endif; ?>
+	<?php if ( $button ) : ?>
+		<div class="mt-auto pt-4">
+			<?php include $elements_path . '/button/templates/render.php'; ?>
+		</div>
+	<?php endif; ?>
+</article>

package/packages/widgets/bento-grid/templates/partials/default-grid.php

@@ -0,0 +1,31 @@
+<?php
+/**
+ * Bento Grid – Default layout: 4 cells
+ * Left full height, middle top, middle bottom, right full height.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+?>
+
+<div class="sl-bento-grid grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 md:gap-5 max-w-6xl mx-auto"<?php echo ! empty( $stagger_attrs ) ? ' ' . $stagger_attrs : ''; ?>>
+	<?php /* Cell 1: left, full height */ ?>
+	<div class="sl-bento-cell sl-bento-cell--left md:col-start-1 md:row-start-1 md:row-span-2">
+		<?php include __DIR__ . '/cell1.php'; ?>
+	</div>
+	<?php /* Cell 2: middle top */ ?>
+	<div class="sl-bento-cell sl-bento-cell--middle-top md:col-start-2 md:row-start-1">
+		<?php include __DIR__ . '/cell2.php'; ?>
+	</div>
+	<?php /* Cell 3: middle bottom */ ?>
+	<div class="sl-bento-cell sl-bento-cell--middle-bottom md:col-start-2 md:row-start-2">
+		<?php include __DIR__ . '/cell3.php'; ?>
+	</div>
+	<?php /* Cell 4: right, full height */ ?>
+	<div class="sl-bento-cell sl-bento-cell--right md:col-start-3 md:row-start-1 md:row-span-2">
+		<?php include __DIR__ . '/cell4.php'; ?>
+	</div>
+</div>

package/packages/widgets/bento-grid/templates/partials/tcsr-row1-left.php

@@ -0,0 +1,68 @@
+<?php
+/**
+ * Grid two column second row – Row 1 left (overview/dashboard card)
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+$data = $view['two_column_second_row']['row1_left'] ?? [];
+$cls  = $view['classes'] ?? [];
+$tabs = $data['tabs'] ?? [];
+?>
+
+<article class="<?php echo esc_attr( $cls['card'] ); ?> p-0 overflow-hidden h-full flex flex-col">
+	<?php if ( ( $data['search_placeholder'] ?? '' ) !== '' ) : ?>
+		<div class="p-4 md:p-5 border-b border-neutral-200 dark:border-neutral-600/50">
+			<div class="rounded-lg bg-neutral-100 dark:bg-neutral-800 px-3 py-2 text-sm <?php echo esc_attr( $cls['card_desc'] ); ?>">
+				<?php echo $data['search_placeholder']; ?>
+			</div>
+		</div>
+	<?php endif; ?>
+	<?php if ( ! empty( $tabs ) ) : ?>
+		<div class="flex border-b border-neutral-200 dark:border-neutral-600/50 overflow-x-auto">
+			<?php foreach ( $tabs as $i => $tab ) : ?>
+				<button type="button" class="px-4 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-colors <?php echo $i === 0 ? 'border-primary dark:border-primary-light text-primary dark:text-primary-light' : 'border-transparent ' . esc_attr( $cls['card_desc'] ); ?>">
+					<?php echo esc_html( $tab ); ?>
+				</button>
+			<?php endforeach; ?>
+		</div>
+	<?php endif; ?>
+	<div class="p-5 md:p-6 flex-1 flex flex-col">
+		<?php if ( ( $data['project'] ?? '' ) !== '' ) : ?>
+			<div class="flex items-center gap-2 mb-4">
+				<span class="w-2 h-2 rounded-full bg-green-500 shrink-0" aria-hidden="true"></span>
+				<span class="<?php echo esc_attr( $cls['card_title'] ); ?> text-sm font-semibold"><?php echo $data['project']; ?></span>
+			</div>
+			<?php if ( ( $data['project_meta'] ?? '' ) !== '' ) : ?>
+				<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-xs mb-6"><?php echo $data['project_meta']; ?></p>
+			<?php endif; ?>
+		<?php endif; ?>
+
+		<div class="grid grid-cols-2 gap-4 mb-6">
+			<?php if ( ( $data['stat1_label'] ?? '' ) !== '' ) : ?>
+				<div>
+					<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-xs mb-0.5"><?php echo $data['stat1_label']; ?></p>
+					<p class="<?php echo esc_attr( $cls['card_title'] ); ?> text-2xl font-bold"><?php echo $data['stat1_value']; ?></p>
+				</div>
+			<?php endif; ?>
+			<?php if ( ( $data['stat2_label'] ?? '' ) !== '' ) : ?>
+				<div>
+					<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-xs mb-0.5"><?php echo $data['stat2_label']; ?></p>
+					<p class="<?php echo esc_attr( $cls['card_title'] ); ?> text-2xl font-bold"><?php echo $data['stat2_value']; ?> <span class="text-sm font-normal <?php echo esc_attr( $cls['card_desc'] ); ?>"><?php echo $data['stat2_suffix'] ?? ''; ?></span></p>
+				</div>
+			<?php endif; ?>
+		</div>
+
+		<?php if ( ( $data['perf_title'] ?? '' ) !== '' || ( $data['perf_desc'] ?? '' ) !== '' ) : ?>
+			<div class="mt-auto">
+				<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-xs mb-1"><?php echo esc_html__( 'Performance', 'sociallane-elements' ); ?></p>
+				<h4 class="<?php echo esc_attr( $cls['card_title'] ); ?> text-base font-bold mb-2"><?php echo $data['perf_title']; ?></h4>
+				<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-sm"><?php echo $data['perf_desc']; ?></p>
+			</div>
+		<?php endif; ?>
+	</div>
+</article>