📁 Captain File Manager

✏️ Editing: widget-builder-visual.js

/**
 * Widget Builder Visual UI
 * Chapter 1: Panel shell, tab switching, Monaco initialization
 */
(function ($) {
	'use strict';

/* ------------------------------------------------------------------
	 * Global references
	 * ----------------------------------------------------------------*/
	var editors = {};          // Monaco editor instances { html, css, js }
	var monacoReady = false;

/* ------------------------------------------------------------------
	 * Tab switching — Center panel (Content / Style / Advanced)
	 * ----------------------------------------------------------------*/
	function initCenterTabs() {
		$('.wpr-wb-center-tab').on('click', function () {
			var tab = $(this).data('tab');

// Tabs
			$('.wpr-wb-center-tab').removeClass('active');
			$(this).addClass('active');

// Panels
			$('.wpr-wb-center-panel').removeClass('active');
			$('.wpr-wb-center-panel[data-tab="' + tab + '"]').addClass('active');
		});
	}

/* ------------------------------------------------------------------
	 * Tab switching — Right panel (HTML / CSS / JS / Includes)
	 * ----------------------------------------------------------------*/
	function initCodeTabs() {
		$('.wpr-wb-code-tab').on('click', function () {
			var editor = $(this).data('editor');

// Tabs
			$('.wpr-wb-code-tab').removeClass('active');
			$(this).addClass('active');

// Panels
			$('.wpr-wb-code-panel').removeClass('active');
			$('.wpr-wb-code-panel[data-editor="' + editor + '"]').addClass('active');

// Re-layout the Monaco editor so it fills the container
			if (editors[editor]) {
				editors[editor].layout();
			}
		});

// Template Tags Info popup
		$('#wpr-wb-template-info-btn').on('click', function () {
			$('#wpr-wb-template-info-popup').toggleClass('open');
		});
		$('.wpr-wb-template-info-close').on('click', function () {
			$('#wpr-wb-template-info-popup').removeClass('open');
		});
		$(document).on('click', function (e) {
			var $popup = $('#wpr-wb-template-info-popup');
			if ($popup.hasClass('open') && !$(e.target).closest('#wpr-wb-template-info-popup, #wpr-wb-template-info-btn').length) {
				$popup.removeClass('open');
			}
		});
	}

/* ------------------------------------------------------------------
	 * Footer buttons — Settings / Preview / Save
	 * ----------------------------------------------------------------*/
	function initPanelCollapse() {
		var $panel = $('.wpr-wb-panel-left');
		var $btn = $('#wpr-wb-collapse-left');

// Restore saved state
		if (localStorage.getItem('wpr_wb_panel_collapsed') === '1') {
			$panel.addClass('collapsed');
			$btn.find('i').removeClass('eicon-chevron-left').addClass('eicon-chevron-right');
		}

$btn.on('click', function () {
			$panel.toggleClass('collapsed');
			$(this).find('i').toggleClass('eicon-chevron-left eicon-chevron-right');
			localStorage.setItem('wpr_wb_panel_collapsed', $panel.hasClass('collapsed') ? '1' : '0');
		});
	}

function initFooterButtons() {
		// SETTINGS button — just marks active state
		$('#wpr-wb-btn-settings').on('click', function () {
			$('.wpr-wb-footer-btn').not('.wpr-wb-footer-btn-save').removeClass('active');
			$(this).addClass('active');
		});

// PREVIEW button — open Elementor preview in new tab
		$('#wpr-wb-btn-preview').on('click', function () {
			$('.wpr-wb-footer-btn').not('.wpr-wb-footer-btn-save').removeClass('active');
			$(this).addClass('active');

var url = wprWidgetBuilder.previewUrl;
			if (url) {
				window.open(url, '_blank');
			} else {
				showToast('Save the widget first to preview.', 'error');
			}
		});

// SAVE button
		$('#wpr-wb-btn-save, #wpr-wb-collapsed-save').on('click', function () {
			saveWidget();
		});
	}

/* ------------------------------------------------------------------
	 * Monaco Editor — load via AMD & initialise
	 * ----------------------------------------------------------------*/
	function initMonaco() {
		var basePath = 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min';

// Inject the AMD loader if not present
		if (typeof window.require === 'undefined' || typeof window.require.config === 'undefined') {
			var script = document.createElement('script');
			script.src = basePath + '/vs/loader.js';
			script.onload = function () {
				configureAndCreateEditors(basePath);
			};
			document.head.appendChild(script);
		} else {
			configureAndCreateEditors(basePath);
		}
	}

function configureAndCreateEditors(basePath) {
		window.require.config({ paths: { vs: basePath + '/vs' } });

window.require(['vs/editor/editor.main'], function () {
			monacoReady = true;

// Use decorations to highlight {{...}} template tags in white
			function applyTemplateTagDecorations(editor) {
				var model = editor.getModel();
				if (!model) return;

var decorations = [];
				var text = model.getValue();
				var regex = /\{\{[^}]*\}\}/g;
				var match;

while ((match = regex.exec(text)) !== null) {
					var startPos = model.getPositionAt(match.index);
					var endPos = model.getPositionAt(match.index + match[0].length);
					decorations.push({
						range: new monaco.Range(startPos.lineNumber, startPos.column, endPos.lineNumber, endPos.column),
						options: { inlineClassName: 'wpr-template-tag' }
					});
				}

editor._templateTagDecorations = editor.deltaDecorations(
					editor._templateTagDecorations || [],
					decorations
				);
			}

editors.html = monaco.editor.create(document.getElementById('wpr-wb-editor-html'), {
				value: '',
				language: 'html',
				theme: 'vs-dark',
				lineNumbers: 'on',
				minimap: { enabled: false },
				wordWrap: 'on',
				fontSize: 14,
				automaticLayout: true,
				scrollBeyondLastLine: false,
				tabSize: 4,
			});

editors.css = monaco.editor.create(document.getElementById('wpr-wb-editor-css'), {
				value: '',
				language: 'css',
				theme: 'vs-dark',
				lineNumbers: 'on',
				minimap: { enabled: false },
				wordWrap: 'on',
				fontSize: 14,
				automaticLayout: true,
				scrollBeyondLastLine: false,
				tabSize: 4,
			});

editors.js = monaco.editor.create(document.getElementById('wpr-wb-editor-js'), {
				value: '',
				language: 'javascript',
				theme: 'vs-dark',
				lineNumbers: 'on',
				minimap: { enabled: false },
				wordWrap: 'on',
				fontSize: 14,
				automaticLayout: true,
				scrollBeyondLastLine: false,
				tabSize: 4,
			});

// Apply template tag decorations to all editors
			['html', 'css', 'js'].forEach(function (key) {
				if (editors[key]) {
					applyTemplateTagDecorations(editors[key]);
					editors[key].onDidChangeModelContent(function () {
						applyTemplateTagDecorations(editors[key]);
					});
				}
			});

// Load saved data into editors
			loadWidget();
		});
	}

/* ------------------------------------------------------------------
	 * Toast notification
	 * ----------------------------------------------------------------*/
	function showToast(message, type) {
		var $toast = $('#wpr-wb-toast');
		$toast.text(message)
			.removeClass('success error visible')
			.addClass(type || '')
			.addClass('visible');

clearTimeout($toast.data('timer'));
		$toast.data('timer', setTimeout(function () {
			$toast.removeClass('visible');
		}, 3000));
	}

/* ------------------------------------------------------------------
	 * Save Widget via REST API
	 * ----------------------------------------------------------------*/
	function saveWidget() {
		if (!wprWidgetBuilder.postId) {
			// Create new widget first
			createWidget();
			return;
		}

var data = collectData();

$('#wpr-wb-btn-save').prop('disabled', true).text('SAVING...');

$.ajax({
			url: wprWidgetBuilder.apiBase + 'save/' + wprWidgetBuilder.postId,
			method: 'POST',
			contentType: 'application/json',
			headers: { 'X-WP-Nonce': wprWidgetBuilder.nonce },
			data: JSON.stringify(data),
			success: function (res) {
				showToast('Widget saved successfully!', 'success');
				$('#wpr-wb-btn-save').prop('disabled', false).text('SAVE');
			},
			error: function (xhr) {
				var msg = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Save failed.';
				showToast(msg, 'error');
				$('#wpr-wb-btn-save').prop('disabled', false).text('SAVE');
			}
		});
	}

/* ------------------------------------------------------------------
	 * Create new widget (when postId is 0)
	 * ----------------------------------------------------------------*/
	function createWidget() {
		var data = collectData();

$('#wpr-wb-btn-save').prop('disabled', true).text('SAVING...');

$.ajax({
			url: wprWidgetBuilder.apiBase + 'save',
			method: 'POST',
			contentType: 'application/json',
			headers: { 'X-WP-Nonce': wprWidgetBuilder.nonce },
			data: JSON.stringify(data),
			success: function (res) {
				if (res.post_id) {
					wprWidgetBuilder.postId = res.post_id;
					// Update URL without reload
					var newUrl = window.location.pathname.replace('post-new.php', 'post.php') + '?post=' + res.post_id + '&action=edit';
					window.history.replaceState(null, '', newUrl);
				}
				showToast('Widget created successfully!', 'success');
				$('#wpr-wb-btn-save').prop('disabled', false).text('SAVE');
			},
			error: function (xhr) {
				var msg = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Create failed.';
				showToast(msg, 'error');
				$('#wpr-wb-btn-save').prop('disabled', false).text('SAVE');
			}
		});
	}

/* ------------------------------------------------------------------
	 * Collect all data from UI
	 * ----------------------------------------------------------------*/
	var htmlReferenceComment = [
		'',
	].join('\n');

var htmlReferenceMarker = '<!-- ═══════════════════════════════════════════════════════';

function getHtmlWithReference(markup) {
		if (!markup) markup = '';
		if (markup.indexOf(htmlReferenceMarker) !== -1) return markup;
		return markup + '\n\n\n\n\n' + htmlReferenceComment;
	}

function stripHtmlReference(markup) {
		if (!markup) return '';
		var idx = markup.indexOf(htmlReferenceMarker);
		if (idx === -1) return markup;
		return markup.substring(0, idx).replace(/\s+$/, '');
	}

function collectData() {
		return {
			title: $('#wpr-wb-title').val() || 'New Widget',
			icon: $('#wpr-wb-icon').val() || 'eicon-cog',
			category: $('#wpr-wb-category').val() || 'wpr-widgets',
			tabs: {
				content: collectTabSections('content'),
				style: collectTabSections('style'),
				advanced: collectTabSections('advanced')
			},
			markup: editors.html ? stripHtmlReference(editors.html.getValue()) : '',
			css: editors.css ? editors.css.getValue() : '',
			js: editors.js ? editors.js.getValue() : '',
			css_includes: $('#wpr-wb-css-includes').val() ? $('#wpr-wb-css-includes').val().split('\n').filter(Boolean) : [],
			js_includes: $('#wpr-wb-js-includes').val() ? $('#wpr-wb-js-includes').val().split('\n').filter(Boolean) : [],
		};
	}

/* ------------------------------------------------------------------
	 * Load Widget data via REST API
	 * ----------------------------------------------------------------*/
	function loadWidget() {
		if (!wprWidgetBuilder.postId) {
			// New widget — show reference comment
			if (editors.html) {
				editors.html.setValue(getHtmlWithReference(''));
			}
			return;
		}

$('#wpr-wb-app').addClass('loading');

$.ajax({
			url: wprWidgetBuilder.apiBase + 'load/' + wprWidgetBuilder.postId,
			method: 'GET',
			headers: { 'X-WP-Nonce': wprWidgetBuilder.nonce },
			success: function (res) {
				populateUI(res.data || res);
				$('#wpr-wb-app').removeClass('loading');
	
			},
			error: function () {
				showToast('Failed to load widget data.', 'error');
				$('#wpr-wb-app').removeClass('loading');
			}
		});
	}

/* ------------------------------------------------------------------
	 * Populate UI from loaded data
	 * ----------------------------------------------------------------*/
	function populateUI(data) {
		if (!data) return;

// Left panel
		if (data.title) {
			$('#wpr-wb-title').val(data.title);
			$('#wpr-wb-header-title').text(data.title);
		}

if (data.icon) {
			$('#wpr-wb-icon').val(data.icon);
			$('#wpr-wb-icon-preview-i').attr('class', data.icon);
		}

// Category: API stores as categories array, UI uses single value
		var cat = data.category || (data.categories && data.categories[0]) || '';
		if (cat) {
			$('#wpr-wb-category').val(cat);
		}

// Center panel — sections
		if (data.tabs) {
			populateSections('content', data.tabs.content);
			populateSections('style', data.tabs.style);
			populateSections('advanced', data.tabs.advanced);
		}

// Right panel — Monaco editors
		if (editors.html) {
			editors.html.setValue(getHtmlWithReference(data.markup || ''));
		}
		if (editors.css && data.css) {
			editors.css.setValue(data.css);
		}
		if (editors.js && data.js) {
			editors.js.setValue(data.js);
		}

// Includes
		if (data.css_includes && Array.isArray(data.css_includes)) {
			$('#wpr-wb-css-includes').val(data.css_includes.join('\n'));
		}
		if (data.js_includes && Array.isArray(data.js_includes)) {
			$('#wpr-wb-js-includes').val(data.js_includes.join('\n'));
		}
	}

/* ------------------------------------------------------------------
	 * Update header title in real time
	 * ----------------------------------------------------------------*/
	function initTitleSync() {
		$('#wpr-wb-title').on('input', function () {
			var val = $(this).val() || 'New Widget';
			$('#wpr-wb-header-title').text(val);
		});
	}

/* ------------------------------------------------------------------
	 * Keyboard shortcuts
	 * ----------------------------------------------------------------*/
	function initKeyboardShortcuts() {
		$(document).on('keydown', function (e) {
			// Ctrl+S / Cmd+S — Save
			if ((e.ctrlKey || e.metaKey) && e.key === 's') {
				e.preventDefault();
				saveWidget();
			}
		});
	}

/* ------------------------------------------------------------------
	 * Unsaved changes warning
	 * ----------------------------------------------------------------*/
	function initBeforeUnload() {
		var dirty = false;

// Mark dirty on any input change
		$('#wpr-wb-app').on('input change', 'input, select, textarea', function () {
			dirty = true;
		});

// Mark dirty when Monaco content changes
		var checkMonacoDirty = setInterval(function () {
			if (monacoReady) {
				clearInterval(checkMonacoDirty);
				['html', 'css', 'js'].forEach(function (key) {
					if (editors[key]) {
						editors[key].onDidChangeModelContent(function () {
							dirty = true;
						});
					}
				});
			}
		}, 500);

// Clear dirty after save
		$(document).ajaxSuccess(function (e, xhr, settings) {
			if (settings.url && settings.url.indexOf('widget-builder/save') !== -1) {
				dirty = false;
			}
		});

window.addEventListener('beforeunload', function (e) {
			if (dirty) {
				e.preventDefault();
				e.returnValue = '';
			}
		});
	}

/* ------------------------------------------------------------------
	 * Sections system — add / rename / collapse / delete / reorder
	 * ----------------------------------------------------------------*/
	var sectionCounter = 0;  // unique id counter

function initSections() {
		// Add Section buttons
		$('.wpr-wb-add-section-btn').on('click', function () {
			var tab = $(this).data('tab');
			addSection(tab);
		});

// Delegate: toggle collapse (with animation)
		$('.wpr-wb-center-body').on('click', '.wpr-wb-section-toggle', function (e) {
			e.stopPropagation();
			var $item = $(this).closest('.wpr-wb-section-item');
			var $body = $item.find('.wpr-wb-section-body');

if ($item.hasClass('collapsed')) {
				$item.removeClass('collapsed');
				$body.hide().slideDown(150);
			} else {
				$body.slideUp(150, function () {
					$item.addClass('collapsed');
				});
			}
		});

// Delegate: delete section
		$('.wpr-wb-center-body').on('click', '.wpr-wb-section-delete', function (e) {
			e.stopPropagation();
			var $section = $(this).closest('.wpr-wb-section-item');
			$section.slideUp(200, function () {
				$section.remove();
	
			});
		});

// Delegate: toggle section settings panel
		$('.wpr-wb-center-body').on('click', '.wpr-wb-section-settings-btn', function (e) {
			e.stopPropagation();
			var $settings = $(this).closest('.wpr-wb-section-item').find('.wpr-wb-section-settings');
			$settings.slideToggle(150);
		});

// Delegate: sync section key when edited in settings
		$('.wpr-wb-center-body').on('input', '.wpr-wb-section-key-input', function () {
			var $section = $(this).closest('.wpr-wb-section-item');
			$section.attr('data-section-key', $(this).val());
			$section.data('section-key', $(this).val());
		});

// Init sortable on each sections list
		$('.wpr-wb-sections-list').sortable({
			handle: '.wpr-wb-section-drag',
			placeholder: 'wpr-wb-section-placeholder',
			tolerance: 'pointer',
			axis: 'y',
			cursor: 'grabbing',
			forcePlaceholderSize: true,
		});
	}

/**
	 * Add a new section to a tab
	 */
	function addSection(tab, label, key, description) {
		sectionCounter++;
		var sKey = key || 'section_' + sectionCounter;
		var sLabel = label || 'Section ' + sectionCounter;
		var sDesc = description || '';

var html = ''
			+ '<div class="wpr-wb-section-item" data-section-key="' + sKey + '">'
			+   '<div class="wpr-wb-section-header">'
			+     '<span class="wpr-wb-section-drag"><i class="eicon-handle"></i></span>'
			+     '<input type="text" class="wpr-wb-section-title-input" value="' + escAttr(sLabel) + '" data-field="label">'
			+     '<div class="wpr-wb-section-actions">'
			+       '<button type="button" class="wpr-wb-section-settings-btn" title="Section Settings"><i class="eicon-cog"></i></button>'
			+       '<button type="button" class="wpr-wb-section-toggle" title="Toggle"><i class="eicon-caret-down"></i></button>'
			+       '<button type="button" class="wpr-wb-section-delete" title="Delete"><i class="eicon-trash-o"></i></button>'
			+     '</div>'
			+   '</div>'
			+   '<div class="wpr-wb-section-settings" style="display:none;">'
			+     '<div class="wpr-wb-control-field">'
			+       '<label class="wpr-wb-control-field-label">Section Key</label>'
			+       '<input type="text" class="wpr-wb-control-field-input wpr-wb-section-key-input" value="' + escAttr(sKey) + '" data-field="section_key">'
			+     '</div>'
			+     '<div class="wpr-wb-control-field">'
			+       '<label class="wpr-wb-control-field-label">Description</label>'
			+       '<input type="text" class="wpr-wb-control-field-input" value="' + escAttr(sDesc) + '" data-field="description" placeholder="Optional section description">'
			+     '</div>'
			+   '</div>'
			+   '<div class="wpr-wb-section-body">'
			+     '<div class="wpr-wb-section-controls"></div>'
			+     '<button type="button" class="wpr-wb-add-control-btn"><i class="eicon-plus"></i> Add Control</button>'
			+   '</div>'
			+ '</div>';

var $list = $('.wpr-wb-sections-list[data-tab="' + tab + '"]');
		var $section = $(html).hide();
		$list.append($section);
		$section.slideDown(200);

// Refresh sortable
		$list.sortable('refresh');

return $section;
	}

/**
	 * Collect all sections & controls from a tab into an array
	 */
	function collectTabSections(tab) {
		var sections = [];
		$('.wpr-wb-sections-list[data-tab="' + tab + '"] .wpr-wb-section-item').each(function () {
			var $s = $(this);
			var sectionData = {
				key: $s.find('.wpr-wb-section-key-input').val() || $s.data('section-key'),
				label: $s.find('.wpr-wb-section-title-input').val(),
				description: $s.find('[data-field="description"]').val() || '',
				controls: []
			};

// Controls will be collected here in Chapter 4
			$s.find('.wpr-wb-section-controls .wpr-wb-control-item').each(function () {
				var $c = $(this);
				sectionData.controls.push(collectControlData($c));
			});

sections.push(sectionData);
		});
		return sections;
	}

/**
	 * Populate sections from loaded data
	 */
	function populateSections(tab, sections) {
		if (!sections || !Array.isArray(sections)) return;

for (var i = 0; i < sections.length; i++) {
			var s = sections[i];
			sectionCounter++;
			var $section = addSection(tab, s.label, s.key, s.description);

if (s.controls && Array.isArray(s.controls)) {
				for (var j = 0; j < s.controls.length; j++) {
					var $ctrl = addControl($section, s.controls[j]);
					$ctrl.addClass('collapsed'); // collapse when loading saved data
				}
			}
		}
	}

/**
	 * Simple HTML attribute escaping
	 */
	function escAttr(str) {
		return String(str).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
	}

/* ------------------------------------------------------------------
	 * Control Types Registry
	 * ----------------------------------------------------------------*/
	var controlTypes = {
		// Basic
		text:               { label: 'Text',              icon: 'eicon-t-letter-bold', group: 'Basic' },
		number:             { label: 'Number',            icon: 'eicon-number-field',  group: 'Basic' },
		textarea:           { label: 'Textarea',          icon: 'eicon-text-area',     group: 'Basic' },
		wysiwyg:            { label: 'WYSIWYG',           icon: 'eicon-text',          group: 'Basic' },
		code:               { label: 'Code',              icon: 'eicon-code',          group: 'Basic' },
		// Choice
		select:             { label: 'Select',            icon: 'eicon-select',        group: 'Choice' },
		select2:            { label: 'Select2',           icon: 'eicon-select',        group: 'Choice' },
		switcher:           { label: 'Switcher',          icon: 'eicon-toggle',        group: 'Choice' },
		choose:             { label: 'Choose',            icon: 'eicon-text-align-left', group: 'Choice' },
		// Media
		media:              { label: 'Media',             icon: 'eicon-image',         group: 'Media' },
		icons:              { label: 'Icons',             icon: 'eicon-star',          group: 'Media' },
		// Design
		color:              { label: 'Color',             icon: 'eicon-paint-brush',   group: 'Design' },
		slider:             { label: 'Slider',            icon: 'eicon-h-align-stretch',   group: 'Design' },
		dimensions:         { label: 'Dimensions',        icon: 'eicon-frame-expand',  group: 'Design' },
		url:                { label: 'URL',               icon: 'eicon-url',           group: 'Basic' },
		// Group Controls
		typography:         { label: 'Typography',        icon: 'eicon-typography',    group: 'Group Controls' },
		background:         { label: 'Background',        icon: 'eicon-background',    group: 'Group Controls' },
		border:             { label: 'Border',            icon: 'eicon-square',        group: 'Group Controls' },
		box_shadow:         { label: 'Box Shadow',        icon: 'eicon-lightbox',      group: 'Group Controls' },
		text_shadow:        { label: 'Text Shadow',       icon: 'eicon-font',          group: 'Group Controls' },
		// Other
		font:               { label: 'Font',              icon: 'eicon-font',          group: 'Other' },
		date_time:          { label: 'Date/Time',         icon: 'eicon-date',          group: 'Other' },
		hidden:             { label: 'Hidden',            icon: 'eicon-eye-slash',     group: 'Other' },
	};

/** Group controls that need selector instead of options/default */
	var groupControlTypes = ['typography','background','border','box_shadow','text_shadow'];

/** Controls that use options (key:value pairs) */
	var optionControlTypes = ['select','select2','choose'];

var controlCounter = 0;

/* ------------------------------------------------------------------
	 * Control Type Picker Modal
	 * ----------------------------------------------------------------*/
	var pendingSection = null; // which section the control will be added to

function initControlPicker() {
		// Build the type grid once
		buildControlTypeGrid();

// Close modal
		$('#wpr-wb-control-modal-close').on('click', closeControlModal);
		$('#wpr-wb-control-modal').on('click', function (e) {
			if (e.target === this) closeControlModal();
		});
		$(document).on('keydown', function (e) {
			if (e.key === 'Escape' && $('#wpr-wb-control-modal').hasClass('open')) {
				closeControlModal();
			}
		});

// Search
		$('#wpr-wb-control-search').on('input', function () {
			filterControlTypes($(this).val().toLowerCase());
		});

// Select a control type
		$('#wpr-wb-control-type-grid').on('click', '.wpr-wb-ct-item', function () {
			var type = $(this).data('type');
			if (pendingSection) {
				addControl(pendingSection, { type: type });
				pendingSection = null;
			}
			closeControlModal();
		});
	}

function openControlModal($section) {
		pendingSection = $section;
		$('#wpr-wb-control-modal').addClass('open');
		$('#wpr-wb-control-search').val('').focus();
		filterControlTypes('');
	}

function closeControlModal() {
		$('#wpr-wb-control-modal').removeClass('open');
		pendingSection = null;
	}

var html = '';
		var groupOrder = ['Basic', 'Choice', 'Media', 'Design', 'Group', 'Other'];
		for (var g = 0; g < groupOrder.length; g++) {
			var gName = groupOrder[g];
			if (!groups[gName]) continue;
			html += '<div class="wpr-wb-ct-group" data-group="' + gName + '">';
			html += '<div class="wpr-wb-ct-group-title">' + gName + '</div>';
			html += '<div class="wpr-wb-ct-group-items">';
			for (var i = 0; i < groups[gName].length; i++) {
				var item = groups[gName][i];
				html += '<div class="wpr-wb-ct-item" data-type="' + item.type + '" data-label="' + item.label.toLowerCase() + '">';
				html += '<div class="wpr-wb-ct-item-icon"><i class="' + item.icon + '"></i></div>';
				html += '<span class="wpr-wb-ct-item-name">' + item.label + '</span>';
				html += '</div>';
			}
			html += '</div></div>';
		}

$('#wpr-wb-control-type-grid').html(html);
	}

