pict-section-formeditor 1.0.0

package/source/providers/Pict-Provider-FormEditorUtilities.js

@@ -0,0 +1,862 @@
+const libPictProvider = require('pict-provider');
+
+class FormEditorUtilities extends libPictProvider
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+
+		this.serviceType = 'PictProvider';
+
+		// Back-reference to the parent FormEditor view (set after construction)
+		this._ParentFormEditor = null;
+	}
+
+	/**
+	 * Sanitize a string into a valid object key.
+	 *
+	 * Strips non-alphanumeric characters (except underscore), collapses runs of
+	 * underscores, and trims leading/trailing underscores so the result is a
+	 * clean, human-readable identifier.
+	 *
+	 * @param {string} pString - The string to sanitize
+	 * @return {string} A sanitized key, or 'INVALID' if the input is unusable
+	 */
+	sanitizeObjectKey(pString)
+	{
+		if (typeof pString !== 'string' || pString.length < 1)
+		{
+			return 'INVALID';
+		}
+		return pString
+			.replace(/[^a-zA-Z0-9_]/g, '_')
+			.replace(/_+/g, '_')
+			.replace(/^_|_$/g, '');
+	}
+
+	/**
+	 * Check whether a hash is an auto-generated section hash (S{n}).
+	 */
+	_isAutoGeneratedSectionHash(pHash)
+	{
+		if (typeof pHash !== 'string')
+		{
+			return false;
+		}
+		return /^S\d+$/.test(pHash);
+	}
+
+	/**
+	 * Check whether a hash is an auto-generated input hash.
+	 * Auto-generated input hashes end with _Input{n}.
+	 */
+	_isAutoGeneratedInputHash(pHash)
+	{
+		if (typeof pHash !== 'string')
+		{
+			return false;
+		}
+		return /_Input\d+$/.test(pHash);
+	}
+
+	_escapeHTML(pString)
+	{
+		if (typeof pString !== 'string')
+		{
+			return '';
+		}
+		return pString
+			.replace(/&/g, '&amp;')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;')
+			.replace(/"/g, '&quot;');
+	}
+
+	_escapeAttr(pString)
+	{
+		if (typeof pString !== 'string')
+		{
+			return '';
+		}
+		return pString
+			.replace(/&/g, '&amp;')
+			.replace(/"/g, '&quot;')
+			.replace(/'/g, '&#39;');
+	}
+
+	_truncateMiddle(pString, pMaxLength)
+	{
+		if (typeof pString !== 'string')
+		{
+			return '';
+		}
+		if (!pMaxLength || pString.length <= pMaxLength)
+		{
+			return pString;
+		}
+		// Show more of the beginning than the end
+		let tmpEndLength = Math.floor((pMaxLength - 1) / 3);
+		let tmpStartLength = pMaxLength - 1 - tmpEndLength;
+		return pString.substring(0, tmpStartLength) + '\u2026' + pString.substring(pString.length - tmpEndLength);
+	}
+
+	/**
+	 * Build the merged list of InputType definitions from built-in defaults and
+	 * any embedder-provided overrides/additions in options.InputTypeDefinitions.
+	 *
+	 * Each definition is an object with:
+	 *   Hash        — The InputType value stored in PictForm.InputType
+	 *   Name        — A human-readable display name
+	 *   Description — A short description of what this type does
+	 *   Category    — A grouping category for the picker UI
+	 *
+	 * Embedders can extend or override by passing InputTypeDefinitions in the
+	 * view options.  Entries with matching Hash values override the default;
+	 * entries with new Hash values are appended.
+	 *
+	 * @param {object} pOptions - The merged view options
+	 * @return {Array} An array of InputType definition objects
+	 */
+	_buildInputTypeDefinitions(pOptions)
+	{
+		// Built-in InputType definitions categorized by function.
+		// Each definition can include a Manifest with Descriptors for
+		// InputType-specific PictForm properties, rendered in the properties panel.
+		let tmpDefaults =
+		[
+			// Text & Content
+			{ Hash: 'TextArea', Name: 'Text Area', Description: 'Multi-line text input', Category: 'Text & Content' },
+			{ Hash: 'Markdown', Name: 'Markdown', Description: 'Markdown-formatted text editor', Category: 'Text & Content' },
+			{ Hash: 'HTML', Name: 'HTML', Description: 'Rich HTML content block', Category: 'Text & Content' },
+
+			// Selection
+			{
+				Hash: 'Option', Name: 'Option', Description: 'Dropdown select from a set of choices', Category: 'Selection',
+				Manifest:
+				{
+					Descriptors:
+					{
+						'SelectOptions': { Name: 'Select Options', Hash: 'SelectOptions', DataType: 'String', Description: 'JSON array of {id, text} option objects' },
+						'SelectOptionsPickList': { Name: 'Pick List Name', Hash: 'SelectOptionsPickList', DataType: 'String', Description: 'Dynamic pick list name from AppData' }
+					}
+				}
+			},
+			{ Hash: 'Boolean', Name: 'Boolean', Description: 'Checkbox or toggle for true/false values', Category: 'Selection' },
+			{ Hash: 'Color', Name: 'Color', Description: 'Color picker input', Category: 'Selection' },
+
+			// Display
+			{ Hash: 'DisplayOnly', Name: 'Display Only', Description: 'Read-only display of the value with no input control', Category: 'Display', Prominent: true },
+			{ Hash: 'ReadOnly', Name: 'Read Only', Description: 'Input-styled read-only field', Category: 'Display', Prominent: true },
+			{
+				Hash: 'PreciseNumberReadOnly', Name: 'Precise Number (Read Only)', Description: 'Formatted precise number display with optional prefix/postfix', Category: 'Display', Prominent: true,
+				Manifest:
+				{
+					Descriptors:
+					{
+						'DecimalPrecision': { Name: 'Decimal Precision', Hash: 'DecimalPrecision', DataType: 'Number', Description: 'Number of decimal places to display' },
+						'AddCommas': { Name: 'Add Commas', Hash: 'AddCommas', DataType: 'Boolean', Description: 'Add thousand-separator commas to the number' },
+						'DigitsPrefix': { Name: 'Prefix', Hash: 'DigitsPrefix', DataType: 'String', Description: 'Prefix string prepended to the value (e.g. "$")' },
+						'DigitsPostfix': { Name: 'Postfix', Hash: 'DigitsPostfix', DataType: 'String', Description: 'Postfix string appended to the value (e.g. " USD")' }
+					}
+				}
+			},
+			{ Hash: 'Hidden', Name: 'Hidden', Description: 'Hidden input, not visible to the user', Category: 'Display' },
+			{
+				Hash: 'Chart', Name: 'Chart', Description: 'Data visualization chart', Category: 'Display',
+				Manifest:
+				{
+					Descriptors:
+					{
+						'ChartType': { Name: 'Chart Type', Hash: 'ChartType', DataType: 'String', Description: 'Chart.js type (bar, line, pie, doughnut, radar, polarArea)' },
+						'ChartLabelsAddress': { Name: 'Labels Address', Hash: 'ChartLabelsAddress', DataType: 'String', Description: 'AppData address to resolve chart labels from' },
+						'ChartLabelsSolver': { Name: 'Labels Solver', Hash: 'ChartLabelsSolver', DataType: 'String', Description: 'Fable solver expression for chart labels' },
+						'ChartDatasetsAddress': { Name: 'Datasets Address', Hash: 'ChartDatasetsAddress', DataType: 'String', Description: 'AppData address to resolve datasets from' }
+					}
+				}
+			},
+			{ Hash: 'Link', Name: 'Link', Description: 'Clickable hyperlink display', Category: 'Display' },
+
+			// Navigation
+			{
+				Hash: 'TabSectionSelector', Name: 'Tab Section Selector', Description: 'Selector that controls which sections are displayed as tabs', Category: 'Navigation',
+				Manifest:
+				{
+					Descriptors:
+					{
+						'TabSectionSet': { Name: 'Section Set', Hash: 'TabSectionSet', DataType: 'String', Description: 'JSON array of section hashes to show as tabs' },
+						'DefaultTabSectionHash': { Name: 'Default Tab', Hash: 'DefaultTabSectionHash', DataType: 'String', Description: 'Hash of the initially selected tab' },
+						'DefaultFromData': { Name: 'Default From Data', Hash: 'DefaultFromData', DataType: 'Boolean', Description: 'Use the data value to determine the default tab' }
+					}
+				}
+			},
+			{
+				Hash: 'TabGroupSelector', Name: 'Tab Group Selector', Description: 'Selector that controls which groups are displayed as tabs', Category: 'Navigation',
+				Manifest:
+				{
+					Descriptors:
+					{
+						'TabGroupSet': { Name: 'Group Set', Hash: 'TabGroupSet', DataType: 'String', Description: 'JSON array of group hashes to show as tabs' },
+						'DefaultTabGroupHash': { Name: 'Default Tab', Hash: 'DefaultTabGroupHash', DataType: 'String', Description: 'Hash of the initially selected tab' },
+						'DefaultFromData': { Name: 'Default From Data', Hash: 'DefaultFromData', DataType: 'Boolean', Description: 'Use the data value to determine the default tab' }
+					}
+				}
+			},
+
+			// Advanced
+			{
+				Hash: 'Templated', Name: 'Templated', Description: 'Custom template-driven input rendering', Category: 'Advanced',
+				Manifest:
+				{
+					Descriptors:
+					{
+						'Template': { Name: 'Template', Hash: 'Template', DataType: 'String', Description: 'Template string for custom rendering' }
+					}
+				}
+			},
+			{
+				Hash: 'TemplatedEntityLookup', Name: 'Templated Entity Lookup', Description: 'Template-driven entity search and selection', Category: 'Advanced',
+				Manifest:
+				{
+					Descriptors:
+					{
+						'Template': { Name: 'Template', Hash: 'Template', DataType: 'String', Description: 'Template string for rendering the entity display' }
+					}
+				}
+			}
+		];
+
+		// If the embedder provided custom InputTypeDefinitions, merge them
+		let tmpCustomDefinitions = (pOptions && Array.isArray(pOptions.InputTypeDefinitions)) ? pOptions.InputTypeDefinitions : [];
+
+		if (tmpCustomDefinitions.length === 0)
+		{
+			return tmpDefaults;
+		}
+
+		// Index defaults by Hash for quick lookup
+		let tmpDefaultMap = {};
+		for (let i = 0; i < tmpDefaults.length; i++)
+		{
+			tmpDefaultMap[tmpDefaults[i].Hash] = i;
+		}
+
+		// Merge: override existing entries by Hash, append new ones
+		for (let i = 0; i < tmpCustomDefinitions.length; i++)
+		{
+			let tmpCustom = tmpCustomDefinitions[i];
+			if (!tmpCustom || !tmpCustom.Hash)
+			{
+				continue;
+			}
+
+			if (tmpDefaultMap.hasOwnProperty(tmpCustom.Hash))
+			{
+				// Override the default entry
+				let tmpIndex = tmpDefaultMap[tmpCustom.Hash];
+				tmpDefaults[tmpIndex] = Object.assign({}, tmpDefaults[tmpIndex], tmpCustom);
+			}
+			else
+			{
+				// Append as a new entry
+				tmpDefaults.push(tmpCustom);
+				tmpDefaultMap[tmpCustom.Hash] = tmpDefaults.length - 1;
+			}
+		}
+
+		return tmpDefaults;
+	}
+
+	/**
+	 * Get the distinct list of InputType categories in display order.
+	 *
+	 * @return {Array} An array of category name strings
+	 */
+	_getInputTypeCategories()
+	{
+		let tmpCategories = [];
+		let tmpSeen = {};
+
+		for (let i = 0; i < this._ParentFormEditor._InputTypeDefinitions.length; i++)
+		{
+			let tmpCategory = this._ParentFormEditor._InputTypeDefinitions[i].Category || 'Other';
+			if (!tmpSeen[tmpCategory])
+			{
+				tmpSeen[tmpCategory] = true;
+				tmpCategories.push(tmpCategory);
+			}
+		}
+
+		return tmpCategories;
+	}
+
+	/**
+	 * Get the Manifest for a given InputType hash.
+	 *
+	 * Returns the Manifest object (with Descriptors) or null if the InputType
+	 * has no configurable PictForm properties.
+	 *
+	 * @param {string} pInputTypeHash - The InputType hash (e.g. 'Option', 'Chart')
+	 * @return {object|null} The Manifest object or null
+	 */
+	_getInputTypeManifest(pInputTypeHash)
+	{
+		if (!pInputTypeHash || typeof pInputTypeHash !== 'string')
+		{
+			return null;
+		}
+
+		for (let i = 0; i < this._ParentFormEditor._InputTypeDefinitions.length; i++)
+		{
+			if (this._ParentFormEditor._InputTypeDefinitions[i].Hash === pInputTypeHash)
+			{
+				return this._ParentFormEditor._InputTypeDefinitions[i].Manifest || null;
+			}
+		}
+
+		return null;
+	}
+
+	/**
+	 * Get InputType definitions filtered by a search query.
+	 *
+	 * The search is case-insensitive and matches against Hash, Name,
+	 * Description, and Category.
+	 *
+	 * @param {string} pQuery - The search query (empty string returns all)
+	 * @return {Array} Filtered InputType definition objects
+	 */
+	_filterInputTypeDefinitions(pQuery)
+	{
+		if (!pQuery || typeof pQuery !== 'string' || pQuery.trim().length === 0)
+		{
+			return this._ParentFormEditor._InputTypeDefinitions;
+		}
+
+		let tmpQuery = pQuery.trim().toLowerCase();
+
+		return this._ParentFormEditor._InputTypeDefinitions.filter(function(pDef)
+		{
+			return (
+				(pDef.Hash && pDef.Hash.toLowerCase().indexOf(tmpQuery) >= 0) ||
+				(pDef.Name && pDef.Name.toLowerCase().indexOf(tmpQuery) >= 0) ||
+				(pDef.Description && pDef.Description.toLowerCase().indexOf(tmpQuery) >= 0) ||
+				(pDef.Category && pDef.Category.toLowerCase().indexOf(tmpQuery) >= 0)
+			);
+		});
+	}
+
+	/**
+	 * Select an input to open it in the properties panel.
+	 *
+	 * @param {number} pSectionIndex - Index of the section
+	 * @param {number} pGroupIndex - Index of the group
+	 * @param {number} pRowIndex - Index of the row
+	 * @param {number} pInputIndex - Index of the input within the row
+	 */
+	selectInput(pSectionIndex, pGroupIndex, pRowIndex, pInputIndex)
+	{
+		this._ParentFormEditor._SelectedInputIndices = [pSectionIndex, pGroupIndex, pRowIndex, pInputIndex];
+		// Clear submanifest column selection
+		this._ParentFormEditor._SelectedTabularColumn = null;
+		// Also select the containing section and group
+		this._ParentFormEditor._SelectedSectionIndex = pSectionIndex;
+		this._ParentFormEditor._SelectedGroupIndices = { SectionIndex: pSectionIndex, GroupIndex: pGroupIndex };
+
+		if (this._ParentFormEditor._PropertiesPanelView)
+		{
+			this._ParentFormEditor._PropertiesPanelView.selectInput(pSectionIndex, pGroupIndex, pRowIndex, pInputIndex);
+		}
+
+		// Auto-switch to properties tab and expand panel
+		this._ParentFormEditor._PanelActiveTab = 'properties';
+		if (this._ParentFormEditor._PanelCollapsed)
+		{
+			this._ParentFormEditor._PanelCollapsed = false;
+		}
+
+		this._ParentFormEditor.renderVisualEditor();
+
+		// Align the properties panel with the selected input after layout settles
+		let tmpSelf = this;
+		setTimeout(function () { tmpSelf._alignPanelToSelection(); }, 0);
+	}
+
+	/**
+	 * Deselect the current input.  The panel stays open.
+	 */
+	deselectInput()
+	{
+		this._ParentFormEditor._SelectedInputIndices = null;
+		this._ParentFormEditor._SelectedTabularColumn = null;
+		this._ParentFormEditor._SelectedSectionIndex = null;
+		this._ParentFormEditor._SelectedGroupIndices = null;
+
+		if (this._ParentFormEditor._PropertiesPanelView)
+		{
+			this._ParentFormEditor._PropertiesPanelView.deselectAll();
+		}
+
+		this._ParentFormEditor.renderVisualEditor();
+	}
+
+	/**
+	 * Select a section to open it in the properties panel.
+	 *
+	 * @param {number} pSectionIndex - Index of the section
+	 */
+	selectSection(pSectionIndex)
+	{
+		this._ParentFormEditor._SelectedSectionIndex = pSectionIndex;
+		// Clear input, tabular, and group selections
+		this._ParentFormEditor._SelectedInputIndices = null;
+		this._ParentFormEditor._SelectedTabularColumn = null;
+		this._ParentFormEditor._SelectedGroupIndices = null;
+
+		if (this._ParentFormEditor._PropertiesPanelView)
+		{
+			this._ParentFormEditor._PropertiesPanelView.selectSection(pSectionIndex);
+		}
+
+		// Auto-switch to section tab and expand panel
+		this._ParentFormEditor._PanelActiveTab = 'section';
+		if (this._ParentFormEditor._PanelCollapsed)
+		{
+			this._ParentFormEditor._PanelCollapsed = false;
+		}
+
+		this._ParentFormEditor.renderVisualEditor();
+	}
+
+	/**
+	 * Select a group to open it in the properties panel.
+	 *
+	 * @param {number} pSectionIndex - Index of the section
+	 * @param {number} pGroupIndex - Index of the group
+	 */
+	selectGroup(pSectionIndex, pGroupIndex)
+	{
+		this._ParentFormEditor._SelectedGroupIndices = { SectionIndex: pSectionIndex, GroupIndex: pGroupIndex };
+		// Clear input and tabular selections
+		this._ParentFormEditor._SelectedInputIndices = null;
+		this._ParentFormEditor._SelectedTabularColumn = null;
+		// Also select the containing section
+		this._ParentFormEditor._SelectedSectionIndex = pSectionIndex;
+
+		if (this._ParentFormEditor._PropertiesPanelView)
+		{
+			this._ParentFormEditor._PropertiesPanelView.selectGroup(pSectionIndex, pGroupIndex);
+		}
+
+		// Auto-switch to group tab and expand panel
+		this._ParentFormEditor._PanelActiveTab = 'group';
+		if (this._ParentFormEditor._PanelCollapsed)
+		{
+			this._ParentFormEditor._PanelCollapsed = false;
+		}
+
+		this._ParentFormEditor.renderVisualEditor();
+	}
+
+	/**
+	 * Set the input display mode for all input cards.
+	 *
+	 * @param {string} pMode - 'name' or 'hash'
+	 */
+	setInputDisplayMode(pMode)
+	{
+		if (pMode === 'name' || pMode === 'hash')
+		{
+			this._ParentFormEditor._InputDisplayMode = pMode;
+			this._ParentFormEditor.renderVisualEditor();
+		}
+	}
+
+	/**
+	 * Toggle the properties panel collapsed/expanded state.
+	 */
+	togglePropertiesPanel()
+	{
+		this._ParentFormEditor._PanelCollapsed = !this._ParentFormEditor._PanelCollapsed;
+
+		if (typeof document !== 'undefined')
+		{
+			let tmpPanelEl = document.getElementById('FormEditor-PropertiesPanel-' + this._ParentFormEditor.Hash);
+			if (tmpPanelEl)
+			{
+				if (this._ParentFormEditor._PanelCollapsed)
+				{
+					tmpPanelEl.className = 'pict-fe-properties-panel';
+					tmpPanelEl.style.width = '';
+				}
+				else
+				{
+					tmpPanelEl.className = 'pict-fe-properties-panel pict-fe-properties-panel-open';
+					tmpPanelEl.style.width = this._ParentFormEditor._PanelWidth + 'px';
+				}
+			}
+		}
+	}
+
+	/**
+	 * Begin resizing the properties panel by dragging the toggle bar.
+	 *
+	 * @param {MouseEvent} pEvent
+	 */
+	onPanelResizeStart(pEvent)
+	{
+		if (typeof document === 'undefined')
+		{
+			return;
+		}
+
+		// Don't start resize if panel is collapsed — just toggle instead
+		if (this._ParentFormEditor._PanelCollapsed)
+		{
+			this.togglePropertiesPanel();
+			return;
+		}
+
+		pEvent.preventDefault();
+		this._ParentFormEditor._PanelResizing = true;
+
+		let tmpSelf = this;
+		let tmpStartX = pEvent.clientX;
+		let tmpStartWidth = this._ParentFormEditor._PanelWidth;
+		let tmpPanelEl = document.getElementById('FormEditor-PropertiesPanel-' + this._ParentFormEditor.Hash);
+
+		if (!tmpPanelEl)
+		{
+			this._ParentFormEditor._PanelResizing = false;
+			return;
+		}
+
+		// Find the content area to enforce its minimum width
+		let tmpContentEl = document.querySelector('.pict-fe-editor-content');
+		let tmpContainerEl = document.querySelector('.pict-fe-editor-layout');
+
+		let tmpOnMouseMove = function(pMoveEvent)
+		{
+			if (!tmpSelf._ParentFormEditor._PanelResizing)
+			{
+				return;
+			}
+
+			// Moving left increases panel width, moving right decreases it
+			let tmpDelta = tmpStartX - pMoveEvent.clientX;
+			let tmpNewWidth = Math.max(240, tmpStartWidth + tmpDelta);
+
+			// Limit so the content area doesn't shrink below its min-width (300px)
+			if (tmpContainerEl)
+			{
+				let tmpAvailable = tmpContainerEl.clientWidth - 10; // 10px for the grip
+				let tmpContentMin = 300;
+				if (tmpNewWidth > tmpAvailable - tmpContentMin)
+				{
+					tmpNewWidth = tmpAvailable - tmpContentMin;
+				}
+			}
+
+			tmpSelf._ParentFormEditor._PanelWidth = tmpNewWidth;
+			tmpPanelEl.style.width = tmpNewWidth + 'px';
+		};
+
+		let tmpOnMouseUp = function()
+		{
+			tmpSelf._ParentFormEditor._PanelResizing = false;
+			document.removeEventListener('mousemove', tmpOnMouseMove);
+			document.removeEventListener('mouseup', tmpOnMouseUp);
+
+			// Persist the panel width preference
+			if (typeof localStorage !== 'undefined')
+			{
+				try
+				{
+					localStorage.setItem('pict-fe-panel-width', String(tmpSelf._ParentFormEditor._PanelWidth));
+				}
+				catch (pError)
+				{
+					// localStorage may throw in restrictive environments
+				}
+			}
+		};
+
+		document.addEventListener('mousemove', tmpOnMouseMove);
+		document.addEventListener('mouseup', tmpOnMouseUp);
+	}
+
+	/**
+	 * Switch the active tab in the properties panel.
+	 *
+	 * @param {string} pTabName - 'form', 'section', 'group', 'properties', 'options', or 'help'
+	 */
+	setPanelTab(pTabName)
+	{
+		if (pTabName === 'form' || pTabName === 'properties' || pTabName === 'section' || pTabName === 'group' || pTabName === 'options' || pTabName === 'help')
+		{
+			this._ParentFormEditor._PanelActiveTab = pTabName;
+			// Re-render only the panel content, not the entire visual editor
+			if (this._ParentFormEditor._PropertiesPanelView)
+			{
+				this._ParentFormEditor._PropertiesPanelView.renderPanel();
+			}
+		}
+	}
+
+	/**
+	 * Compute summary statistics about the form manifest.
+	 *
+	 * @returns {object} { Sections, Groups, Inputs, Descriptors }
+	 */
+	getFormStats()
+	{
+		let tmpManifest = this._ParentFormEditor._resolveManifestData();
+		let tmpStats =
+		{
+			Sections: 0,
+			Groups: 0,
+			Inputs: 0,
+			Descriptors: 0,
+			ReferenceManifests: 0,
+			TabularColumns: 0,
+			DataTypes: {},
+			InputTypes: {}
+		};
+
+		if (!tmpManifest)
+		{
+			return tmpStats;
+		}
+
+		if (Array.isArray(tmpManifest.Sections))
+		{
+			tmpStats.Sections = tmpManifest.Sections.length;
+			for (let i = 0; i < tmpManifest.Sections.length; i++)
+			{
+				let tmpSection = tmpManifest.Sections[i];
+				if (Array.isArray(tmpSection.Groups))
+				{
+					tmpStats.Groups += tmpSection.Groups.length;
+					for (let j = 0; j < tmpSection.Groups.length; j++)
+					{
+						let tmpGroup = tmpSection.Groups[j];
+						if (Array.isArray(tmpGroup.Rows))
+						{
+							for (let k = 0; k < tmpGroup.Rows.length; k++)
+							{
+								let tmpRow = tmpGroup.Rows[k];
+								if (Array.isArray(tmpRow.Inputs))
+								{
+									tmpStats.Inputs += tmpRow.Inputs.length;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+
+		if (tmpManifest.Descriptors && typeof tmpManifest.Descriptors === 'object')
+		{
+			let tmpDescriptorKeys = Object.keys(tmpManifest.Descriptors);
+			tmpStats.Descriptors = tmpDescriptorKeys.length;
+
+			// Build DataType and InputType histograms
+			for (let d = 0; d < tmpDescriptorKeys.length; d++)
+			{
+				let tmpDesc = tmpManifest.Descriptors[tmpDescriptorKeys[d]];
+				if (tmpDesc)
+				{
+					let tmpDataType = tmpDesc.DataType || 'String';
+					tmpStats.DataTypes[tmpDataType] = (tmpStats.DataTypes[tmpDataType] || 0) + 1;
+
+					if (tmpDesc.PictForm && tmpDesc.PictForm.InputType)
+					{
+						let tmpInputType = tmpDesc.PictForm.InputType;
+						tmpStats.InputTypes[tmpInputType] = (tmpStats.InputTypes[tmpInputType] || 0) + 1;
+					}
+				}
+			}
+		}
+
+		if (tmpManifest.ReferenceManifests && typeof tmpManifest.ReferenceManifests === 'object')
+		{
+			let tmpRefNames = Object.keys(tmpManifest.ReferenceManifests);
+			tmpStats.ReferenceManifests = tmpRefNames.length;
+			for (let r = 0; r < tmpRefNames.length; r++)
+			{
+				let tmpRefManifest = tmpManifest.ReferenceManifests[tmpRefNames[r]];
+				if (tmpRefManifest && tmpRefManifest.Descriptors && typeof tmpRefManifest.Descriptors === 'object')
+				{
+					tmpStats.TabularColumns += Object.keys(tmpRefManifest.Descriptors).length;
+				}
+			}
+		}
+
+		return tmpStats;
+	}
+
+	/**
+	 * Enumerate all inputs in the manifest with their indices and labels.
+	 *
+	 * @returns {Array} Array of { SectionIndex, GroupIndex, RowIndex, InputIndex, Address, Label, SectionName }
+	 */
+	getAllInputEntries()
+	{
+		let tmpManifest = this._ParentFormEditor._resolveManifestData();
+		let tmpEntries = [];
+
+		if (!tmpManifest || !Array.isArray(tmpManifest.Sections))
+		{
+			return tmpEntries;
+		}
+
+		for (let s = 0; s < tmpManifest.Sections.length; s++)
+		{
+			let tmpSection = tmpManifest.Sections[s];
+			if (!Array.isArray(tmpSection.Groups))
+			{
+				continue;
+			}
+			for (let g = 0; g < tmpSection.Groups.length; g++)
+			{
+				let tmpGroup = tmpSection.Groups[g];
+				let tmpGroupLayout = tmpGroup.Layout || 'Record';
+
+				// Record layout: enumerate rows and inputs
+				if (tmpGroupLayout === 'Record' && Array.isArray(tmpGroup.Rows))
+				{
+					for (let r = 0; r < tmpGroup.Rows.length; r++)
+					{
+						let tmpRow = tmpGroup.Rows[r];
+						if (!Array.isArray(tmpRow.Inputs))
+						{
+							continue;
+						}
+						for (let i = 0; i < tmpRow.Inputs.length; i++)
+						{
+							let tmpAddress = tmpRow.Inputs[i];
+							let tmpDescriptor = (tmpManifest.Descriptors && tmpManifest.Descriptors[tmpAddress]) ? tmpManifest.Descriptors[tmpAddress] : null;
+							let tmpLabel = tmpDescriptor ? (tmpDescriptor.Name || tmpDescriptor.Hash || tmpAddress) : tmpAddress;
+							let tmpHash = tmpDescriptor ? (tmpDescriptor.Hash || '') : '';
+							let tmpDataType = tmpDescriptor ? (tmpDescriptor.DataType || '') : '';
+
+							tmpEntries.push(
+							{
+								SectionIndex: s,
+								GroupIndex: g,
+								RowIndex: r,
+								InputIndex: i,
+								Address: tmpAddress,
+								Hash: tmpHash,
+								Label: tmpLabel,
+								DataType: tmpDataType,
+								SectionName: tmpSection.Name || tmpSection.Hash || ('Section ' + (s + 1)),
+								GroupName: tmpGroup.Name || tmpGroup.Hash || ('Group ' + (g + 1)),
+								RowNumber: r + 1
+							});
+						}
+					}
+				}
+				// Tabular / RecordSet: enumerate submanifest columns
+				else if ((tmpGroupLayout === 'Tabular' || tmpGroupLayout === 'RecordSet') && tmpGroup.RecordManifest)
+				{
+					let tmpRefManifest = this._ParentFormEditor._ManifestOpsProvider._resolveReferenceManifest(tmpGroup.RecordManifest);
+					if (tmpRefManifest && tmpRefManifest.Descriptors && typeof tmpRefManifest.Descriptors === 'object')
+					{
+						let tmpColKeys = Object.keys(tmpRefManifest.Descriptors);
+						for (let c = 0; c < tmpColKeys.length; c++)
+						{
+							let tmpColDescriptor = tmpRefManifest.Descriptors[tmpColKeys[c]];
+							let tmpLabel = tmpColDescriptor ? (tmpColDescriptor.Name || tmpColDescriptor.Hash || tmpColKeys[c]) : tmpColKeys[c];
+							let tmpHash = tmpColDescriptor ? (tmpColDescriptor.Hash || '') : '';
+							let tmpDataType = tmpColDescriptor ? (tmpColDescriptor.DataType || '') : '';
+
+							tmpEntries.push(
+							{
+								SectionIndex: s,
+								GroupIndex: g,
+								Address: tmpColKeys[c],
+								Hash: tmpHash,
+								Label: tmpLabel,
+								DataType: tmpDataType,
+								SectionName: tmpSection.Name || tmpSection.Hash || ('Section ' + (s + 1)),
+								GroupName: tmpGroup.Name || tmpGroup.Hash || ('Group ' + (g + 1)),
+								IsTabular: true
+							});
+						}
+					}
+				}
+			}
+		}
+
+		return tmpEntries;
+	}
+
+	/**
+	 * Scroll a specific input card into view in the visual editor.
+	 *
+	 * @param {number} pSectionIndex
+	 * @param {number} pGroupIndex
+	 * @param {number} pRowIndex
+	 * @param {number} pInputIndex
+	 */
+	scrollToInput(pSectionIndex, pGroupIndex, pRowIndex, pInputIndex)
+	{
+		if (typeof document === 'undefined')
+		{
+			return;
+		}
+
+		let tmpInputId = `FormEditor-Input-${this._ParentFormEditor.Hash}-${pSectionIndex}-${pGroupIndex}-${pRowIndex}-${pInputIndex}`;
+		let tmpElement = document.getElementById(tmpInputId);
+
+		if (tmpElement)
+		{
+			tmpElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+		}
+	}
+
+	/**
+	 * Align the properties panel vertically with the currently selected input
+	 * or tabular column.  Also scrolls the selected element into view in the
+	 * main content area if it is not already visible.
+	 *
+	 * Should be called after renderVisualEditor() inside a setTimeout so the
+	 * browser has computed layout before we measure positions.
+	 */
+	_alignPanelToSelection()
+	{
+		// No-op: the properties panel now has a fixed header and tab bar with
+		// independently scrolling tab content.  The previous approach of adding
+		// paddingTop to align the panel with the selected input caused the panel
+		// to jump.  The searchable selector dropdowns provide easy navigation.
+	}
+
+	_updateCodeEditor()
+	{
+		let tmpManifest = this._ParentFormEditor._resolveManifestData();
+		let tmpJSON = JSON.stringify(tmpManifest, null, '\t');
+
+		if (this._ParentFormEditor._CodeEditorView)
+		{
+			if (this._ParentFormEditor._CodeEditorView.codeJar)
+			{
+				// Code editor already initialized — just update the code
+				this._ParentFormEditor._CodeEditorView.setCode(tmpJSON);
+			}
+			else
+			{
+				// First time switching to JSON tab — render the code editor
+				this._ParentFormEditor._CodeEditorView.render();
+				// After render, setCode with current manifest
+				if (this._ParentFormEditor._CodeEditorView.codeJar)
+				{
+					this._ParentFormEditor._CodeEditorView.setCode(tmpJSON);
+				}
+			}
+		}
+	}
+}
+
+module.exports = FormEditorUtilities;
+module.exports.default_configuration = {};