/* ------------------------------------------------------------------
	 * Controls — add / delete / duplicate / collapse / reorder
	 * ----------------------------------------------------------------*/
	function addControl($section, conf) {
		controlCounter++;
		conf = conf || {};
		var type = conf.type || 'text';
		var ct = controlTypes[type] || controlTypes.text;
		var key = conf.key || type + '_' + controlCounter;
		var label = conf.label || ct.label;
		var isGroup = groupControlTypes.indexOf(type) !== -1;

var html = ''
			+ '<div class="wpr-wb-control-item" data-type="' + type + '">'
			+   '<div class="wpr-wb-control-header">'
			+     '<span class="wpr-wb-control-drag"><i class="eicon-handle"></i></span>'
			+     '<span class="wpr-wb-control-type-icon"><i class="' + ct.icon + '"></i></span>'
			+     '<div class="wpr-wb-control-info">'
			+       '<span class="wpr-wb-control-label-text">' + escAttr(label) + '</span>'
			+       '<span class="wpr-wb-control-key-text">' + escAttr(key) + '</span>'
			+     '</div>'
			+     '<div class="wpr-wb-control-actions">'
			+       '<button type="button" class="wpr-wb-control-duplicate" title="Duplicate"><i class="eicon-clone"></i></button>'
			+       '<button type="button" class="wpr-wb-control-remove" title="Delete"><i class="eicon-trash-o"></i></button>'
			+       '<button type="button" class="wpr-wb-control-toggle-btn" title="Toggle"><i class="eicon-caret-down"></i></button>'
			+     '</div>'
			+   '</div>'
			+   '<div class="wpr-wb-control-body">'
			+     buildControlFields(type, key, label, conf, isGroup)
			+   '</div>'
			+ '</div>';

var $controls = $section.find('.wpr-wb-section-controls');
		var $control = $(html);

// Collapse all existing controls in this section
		$controls.find('.wpr-wb-control-item').addClass('collapsed');

// Store initial data
		$control.data('control', $.extend({ type: type, key: key, label: label }, conf));

$controls.append($control);
		initControlSortable($controls);

// Sync default select with premade options for choice controls
		if (optionControlTypes.indexOf(type) !== -1) {
			syncDefaultSelect($control.find('.wpr-wb-control-body'));
		}

return $control;
	}

/**
	 * Build a single option row for the options repeater
	 */
	function buildOptionRow(key, title, icon) {
		var hasIcon = (icon !== null && icon !== undefined);
		var h = '<div class="wpr-wb-option-row">';
		h += '<span class="wpr-wb-option-drag"><i class="eicon-handle"></i></span>';
		h += '<input type="text" class="wpr-wb-option-key" value="' + escAttr(key || '') + '" placeholder="key">';
		h += '<input type="text" class="wpr-wb-option-title" value="' + escAttr(title || '') + '" placeholder="label">';
		if (hasIcon) {
			h += '<button type="button" class="wpr-wb-option-icon-btn" title="Choose Icon">';
			h += '<i class="' + (icon ? escAttr(icon) : 'eicon-star') + '"></i>';
			h += '</button>';
			h += '<input type="hidden" class="wpr-wb-option-icon" value="' + escAttr(icon || '') + '">';
		}
		h += '<button type="button" class="wpr-wb-option-remove" title="Remove"><i class="eicon-close"></i></button>';
		h += '</div>';
		return h;
	}

/* ------------------------------------------------------------------
	 * CSS Selector Repeater Helpers
	 * ----------------------------------------------------------------*/
	var selectorPlaceholders = {
		color: 'color: {{VALUE}}',
		slider: 'width: {{SIZE}}',
		dimensions: 'padding: {{TOP}} {{RIGHT}} {{BOTTOM}} {{LEFT}}',
		choose: 'text-align: {{VALUE}}',
		select: 'display: {{VALUE}}',
		number: 'opacity: {{VALUE}}',
		font: 'font-family: {{VALUE}}',
	};

/**
	 * Sync the default value <select> with options from the repeater.
	 */
	function syncDefaultSelect($body) {
		var $select = $body.find('.wpr-wb-default-select');
		if (!$select.length) return;
		var curVal = $select.val();
		var html = '<option value="">None</option>';
		$body.find('.wpr-wb-options-repeater .wpr-wb-option-row').each(function () {
			var k = $(this).find('.wpr-wb-option-key').val() || '';
			var l = $(this).find('.wpr-wb-option-title').val() || k;
			if (k) {
				var sel = (k === curVal) ? ' selected' : '';
				html += '<option value="' + escAttr(k) + '"' + sel + '>' + escAttr(l) + '</option>';
			}
		});
		$select.html(html);
	}

/**
	 * Build the configuration fields HTML for a control based on its type
	 */
	function buildControlFields(type, key, label, conf, isGroup) {
		conf = conf || {};
		var h = '';

// Label field (all controls)
		h += '<div class="wpr-wb-control-field">';
		h += '<label class="wpr-wb-control-field-label">Label</label>';
		h += '<input type="text" class="wpr-wb-control-field-input" data-field="label" value="' + escAttr(label) + '">';
		h += '</div>';

// Key field (all controls)
		h += '<div class="wpr-wb-control-field">';
		h += '<label class="wpr-wb-control-field-label">Key</label>';
		h += '<div class="wpr-wb-key-input-wrap">';
		h += '<input type="text" class="wpr-wb-control-field-input" data-field="key" value="' + escAttr(key) + '">';
		h += '<button type="button" class="wpr-wb-key-copy-btn" title="Copy key"><i class="eicon-copy"></i></button>';
		h += '</div>';
		var hintTag = (type === 'icons') ? '{{icon(' + escAttr(key) + ')}}' : (type === 'media') ? '{{' + escAttr(key) + '.url}}' : '{{' + escAttr(key) + '}}';
		h += '<span class="wpr-wb-control-field-hint">Copy to use in HTML: ' + hintTag + '</span>';
		if (type === 'switcher') {
			h += '<span class="wpr-wb-control-field-hint">Conditional: {{#if ' + escAttr(key) + '}}...{{else}}...{{/if}}</span>';
		}
		h += '</div>';

// Hidden control: only key + default value
		if (type === 'hidden') {
			h += '<div class="wpr-wb-control-field">';
			h += '<label class="wpr-wb-control-field-label">Default Value</label>';
			h += '<input type="text" class="wpr-wb-control-field-input" data-field="default" value="' + escAttr(conf.default || '') + '">';
			h += '<span class="wpr-wb-control-field-hint">This value is stored but not visible to the user in Elementor</span>';
			h += '</div>';
			return h;
		}

if (isGroup) {
			// Selector for group controls
			h += '<div class="wpr-wb-control-field">';
			h += '<label class="wpr-wb-control-field-label">CSS Selector</label>';
			h += '<input type="text" class="wpr-wb-control-field-input" data-field="selector" value="' + escAttr(conf.selector || '') + '" placeholder=".my-element">';
			h += '<span class="wpr-wb-control-field-hint">Applied to: {{WRAPPER}} .selector</span>';
			h += '</div>';
		} else {
			// Default value (non-group, skip icons)
			if (type !== 'icons') {
				h += '<div class="wpr-wb-control-field">';
				h += '<label class="wpr-wb-control-field-label">Default Value</label>';
				if (type === 'switcher') {
					// On/Off select for switcher
					var swVal = conf.default || '';
					h += '<select class="wpr-wb-control-field-input" data-field="default">';
					h += '<option value=""' + (swVal !== 'yes' ? ' selected' : '') + '>Off</option>';
					h += '<option value="yes"' + (swVal === 'yes' ? ' selected' : '') + '>On</option>';
					h += '</select>';
				} else if (optionControlTypes.indexOf(type) !== -1) {
					// Select dropdown for choice controls — populated dynamically from options repeater
					h += '<select class="wpr-wb-control-field-input wpr-wb-default-select" data-field="default">';
					h += '<option value="">None</option>';
					if (conf.options && typeof conf.options === 'object') {
						for (var dk in conf.options) {
							var dlabel = (typeof conf.options[dk] === 'object') ? (conf.options[dk].title || dk) : (conf.options[dk] || dk);
							var dsel = (dk === (conf.default || '')) ? ' selected' : '';
							h += '<option value="' + escAttr(dk) + '"' + dsel + '>' + escAttr(dlabel) + '</option>';
						}
					}
					h += '</select>';
				} else {
					h += '<input type="text" class="wpr-wb-control-field-input" data-field="default" value="' + escAttr(conf.default || '') + '">';
				}
				h += '</div>';

// Code language
				if (type === 'code') {
					var codeLangs = {
						html: 'HTML', css: 'CSS', sass: 'SASS', scss: 'SCSS',
						javascript: 'JavaScript', json: 'JSON', less: 'LESS',
						markdown: 'Markdown', php: 'PHP', python: 'Python',
						mysql: 'MySQL', sql: 'SQL', svg: 'SVG', text: 'Text',
						twig: 'Twig', typescript: 'TypeScript'
					};
					var curLang = conf.language || 'html';
					h += '<div class="wpr-wb-control-field">';
					h += '<label class="wpr-wb-control-field-label">Language</label>';
					h += '<select class="wpr-wb-control-field-input" data-field="language">';
					for (var lk in codeLangs) {
						var sel = (lk === curLang) ? ' selected' : '';
						h += '<option value="' + lk + '"' + sel + '>' + codeLangs[lk] + '</option>';
					}
					h += '</select>';
					h += '</div>';
				}

// Slider/Number min/max/step
				if (type === 'slider' || type === 'number') {
					var sliderMin = (conf.slider_min !== undefined && conf.slider_min !== '') ? conf.slider_min : '0';
					var sliderMax = (conf.slider_max !== undefined && conf.slider_max !== '') ? conf.slider_max : '1000';
					var sliderStep = (conf.slider_step !== undefined && conf.slider_step !== '') ? conf.slider_step : '1';
					h += '<div class="wpr-wb-control-field">';
					h += '<label class="wpr-wb-control-field-label">Range</label>';
					h += '<div class="wpr-wb-slider-range-row">';
					h += '<div class="wpr-wb-slider-range-input"><span>Min</span><input type="number" step="any" class="wpr-wb-control-field-input" data-field="slider_min" value="' + escAttr(sliderMin) + '"></div>';
					h += '<div class="wpr-wb-slider-range-input"><span>Max</span><input type="number" step="any" class="wpr-wb-control-field-input" data-field="slider_max" value="' + escAttr(sliderMax) + '"></div>';
					h += '<div class="wpr-wb-slider-range-input"><span>Step</span><input type="number" step="any" class="wpr-wb-control-field-input" data-field="slider_step" value="' + escAttr(sliderStep) + '"></div>';
					h += '</div>';
					h += '</div>';

// No units toggle (slider only)
					if (type === 'slider') {
						var noUnits = conf.no_units ? 'yes' : '';
						h += '<div class="wpr-wb-control-field">';
						h += '<label class="wpr-wb-control-field-label">Disable Unit Selector</label>';
						h += '<select class="wpr-wb-control-field-input" data-field="no_units">';
						h += '<option value=""' + (noUnits !== 'yes' ? ' selected' : '') + '>No</option>';
						h += '<option value="yes"' + (noUnits === 'yes' ? ' selected' : '') + '>Yes</option>';
						h += '</select>';
						h += '<span class="wpr-wb-control-field-hint">Hides px/em/% selector in Elementor — use your own unit in CSS Styles</span>';
						h += '</div>';
					}
				}

h += '<hr class="wpr-wb-control-separator">';
			}

// Allowed Dimensions (dimensions only)
			if (type === 'dimensions') {
				var dimMode = conf.allowed_dimensions || 'all';
				h += '<div class="wpr-wb-control-field">';
				h += '<label class="wpr-wb-control-field-label">Allowed Dimensions</label>';
				h += '<select class="wpr-wb-control-field-input" data-field="allowed_dimensions">';
				h += '<option value="all"' + (dimMode === 'all' ? ' selected' : '') + '>All Fields</option>';
				h += '<option value="vertical"' + (dimMode === 'vertical' ? ' selected' : '') + '>Top & Bottom</option>';
				h += '<option value="horizontal"' + (dimMode === 'horizontal' ? ' selected' : '') + '>Left & Right</option>';
				h += '</select>';
				h += '<span class="wpr-wb-control-field-hint">Which dimension fields to show in Elementor</span>';
				h += '</div>';
			}

// Options repeater for select/select2/choose
			if (optionControlTypes.indexOf(type) !== -1) {
				var isChoose = (type === 'choose');
				var hasExisting = conf.options && typeof conf.options === 'object' && Object.keys(conf.options).length > 0;
				h += '<div class="wpr-wb-control-field">';
				h += '<label class="wpr-wb-control-field-label">Options</label>';
				h += '<div class="wpr-wb-options-repeater" data-type="' + type + '">';

if (hasExisting) {
					// Render existing options
					for (var ok in conf.options) {
						var optVal = conf.options[ok];
						var optTitle = '';
						var optIcon = '';
						if (isChoose && typeof optVal === 'object') {
							optTitle = optVal.title || '';
							optIcon = optVal.icon || '';
						} else {
							optTitle = (typeof optVal === 'string') ? optVal : '';
						}
						h += buildOptionRow(ok, optTitle, isChoose ? optIcon : null);
					}
				} else {
					// Premade default options for new controls
					if (isChoose) {
						h += buildOptionRow('value-1', 'Option 1', 'eicon-h-align-left');
						h += buildOptionRow('value-2', 'Option 2', 'eicon-h-align-center');
						h += buildOptionRow('value-3', 'Option 3', 'eicon-h-align-right');
					} else {
						h += buildOptionRow('value-1', 'Option 1', null);
						h += buildOptionRow('value-2', 'Option 2', null);
						h += buildOptionRow('value-3', 'Option 3', null);
					}
				}

h += '</div>'; // end repeater
				h += '<button type="button" class="wpr-wb-option-add-btn"><i class="eicon-plus"></i> Add Option</button>';
				var optHint = (type === 'choose') ? 'Add options with key, label, and icon' : 'Add key-value pairs for dropdown options';
				h += '<span class="wpr-wb-control-field-hint">' + optHint + '</span>';
				h += '</div>';
				h += '<hr class="wpr-wb-control-separator">';
			}

// CSS Styles (only for style-related controls)
			var selectorTypes = ['color', 'slider', 'dimensions', 'choose', 'select', 'number', 'font'];
			if (selectorTypes.indexOf(type) !== -1) {
				// Determine placeholder based on control settings
				var sliderNoUnits = (type === 'slider' && conf.no_units);
				var dimMode = (type === 'dimensions') ? (conf.allowed_dimensions || 'all') : '';
				var curSelectorPlaceholder;
				if (sliderNoUnits) {
					curSelectorPlaceholder = 'width: {{SIZE}}px';
				} else if (dimMode === 'vertical') {
					curSelectorPlaceholder = 'padding-top: {{TOP}}';
				} else if (dimMode === 'horizontal') {
					curSelectorPlaceholder = 'padding-left: {{LEFT}}';
				} else {
					curSelectorPlaceholder = selectorPlaceholders[type] || 'color: {{VALUE}}';
				}

if (type === 'font') {
					// Font: single selector input, font-family: {{VALUE}} applied automatically
					var fontSel = '';
					if (conf.selectors) {
						var fontKeys = Object.keys(conf.selectors);
						if (fontKeys.length) fontSel = fontKeys[0];
					}
					h += '<div class="wpr-wb-control-field wpr-wb-font-selector-field">';
					h += '<label class="wpr-wb-control-field-label">Selector</label>';
					h += '<input type="text" class="wpr-wb-control-field-input" data-field="font_selector" value="' + escAttr(fontSel) + '" placeholder=".my-element">';
					h += '<span class="wpr-wb-control-field-hint">font-family: {{VALUE}} is applied automatically</span>';
					h += '</div>';
				} else {
					h += '<div class="wpr-wb-control-field wpr-wb-selectors-field" data-control-type="' + type + '">';
					h += '<label class="wpr-wb-control-field-label">CSS Styles</label>';
					h += '<div class="wpr-wb-selector-repeater">';
					if (conf.selectors) {
						for (var sk in conf.selectors) {
							// Split merged declarations back into separate rows
							var fullDecl = conf.selectors[sk];
							var parts = fullDecl.split(';').map(function (p) { return p.trim(); }).filter(Boolean);
							if (parts.length > 1) {
								for (var pi = 0; pi < parts.length; pi++) {
									h += buildSelectorRow(sk, parts[pi], type, curSelectorPlaceholder);
								}
							} else {
								h += buildSelectorRow(sk, fullDecl.replace(/;?\s*$/, ''), type, curSelectorPlaceholder);
							}
						}
					}
					h += '</div>';
					h += '<button type="button" class="wpr-wb-selector-add-btn"><i class="eicon-plus"></i> Add Selector</button>';
					h += '<span class="wpr-wb-control-field-hint">e.g. ' + escAttr(curSelectorPlaceholder) + '</span>';
					h += '</div>';
				}
				h += '<hr class="wpr-wb-control-separator">';
			}
		}

// Condition (all controls)
		var condKey = (conf.condition && conf.condition.key) ? conf.condition.key : '';
		var condVal = (conf.condition && conf.condition.value) ? conf.condition.value : '';
		h += '<div class="wpr-wb-control-field wpr-wb-condition-field">';
		h += '<label class="wpr-wb-control-field-label">Condition</label>';
		h += '<div class="wpr-wb-condition-row">';
		h += '<input type="text" class="wpr-wb-control-field-input" data-field="condition_key" value="' + escAttr(condKey) + '" placeholder="control_key" style="width:48%">';
		h += '<span class="wpr-wb-condition-eq">=</span>';
		h += '<input type="text" class="wpr-wb-control-field-input" data-field="condition_value" value="' + escAttr(condVal) + '" placeholder="value" style="width:48%">';
		h += '</div>';
		h += '<span class="wpr-wb-control-field-hint">Show this control only when another control equals a value</span>';
		h += '</div>';

// Separator (all controls)
		h += '<div class="wpr-wb-control-field">';
		h += '<label class="wpr-wb-control-field-label">Separator</label>';
		h += '<select class="wpr-wb-control-field-input" data-field="separator">';
		h += '<option value=""' + (!conf.separator ? ' selected' : '') + '>None</option>';
		h += '<option value="before"' + (conf.separator === 'before' ? ' selected' : '') + '>Before</option>';
		h += '<option value="after"' + (conf.separator === 'after' ? ' selected' : '') + '>After</option>';
		h += '</select>';
		h += '</div>';

return h;
	}

/**
	 * Collect data from a single control element
	 */
	function collectControlData($control) {
		var data = {
			type: $control.data('type'),
			key: $control.find('[data-field="key"]').val(),
			label: $control.find('[data-field="label"]').val(),
		};

var isGroup = groupControlTypes.indexOf(data.type) !== -1;

if (isGroup) {
			data.selector = $control.find('[data-field="selector"]').val() || '';
		} else {
			data.default = $control.find('[data-field="default"]').val() || '';

// Collect options from repeater
			var $repeater = $control.find('.wpr-wb-options-repeater');
			if ($repeater.length) {
				var opts = {};
				var isChooseType = ($repeater.data('type') === 'choose');
				$repeater.find('.wpr-wb-option-row').each(function () {
					var optKey = $(this).find('.wpr-wb-option-key').val().trim();
					var optTitle = $(this).find('.wpr-wb-option-title').val().trim();
					if (!optKey) return;
					if (isChooseType) {
						var optIcon = $(this).find('.wpr-wb-option-icon').val() || '';
						opts[optKey] = { title: optTitle, icon: optIcon };
					} else {
						opts[optKey] = optTitle;
					}
				});
				if (Object.keys(opts).length > 0) {
					data.options = opts;
				}
			}

// Font: single selector input
			if (data.type === 'font') {
				var fontSel = $control.find('[data-field="font_selector"]').val();
				if (fontSel && fontSel.trim()) {
					data.selectors = {};
					data.selectors[fontSel.trim()] = 'font-family: {{VALUE}};';
				}
			} else {
				// Parse selectors from repeater rows
				var $selectorsField = $control.find('.wpr-wb-selectors-field');
				if ($selectorsField.length) {
					var sels = {};
					$selectorsField.find('.wpr-wb-selector-row').each(function () {
						var sel = $(this).find('.wpr-wb-selector-row-sel').val().trim();
						var decl = $(this).find('.wpr-wb-selector-row-decl').val().trim();
						if (sel && decl) {
							// Ensure declaration ends with semicolon for merging
							var declClean = decl.replace(/;?\s*$/, '');
							if (sels[sel]) {
								sels[sel] = sels[sel].replace(/;?\s*$/, '') + '; ' + declClean + ';';
							} else {
								sels[sel] = declClean + ';';
							}
						}
					});
					if (Object.keys(sels).length > 0) {
						data.selectors = sels;
					}
				}
			}
		}

// Condition
		var condKey = $control.find('[data-field="condition_key"]').val();
		var condVal = $control.find('[data-field="condition_value"]').val();
		if (condKey) {
			data.condition = { key: condKey, value: condVal || '' };
		}

// Code language
		if (data.type === 'code') {
			var lang = $control.find('[data-field="language"]').val();
			if (lang) data.language = lang;
		}

// Slider min/max
		if (data.type === 'slider' || data.type === 'number') {
			var sMin = $control.find('[data-field="slider_min"]').val();
			var sMax = $control.find('[data-field="slider_max"]').val();
			var sStep = $control.find('[data-field="slider_step"]').val();
			if (sMin !== '' && sMin !== undefined) data.slider_min = sMin;
			if (sMax !== '' && sMax !== undefined) data.slider_max = sMax;
			if (sStep !== '' && sStep !== undefined) data.slider_step = sStep;

if (data.type === 'slider') {
				var noUnits = $control.find('[data-field="no_units"]').val();
				if (noUnits === 'yes') data.no_units = true;
			}
		}

// Allowed dimensions
		if (data.type === 'dimensions') {
			var dimMode = $control.find('[data-field="allowed_dimensions"]').val();
			if (dimMode && dimMode !== 'all') {
				data.allowed_dimensions = dimMode;
			}
		}

var sep = $control.find('[data-field="separator"]').val();
		if (sep) data.separator = sep;

return data;
	}

/**
	 * Parse options textarea value into object
	 */
	function parseOptions(str, type) {
		var opts = {};
		var lines = str.trim().split('\n');
		for (var i = 0; i < lines.length; i++) {
			var parts = lines[i].split('|');
			if (parts.length < 2) continue;
			var key = parts[0].trim();
			if (type === 'choose' && parts.length >= 3) {
				opts[key] = { title: parts[1].trim(), icon: parts[2].trim() };
			} else {
				opts[key] = parts[1].trim();
			}
		}
		return opts;
	}

/**
	 * Parse selectors textarea value into object
	 */
	function parseSelectors(str) {
		var sels = {};
		var lines = str.trim().split('\n');
		for (var i = 0; i < lines.length; i++) {
			var parts = lines[i].split('||');
			if (parts.length < 2) continue;
			sels[parts[0].trim()] = parts[1].trim();
		}
		return sels;
	}

/**
	 * Init sortable on a controls list
	 */
	function initControlSortable($controls) {
		if ($controls.data('ui-sortable')) {
			$controls.sortable('refresh');
			return;
		}
		$controls.sortable({
			handle: '.wpr-wb-control-drag',
			placeholder: 'wpr-wb-control-placeholder',
			connectWith: '.wpr-wb-section-controls',
			tolerance: 'pointer',
			cursor: 'grabbing',
			forcePlaceholderSize: true,
		});
	}

function initControlEvents() {
		var $body = $('.wpr-wb-center-body');

// Open control picker (overrides the placeholder from Chapter 3)
		$body.off('click', '.wpr-wb-add-control-btn');
		$body.on('click', '.wpr-wb-add-control-btn', function () {
			var $section = $(this).closest('.wpr-wb-section-item');
			openControlModal($section);
		});

// Toggle collapse — clicking header or toggle button
		$body.on('click', '.wpr-wb-control-header', function (e) {
			// Don't toggle if clicking drag handle, duplicate, or delete buttons
			if ($(e.target).closest('.wpr-wb-control-drag, .wpr-wb-control-duplicate, .wpr-wb-control-remove').length) {
				return;
			}
			e.stopPropagation();
			var $item = $(this).closest('.wpr-wb-control-item');
			var isCollapsed = $item.hasClass('collapsed');

// Collapse all other controls in the same section
			$item.closest('.wpr-wb-section-controls').find('.wpr-wb-control-item').not($item).addClass('collapsed');

$item.toggleClass('collapsed');

// Init sortable on option repeaters and selector repeaters when expanding
			if (!$item.hasClass('collapsed')) {
				$item.find('.wpr-wb-options-repeater').each(function () {
					if (!$(this).data('ui-sortable')) {
						$(this).sortable({
							handle: '.wpr-wb-option-drag',
							placeholder: 'wpr-wb-option-placeholder',
							tolerance: 'pointer',
							axis: 'y',
							cursor: 'grabbing',
						});
					}
				});
				$item.find('.wpr-wb-selector-repeater').each(function () {
					if (!$(this).data('ui-sortable')) {
						$(this).sortable({
							handle: '.wpr-wb-selector-row-drag',
							placeholder: 'wpr-wb-selector-row-placeholder',
							tolerance: 'pointer',
							axis: 'y',
							cursor: 'grabbing',
						});
					}
				});
			}
		});

// Delete
		$body.on('click', '.wpr-wb-control-remove', function (e) {
			e.stopPropagation();
			var $ctrl = $(this).closest('.wpr-wb-control-item');
			$ctrl.slideUp(150, function () { $ctrl.remove(); });
		});

// Duplicate
		$body.on('click', '.wpr-wb-control-duplicate', function (e) {
			e.stopPropagation();
			var $ctrl = $(this).closest('.wpr-wb-control-item');
			var $section = $ctrl.closest('.wpr-wb-section-item');
			var data = collectControlData($ctrl);
			controlCounter++;
			data.key = data.type + '_' + controlCounter;
			addControl($section, data);
		});

// Sync label display when label field changes
		$body.on('input', '.wpr-wb-control-body [data-field="label"]', function () {
			var $item = $(this).closest('.wpr-wb-control-item');
			$item.find('.wpr-wb-control-label-text').text($(this).val());
		});

// Sync key display when key field changes
		$body.on('input', '.wpr-wb-control-body [data-field="key"]', function () {
			var $item = $(this).closest('.wpr-wb-control-item');
			$item.find('.wpr-wb-control-key-text').text($(this).val());
			// Update template hint
			var ctrlType = $item.data('type');
			var k = $(this).val();
			var hint = (ctrlType === 'icons') ? '{{icon(' + k + ')}}' : (ctrlType === 'media') ? '{{' + k + '.url}}' : '{{' + k + '}}';
			$item.find('.wpr-wb-control-field-hint').first().text('Copy to use in HTML: ' + hint);
		});

// Copy key as template tag
		$body.on('click', '.wpr-wb-key-copy-btn', function (e) {
			e.stopPropagation();
			e.preventDefault();
			var $item = $(this).closest('.wpr-wb-control-item');
			var $input = $(this).closest('.wpr-wb-key-input-wrap').find('[data-field="key"]');
			var keyVal = $input.val();
			var ctrlType = $item.data('type');
			if (ctrlType === 'icons') {
				var tag = '{{icon(' + keyVal + ')}}';
			} else if (ctrlType === 'media') {
				var tag = '{{' + keyVal + '.url}}';
			} else {
				var tag = '{{' + keyVal + '}}';
			}

// Use temporary textarea for reliable copy
			var $temp = $('<textarea>');
			$temp.val(tag).css({ position: 'fixed', left: '-9999px' }).appendTo('body');
			$temp[0].select();
			document.execCommand('copy');
			$temp.remove();
			showToast('Copied ' + tag, 'success');
		});

// Options repeater: Add option
		$body.on('click', '.wpr-wb-option-add-btn', function () {
			var $repeater = $(this).siblings('.wpr-wb-options-repeater');
			var isChoose = ($repeater.data('type') === 'choose');
			var newRow = buildOptionRow('', '', isChoose ? '' : null);
			$repeater.append(newRow);

// Init sortable on the repeater if not already
			if (!$repeater.data('ui-sortable')) {
				$repeater.sortable({
					handle: '.wpr-wb-option-drag',
					placeholder: 'wpr-wb-option-placeholder',
					tolerance: 'pointer',
					axis: 'y',
					cursor: 'grabbing',
				});
			} else {
				$repeater.sortable('refresh');
			}

syncDefaultSelect($(this).closest('.wpr-wb-control-body'));
		});

// Options repeater: Remove option
		$body.on('click', '.wpr-wb-option-remove', function () {
			var $control = $(this).closest('.wpr-wb-control-body');
			$(this).closest('.wpr-wb-option-row').remove();
			syncDefaultSelect($control);
		});

// Options repeater: Sync on key/label change
		$body.on('input', '.wpr-wb-option-key, .wpr-wb-option-title', function () {
			syncDefaultSelect($(this).closest('.wpr-wb-control-body'));
		});

// Dimensions: update CSS Styles placeholders/hint when "Allowed Dimensions" changes
		$body.on('change', '[data-field="allowed_dimensions"]', function () {
			var $ctrlBody = $(this).closest('.wpr-wb-control-body');
			var mode = $(this).val();
			var placeholder, hint;
			if (mode === 'vertical') {
				placeholder = 'padding-top: {{TOP}}';
				hint = 'e.g. padding-top: {{TOP}}, padding-bottom: {{BOTTOM}}';
			} else if (mode === 'horizontal') {
				placeholder = 'padding-left: {{LEFT}}';
				hint = 'e.g. padding-left: {{LEFT}}, padding-right: {{RIGHT}}';
			} else {
				placeholder = 'padding: {{TOP}} {{RIGHT}} {{BOTTOM}} {{LEFT}}';
				hint = 'e.g. padding: {{TOP}} {{RIGHT}} {{BOTTOM}} {{LEFT}}';
			}
			$ctrlBody.find('.wpr-wb-selector-row-decl').attr('placeholder', placeholder);
			$ctrlBody.find('.wpr-wb-selectors-field > .wpr-wb-control-field-hint').text(hint);
		});

// Slider: update CSS Styles placeholders/hint when "Disable Unit Selector" changes
		$body.on('change', '[data-field="no_units"]', function () {
			var $ctrlBody = $(this).closest('.wpr-wb-control-body');
			var noUnits = $(this).val() === 'yes';
			var placeholder = noUnits ? 'width: {{SIZE}}px' : 'width: {{SIZE}}';
			var hint = noUnits ? 'e.g. width: {{SIZE}}px' : 'e.g. width: {{SIZE}}';
			$ctrlBody.find('.wpr-wb-selector-row-decl').attr('placeholder', placeholder);
			$ctrlBody.find('.wpr-wb-selectors-field > .wpr-wb-control-field-hint').text(hint);
		});

// Options repeater: Icon picker for choose options
		$body.on('click', '.wpr-wb-option-icon-btn', function () {
			var $btn = $(this);
			openOptionIconPicker($btn);
		});

// CSS Selector repeater: Add row
		$body.on('click', '.wpr-wb-selector-add-btn', function () {
			var $repeater = $(this).siblings('.wpr-wb-selector-repeater');
			var controlType = $(this).closest('.wpr-wb-selectors-field').data('control-type') || 'color';
			var $ctrlBody = $(this).closest('.wpr-wb-control-body');
			var override = null;
			if (controlType === 'slider' && $ctrlBody.find('[data-field="no_units"]').val() === 'yes') {
				override = 'width: {{SIZE}}px';
			} else if (controlType === 'dimensions') {
				var dm = $ctrlBody.find('[data-field="allowed_dimensions"]').val() || 'all';
				if (dm === 'vertical') override = 'padding-top: {{TOP}}';
				else if (dm === 'horizontal') override = 'padding-left: {{LEFT}}';
			}
			$repeater.append(buildSelectorRow('', '', controlType, override));
			if (!$repeater.data('ui-sortable')) {
				$repeater.sortable({
					handle: '.wpr-wb-selector-row-drag',
					placeholder: 'wpr-wb-selector-row-placeholder',
					tolerance: 'pointer',
					axis: 'y',
					cursor: 'grabbing',
				});
			} else {
				$repeater.sortable('refresh');
			}
		});

// CSS Selector repeater: Remove row
		$body.on('click', '.wpr-wb-selector-row-remove', function () {
			$(this).closest('.wpr-wb-selector-row').remove();
		});

}

/* ------------------------------------------------------------------
	 * Option Icon Picker (reuses icon list from main icon picker)
	 * ----------------------------------------------------------------*/
	var pendingOptionIconBtn = null;

function openOptionIconPicker($btn) {
		pendingOptionIconBtn = $btn;
		var $modal = $('#wpr-wb-icon-modal');
		$modal.addClass('open').attr('data-mode', 'option-icon');
		$('#wpr-wb-icon-search').val('').focus();

if (allIcons.length === 0) {
			loadIconList();
		} else {
			renderIcons(allIcons);
		}
	}

/* ------------------------------------------------------------------
	 * Icon Picker
	 * ----------------------------------------------------------------*/
	var allIcons = [];    // cached list of eicon-* class names

function initIconPicker() {
		// Open modal
		$('#wpr-wb-change-icon').on('click', function () {
			openIconModal();
		});

// Close modal
		$('#wpr-wb-icon-modal-close').on('click', closeIconModal);
		$('#wpr-wb-icon-modal').on('click', function (e) {
			if (e.target === this) closeIconModal();
		});
		$(document).on('keydown', function (e) {
			if (e.key === 'Escape' && $('#wpr-wb-icon-modal').hasClass('open')) {
				closeIconModal();
			}
		});

// Search
		$('#wpr-wb-icon-search').on('input', function () {
			var query = $(this).val().toLowerCase();
			filterIcons(query);
		});

// Select icon (delegated)
		$('#wpr-wb-icon-grid').on('click', '.wpr-wb-icon-grid-item', function () {
			var iconClass = $(this).data('icon');
			var mode = $('#wpr-wb-icon-modal').attr('data-mode');

if (mode === 'option-icon' && pendingOptionIconBtn) {
				// Update the option row icon
				pendingOptionIconBtn.find('i').attr('class', iconClass);
				pendingOptionIconBtn.siblings('.wpr-wb-option-icon').val(iconClass);
				pendingOptionIconBtn = null;
			} else {
				// Widget icon picker
				$('#wpr-wb-icon').val(iconClass);
				$('#wpr-wb-icon-preview-i').attr('class', iconClass);
			}

$('.wpr-wb-icon-grid-item').removeClass('selected');
			$(this).addClass('selected');
			closeIconModal();
		});
	}

function openIconModal() {
		var $modal = $('#wpr-wb-icon-modal');
		$modal.addClass('open').attr('data-mode', 'widget-icon');
		$('#wpr-wb-icon-search').val('').focus();

if (allIcons.length === 0) {
			loadIconList();
		} else {
			renderIcons(allIcons);
		}
	}

function closeIconModal() {
		$('#wpr-wb-icon-modal').removeClass('open').removeAttr('data-mode');
		pendingOptionIconBtn = null;
	}

function loadIconList() {
		var $grid = $('#wpr-wb-icon-grid');
		$grid.html('<div class="wpr-wb-icon-grid-empty">Loading icons...</div>');

$.getJSON(wprWidgetBuilder.eiconsUrl, function (data) {
			// Filter out advanced/pro icons that don't render in free version
			var excludePrefixes = [
				'eicon-ehp-', 'eicon-e-', 'eicon-atomic', 'eicon-library-',
				'eicon-kit-', 'eicon-upgrade', 'eicon-notification',
				'eicon-light-mode', 'eicon-dark-mode', 'eicon-off-canvas',
				'eicon-speakerphone', 'eicon-div-block', 'eicon-flexbox',
				'eicon-taxonomy-filter', 'eicon-tab-content', 'eicon-tab-menu',
				'eicon-elementor-circle', 'eicon-elementor',
				'eicon-editor-underline', 'eicon-contact', 'eicon-layout',
				'eicon-components', 'eicon-accessibility', 'eicon-lock-outline',
				'eicon-advanced'
			];
			allIcons = Object.keys(data).map(function (key) {
				return 'eicon-' + key;
			}).filter(function (icon) {
				for (var i = 0; i < excludePrefixes.length; i++) {
					if (icon === excludePrefixes[i] || icon.indexOf(excludePrefixes[i]) === 0) {
						return false;
					}
				}
				return true;
			});
			renderIcons(allIcons);
		}).fail(function () {
			// Fallback: use a small built-in list of common icons
			allIcons = [
				'eicon-cog','eicon-code','eicon-text','eicon-image','eicon-video-camera',
				'eicon-button','eicon-heading','eicon-divider','eicon-spacer','eicon-icon-box',
				'eicon-tabs','eicon-accordion','eicon-toggle','eicon-star','eicon-counter',
				'eicon-slider-push','eicon-carousel','eicon-gallery-grid','eicon-posts-grid',
				'eicon-form-horizontal','eicon-table','eicon-countdown','eicon-price-table',
				'eicon-social-icons','eicon-google-maps','eicon-menu-bar','eicon-search',
				'eicon-person','eicon-mail','eicon-cart','eicon-heart','eicon-play',
				'eicon-share','eicon-download-button','eicon-alert','eicon-info-circle'
			];
			renderIcons(allIcons);
		});
	}

function renderIcons(icons) {
		var $grid = $('#wpr-wb-icon-grid');
		var currentIcon = $('#wpr-wb-icon').val();
		var html = '';

if (icons.length === 0) {
			html = '<div class="wpr-wb-icon-grid-empty">No icons found.</div>';
		} else {
			for (var i = 0; i < icons.length; i++) {
				var sel = icons[i] === currentIcon ? ' selected' : '';
				html += '<div class="wpr-wb-icon-grid-item' + sel + '" data-icon="' + icons[i] + '" title="' + icons[i] + '">';
				html += '<i class="' + icons[i] + '"></i>';
				html += '</div>';
			}
		}

$grid.html(html);
	}

/* ------------------------------------------------------------------
	 * Initialise everything on DOM ready
	 * ----------------------------------------------------------------*/
	$(function () {
		initPanelCollapse();
		initCenterTabs();
		initCodeTabs();
		initFooterButtons();
		initTitleSync();
		initSections();
		initControlPicker();
		initControlEvents();
		initIconPicker();
		initKeyboardShortcuts();
		initBeforeUnload();
		initMonaco();
	});

})(jQuery);