pict-section-formeditor 1.0.5 → 1.0.6

package/example_applications/form_editor/FormEditor-Example-Application.js

@@ -47,6 +47,10 @@ class FormEditorExampleApplication extends libPictApplication
 			ManifestDataAddress: 'AppData.FormConfig',
 			DefaultDestinationAddress: '#FormEditor-Container',
 			ActiveTab: 'visual',
+			ExtendedDescriptorProperties:
+			[
+				{ Name: 'Units', Address: 'PictForm.Units', DataType: 'String', Description: 'Unit of measure (e.g. kg, lbs, meters)' }
+			],
 			Renderables:
 			[
 				{

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-formeditor",
-    "version": "1.0.5",
+    "version": "1.0.6",
     "description": "Pict visual editor for pict-section-form configurations",
     "main": "source/Pict-Section-FormEditor.js",
     "scripts": {
@@ -26,13 +26,13 @@
     "dependencies": {
         "pict-section-code": "^1.0.2",
         "pict-section-content": "^0.0.6",
-        "pict-section-form": "^1.0.189",
+        "pict-section-form": "^1.0.190",
         "pict-section-markdowneditor": "^1.0.0",
         "pict-section-objecteditor": "^1.0.0",
         "pict-view": "^1.0.66"
     },
     "devDependencies": {
-        "pict": "^1.0.350",
+        "pict": "^1.0.351",
         "quackage": "^1.0.56"
     },
     "mocha": {

package/source/Pict-Section-FormEditor-DefaultConfiguration.js

@@ -13,6 +13,24 @@ module.exports = (
 	// Which tab is active by default: 'visual', 'objecteditor', 'json'
 	ActiveTab: 'visual',
 
+	// Extended descriptor properties to display in the Input properties panel.
+	// Each entry defines a custom field that maps to a dot-notation address
+	// within the Descriptor object (e.g. 'PictForm.Units' for Descriptor.PictForm.Units).
+	//
+	// Example:
+	// [
+	//     { Name: 'Units', Address: 'PictForm.Units', DataType: 'String' },
+	//     { Name: 'Extra Data', Address: 'ExtraData', DataType: 'String' },
+	//     { Name: 'Entity', Address: 'PictForm.Configuration.Entity', DataType: 'String' }
+	// ]
+	//
+	// Each entry supports:
+	//   Name        - Display label in the properties panel
+	//   Address     - Dot-notation path relative to the Descriptor (required)
+	//   DataType    - 'String' (default), 'Number', or 'Boolean'
+	//   Description - Optional tooltip / placeholder text
+	ExtendedDescriptorProperties: [],
+
 	CSS: /*css*/`
 .pict-formeditor
 {
@@ -3397,6 +3415,48 @@ module.exports = (
 	line-height: 1.5;
 }
 
+/* ---- Export Buttons ---- */
+.pict-fe-export-buttons
+{
+	display: flex;
+	gap: 10px;
+	flex-wrap: wrap;
+}
+.pict-fe-export-btn
+{
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 8px 16px;
+	border: 1px solid #D4C4A8;
+	border-radius: 6px;
+	background: #FDFCFA;
+	color: #3D3229;
+	font-size: 13px;
+	font-weight: 600;
+	cursor: pointer;
+	transition: border-color 0.15s, background 0.15s;
+}
+.pict-fe-export-btn:hover
+{
+	border-color: #9E6B47;
+	background: #FAF5EE;
+}
+.pict-fe-export-btn:active
+{
+	background: #F3EAE0;
+}
+.pict-fe-export-btn svg
+{
+	flex-shrink: 0;
+}
+.pict-fe-import-export-divider
+{
+	border: none;
+	border-top: 1px solid #E8E0D4;
+	margin: 4px 0;
+}
+
 /* ---- Toast Notifications ---- */
 .pict-fe-toast-container
 {

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

@@ -729,6 +729,15 @@ class PictProviderFormEditorIconography
 				'<circle cx="9" cy="18" r="' + tmpR + '" fill="currentColor"/>' +
 				'<circle cx="15" cy="18" r="' + tmpR + '" fill="currentColor"/>');
 		};
+
+		// Download — downward arrow into a tray (uses currentColor)
+		this._Icons.Action['Download'] = function(pSize, pColors, pSW)
+		{
+			return _svg(pSize,
+				'<path d="M12 3 L12 15" stroke="currentColor" stroke-width="' + pSW + '"/>' +
+				'<path d="M8 11 L12 15 L16 11" stroke="currentColor" stroke-width="' + pSW + '" fill="none"/>' +
+				'<path d="M4 17 L4 20 L20 20 L20 17" stroke="currentColor" stroke-width="' + pSW + '" fill="none"/>');
+		};
 	}
 
 	/* ======================================================================== */

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

@@ -605,6 +605,25 @@ class FormEditorRendering extends libPictProvider
 		let tmpHTML = '';
 
 		tmpHTML += '<div class="pict-fe-import-container">';
+
+		// Export section
+		tmpHTML += '<h3 class="pict-fe-import-title">Export Form Configuration</h3>';
+		tmpHTML += '<p class="pict-fe-import-description">Download the current form configuration as a JSON manifest or CSV spreadsheet.</p>';
+		tmpHTML += '<div class="pict-fe-export-buttons">';
+		tmpHTML += `<button class="pict-fe-export-btn" onclick="${tmpViewRef}.exportJSON()">`;
+		tmpHTML += `${tmpParent._IconographyProvider.getIcon('Action', 'Download', 18)}`;
+		tmpHTML += '<span>Export JSON</span>';
+		tmpHTML += '</button>';
+		tmpHTML += `<button class="pict-fe-export-btn" onclick="${tmpViewRef}.exportCSV()">`;
+		tmpHTML += `${tmpParent._IconographyProvider.getIcon('Action', 'Download', 18)}`;
+		tmpHTML += '<span>Export CSV</span>';
+		tmpHTML += '</button>';
+		tmpHTML += '</div>';
+
+		// Divider
+		tmpHTML += '<hr class="pict-fe-import-export-divider" />';
+
+		// Import section
 		tmpHTML += '<h3 class="pict-fe-import-title">Import Form Configuration</h3>';
 		tmpHTML += '<p class="pict-fe-import-description">Drop a CSV or JSON file below to load a form configuration. CSV files are processed through ManifestFactory. JSON files are loaded directly as manifests. If the file contains multiple forms, the first will be loaded and the rest will be available in the Load Configuration selector.</p>';
 

package/source/views/PictView-FormEditor-InlineEditing.js

@@ -47,12 +47,15 @@ class PictViewFormEditorInlineEditing extends libPictView
 		// Replace the span with an inline editor
 		let tmpEditorHTML = '';
 
+		// Build the commit call referencing the inline editing child view
+		let tmpInlineRef = `${tmpViewRef}._InlineEditingView`;
+
 		if (pProperty === 'Layout')
 		{
 			// Layout uses a select dropdown
 			// onclick stopPropagation prevents the parent span's onclick from re-calling beginEditProperty
 			let tmpLayouts = ['Record', 'Tabular', 'RecordSet'];
-			let tmpCommitCall = `${tmpViewRef}.commitEditProperty('${pType}', ${pSectionIndex}, ${pGroupIndex}, '${pProperty}')`;
+			let tmpCommitCall = `${tmpInlineRef}.commitEditProperty('${pType}', ${pSectionIndex}, ${pGroupIndex}, '${pProperty}')`;
 			tmpEditorHTML += `<select class="pict-fe-inline-edit-select" id="${tmpElementId}-Input" onclick="event.stopPropagation()" onchange="${tmpCommitCall}" onblur="setTimeout(function(){${tmpCommitCall}},150)" onkeydown="if(event.key==='Escape'){this.dataset.cancelled='true';this.blur();}">`;
 			for (let i = 0; i < tmpLayouts.length; i++)
 			{
@@ -66,7 +69,7 @@ class PictViewFormEditorInlineEditing extends libPictView
 			// Name and Hash use a text input
 			// onclick stopPropagation prevents the parent span's onclick from re-calling beginEditProperty
 			let tmpHashClass = (pProperty === 'Hash') ? ' pict-fe-inline-edit-hash' : '';
-			tmpEditorHTML += `<input class="pict-fe-inline-edit-input${tmpHashClass}" id="${tmpElementId}-Input" type="text" value="${this._ParentFormEditor._UtilitiesProvider._escapeAttr(tmpCurrentValue)}" onclick="event.stopPropagation()" onblur="${tmpViewRef}.commitEditProperty('${pType}', ${pSectionIndex}, ${pGroupIndex}, '${pProperty}')" onkeydown="if(event.key==='Enter'){this.blur();}if(event.key==='Escape'){this.dataset.cancelled='true';this.blur();}" />`;
+			tmpEditorHTML += `<input class="pict-fe-inline-edit-input${tmpHashClass}" id="${tmpElementId}-Input" type="text" value="${this._ParentFormEditor._UtilitiesProvider._escapeAttr(tmpCurrentValue)}" onclick="event.stopPropagation()" onblur="${tmpInlineRef}.commitEditProperty('${pType}', ${pSectionIndex}, ${pGroupIndex}, '${pProperty}')" onkeydown="if(event.key==='Enter'){this.blur();}if(event.key==='Escape'){this.dataset.cancelled='true';this.blur();}" />`;
 		}
 
 		this.pict.ContentAssignment.assignContent(`#${tmpElementId}`, tmpEditorHTML);
@@ -224,7 +227,8 @@ class PictViewFormEditorInlineEditing extends libPictView
 			}
 		}
 
-		let tmpCommitCall = `${tmpViewRef}.commitEditInputDataType(${pSectionIndex}, ${pGroupIndex}, ${pRowIndex}, ${pInputIndex})`;
+		let tmpInlineRef = `${tmpViewRef}._InlineEditingView`;
+		let tmpCommitCall = `${tmpInlineRef}.commitEditInputDataType(${pSectionIndex}, ${pGroupIndex}, ${pRowIndex}, ${pInputIndex})`;
 		let tmpEditorHTML = `<select class="pict-fe-inline-edit-select" id="${tmpElementId}-Input" onclick="event.stopPropagation()" onchange="${tmpCommitCall}" onblur="setTimeout(function(){${tmpCommitCall}},150)" onkeydown="if(event.key==='Escape'){this.dataset.cancelled='true';this.blur();}">`;
 		for (let i = 0; i < this._ParentFormEditor._ManyfestDataTypes.length; i++)
 		{

package/source/views/PictView-FormEditor-PropertiesPanel.js

@@ -3024,6 +3024,9 @@ class PictViewFormEditorPropertiesPanel extends libPictView
 		tmpHTML += '<div class="pict-fe-props-section-divider"></div>';
 		tmpHTML += this._renderInputTypeProperties(tmpInputType, tmpDescriptor, tmpPanelViewRef);
 
+		// Extended descriptor properties (configured via options or programmatic API)
+		tmpHTML += this._renderExtendedDescriptorProperties(tmpDescriptor, tmpPanelViewRef);
+
 		// Solver assignment and references for this input
 		tmpHTML += this._renderInputSolverInfo(tmpInputHash);
 
@@ -3749,6 +3752,195 @@ class PictViewFormEditorPropertiesPanel extends libPictView
 		this._ParentFormEditor.renderVisualEditor();
 	}
 
+	/* -------------------------------------------------------------------------- */
+	/*          Extended Descriptor Properties                                    */
+	/* -------------------------------------------------------------------------- */
+
+	/**
+	 * Render extended descriptor properties defined via the
+	 * ExtendedDescriptorProperties configuration option or the
+	 * addExtendedDescriptorProperty() API.
+	 *
+	 * Each entry maps a display name to a dot-notation address within the
+	 * Descriptor object.  For example { Name: 'Units', Address: 'PictForm.Units' }
+	 * reads from and writes to Descriptor.PictForm.Units.
+	 *
+	 * @param {object} pDescriptor - The full Descriptor object for the selected input
+	 * @param {string} pPanelViewRef - The browser-accessible view reference string
+	 * @returns {string} HTML string
+	 */
+	_renderExtendedDescriptorProperties(pDescriptor, pPanelViewRef)
+	{
+		let tmpExtended = this._ParentFormEditor._ExtendedDescriptorProperties;
+		if (!tmpExtended || tmpExtended.length === 0)
+		{
+			return '';
+		}
+
+		let tmpHTML = '';
+		tmpHTML += '<div class="pict-fe-props-section-divider"></div>';
+		tmpHTML += '<div class="pict-fe-props-section-header">Extended Properties</div>';
+
+		for (let i = 0; i < tmpExtended.length; i++)
+		{
+			let tmpProp = tmpExtended[i];
+			let tmpCurrentValue = this._resolveDescriptorAddress(pDescriptor, tmpProp.Address);
+			let tmpDataType = tmpProp.DataType || 'String';
+			let tmpDescription = tmpProp.Description || '';
+			// Escape the address for safe embedding in an onclick attribute
+			let tmpEscapedAddress = this._escapeAttr(tmpProp.Address);
+
+			tmpHTML += '<div class="pict-fe-props-field">';
+			tmpHTML += `<div class="pict-fe-props-label" title="${this._escapeAttr(tmpDescription)}">${this._escapeHTML(tmpProp.Name)}</div>`;
+
+			if (tmpDataType === 'Boolean')
+			{
+				let tmpChecked = tmpCurrentValue ? ' checked' : '';
+				tmpHTML += '<label class="pict-fe-props-checkbox-label">';
+				tmpHTML += `<input type="checkbox" class="pict-fe-props-checkbox"${tmpChecked} onchange="${pPanelViewRef}.commitExtendedPropertyChange('${tmpEscapedAddress}', this.checked, 'Boolean')" />`;
+				if (tmpDescription)
+				{
+					tmpHTML += ` ${this._escapeHTML(tmpDescription)}`;
+				}
+				tmpHTML += '</label>';
+			}
+			else if (tmpDataType === 'Number')
+			{
+				let tmpDisplayValue = (typeof tmpCurrentValue === 'number') ? String(tmpCurrentValue) : '';
+				tmpHTML += `<input class="pict-fe-props-input" type="number" value="${this._escapeAttr(tmpDisplayValue)}" placeholder="${this._escapeAttr(tmpDescription)}" onchange="${pPanelViewRef}.commitExtendedPropertyChange('${tmpEscapedAddress}', this.value, 'Number')" />`;
+			}
+			else
+			{
+				let tmpDisplayValue = (typeof tmpCurrentValue === 'string') ? tmpCurrentValue : (tmpCurrentValue !== null && tmpCurrentValue !== undefined ? String(tmpCurrentValue) : '');
+				tmpHTML += `<input class="pict-fe-props-input" type="text" value="${this._escapeAttr(tmpDisplayValue)}" placeholder="${this._escapeAttr(tmpDescription)}" onchange="${pPanelViewRef}.commitExtendedPropertyChange('${tmpEscapedAddress}', this.value, 'String')" />`;
+			}
+
+			tmpHTML += '</div>';
+		}
+
+		return tmpHTML;
+	}
+
+	/**
+	 * Resolve a dot-notation address within a Descriptor object.
+	 *
+	 * @param {object} pDescriptor - The Descriptor object
+	 * @param {string} pAddress - Dot-notation path (e.g. 'PictForm.Units')
+	 * @returns {*} The resolved value, or undefined if not found
+	 */
+	_resolveDescriptorAddress(pDescriptor, pAddress)
+	{
+		if (!pDescriptor || typeof pAddress !== 'string')
+		{
+			return undefined;
+		}
+
+		let tmpSegments = pAddress.split('.');
+		let tmpCurrent = pDescriptor;
+
+		for (let i = 0; i < tmpSegments.length; i++)
+		{
+			if (tmpCurrent === null || tmpCurrent === undefined || typeof tmpCurrent !== 'object')
+			{
+				return undefined;
+			}
+			tmpCurrent = tmpCurrent[tmpSegments[i]];
+		}
+
+		return tmpCurrent;
+	}
+
+	/**
+	 * Set a value at a dot-notation address within a Descriptor object,
+	 * creating intermediate objects as needed.
+	 *
+	 * @param {object} pDescriptor - The Descriptor object
+	 * @param {string} pAddress - Dot-notation path (e.g. 'PictForm.Units')
+	 * @param {*} pValue - The value to set
+	 */
+	_setDescriptorAddress(pDescriptor, pAddress, pValue)
+	{
+		if (!pDescriptor || typeof pAddress !== 'string')
+		{
+			return;
+		}
+
+		let tmpSegments = pAddress.split('.');
+		let tmpCurrent = pDescriptor;
+
+		// Navigate to (and create) intermediate objects
+		for (let i = 0; i < tmpSegments.length - 1; i++)
+		{
+			if (!tmpCurrent.hasOwnProperty(tmpSegments[i]) || typeof tmpCurrent[tmpSegments[i]] !== 'object')
+			{
+				tmpCurrent[tmpSegments[i]] = {};
+			}
+			tmpCurrent = tmpCurrent[tmpSegments[i]];
+		}
+
+		let tmpFinalKey = tmpSegments[tmpSegments.length - 1];
+
+		if (pValue === undefined || pValue === null || pValue === '')
+		{
+			delete tmpCurrent[tmpFinalKey];
+		}
+		else
+		{
+			tmpCurrent[tmpFinalKey] = pValue;
+		}
+	}
+
+	/**
+	 * Commit a change to an extended descriptor property.
+	 *
+	 * @param {string} pAddress - Dot-notation path within the Descriptor (e.g. 'PictForm.Units')
+	 * @param {*} pValue - The new value from the form control
+	 * @param {string} pDataType - 'String', 'Number', or 'Boolean'
+	 */
+	commitExtendedPropertyChange(pAddress, pValue, pDataType)
+	{
+		if (!this._SelectedInput || !this._ParentFormEditor)
+		{
+			return;
+		}
+
+		let tmpResolved = this._resolveSelectedDescriptor();
+		if (!tmpResolved || !tmpResolved.Descriptor)
+		{
+			return;
+		}
+
+		let tmpFinalValue;
+
+		switch (pDataType)
+		{
+			case 'Boolean':
+				tmpFinalValue = !!pValue;
+				break;
+
+			case 'Number':
+			{
+				let tmpNumValue = parseFloat(pValue);
+				if (isNaN(tmpNumValue) || pValue === '')
+				{
+					tmpFinalValue = undefined;
+				}
+				else
+				{
+					tmpFinalValue = tmpNumValue;
+				}
+				break;
+			}
+
+			default: // String
+				tmpFinalValue = (typeof pValue === 'string' && pValue.length > 0) ? pValue : undefined;
+				break;
+		}
+
+		this._setDescriptorAddress(tmpResolved.Descriptor, pAddress, tmpFinalValue);
+		this._ParentFormEditor.renderVisualEditor();
+	}
+
 	/* -------------------------------------------------------------------------- */
 	/*          Options Tab                                                       */
 	/* -------------------------------------------------------------------------- */

package/source/views/PictView-FormEditor.js

@@ -16,6 +16,7 @@ const libChildPictManager = require('../providers/Pict-Provider-ChildPictManager
 const libPreviewCSS = require('../providers/Pict-Provider-PreviewCSS.js');
 const libFormEditorDocumentation = require('../providers/Pict-Provider-FormEditorDocumentation.js');
 const libManifestFactory = require('pict-section-form').ManifestFactory;
+const libManifestConversionToCSV = require('pict-section-form').ManifestConversionToCSV;
 
 class PictViewFormEditor extends libPictView
 {
@@ -44,6 +45,28 @@ class PictViewFormEditor extends libPictView
 		this._ContentEditorView = null;
 		this._ContentEditorContext = null;
 
+		// Extended descriptor properties for the Input properties panel.
+		// Populated from options.ExtendedDescriptorProperties and can be
+		// modified at runtime via addExtendedDescriptorProperty().
+		this._ExtendedDescriptorProperties = [];
+		if (Array.isArray(tmpOptions.ExtendedDescriptorProperties))
+		{
+			for (let i = 0; i < tmpOptions.ExtendedDescriptorProperties.length; i++)
+			{
+				let tmpProp = tmpOptions.ExtendedDescriptorProperties[i];
+				if (tmpProp && typeof tmpProp.Address === 'string' && tmpProp.Address.length > 0)
+				{
+					this._ExtendedDescriptorProperties.push(
+					{
+						Name: tmpProp.Name || tmpProp.Address,
+						Address: tmpProp.Address,
+						DataType: tmpProp.DataType || 'String',
+						Description: tmpProp.Description || ''
+					});
+				}
+			}
+		}
+
 		// Supported Manyfest DataTypes
 		this._ManyfestDataTypes =
 		[
@@ -108,7 +131,7 @@ class PictViewFormEditor extends libPictView
 		);
 		this._RenderingProvider._ParentFormEditor = this;
 
-		// Create the documentation provider for the embedded help system
+		// Create the documentation provider for the embedded help system.
 		let tmpDocumentationHash = `${pServiceHash || 'FormEditor'}-Documentation`;
 		this._DocumentationProvider = this.pict.addProvider(
 			tmpDocumentationHash,
@@ -208,6 +231,12 @@ class PictViewFormEditor extends libPictView
 			this.fable.addServiceType('ManifestFactory', libManifestFactory);
 		}
 
+		// Register ManifestConversionToCSV service type if not already present (needed for CSV export)
+		if (!this.fable.servicesMap.hasOwnProperty('ManifestConversionToCSV'))
+		{
+			this.fable.addServiceType('ManifestConversionToCSV', libManifestConversionToCSV);
+		}
+
 		// Ensure the manifest data address exists in AppData
 		let tmpManifest = this._resolveManifestData();
 		if (!tmpManifest)
@@ -951,6 +980,167 @@ class PictViewFormEditor extends libPictView
 		this.pict.ContentAssignment.assignContent(`#FormEditor-ImportStatus-${tmpHash}`, tmpHTML);
 	}
 
+	/* -------------------------------------------------------------------------- */
+	/*                     Code Section: Export (CSV / JSON)                       */
+	/* -------------------------------------------------------------------------- */
+
+	/**
+	 * Export the current manifest as a JSON file download.
+	 */
+	exportJSON()
+	{
+		let tmpManifest = this._resolveManifestData();
+		if (!tmpManifest)
+		{
+			this._showToast('error', 'No manifest data to export.');
+			return;
+		}
+
+		let tmpJSON = JSON.stringify(tmpManifest, null, '\t');
+		let tmpFileName = tmpManifest.Scope || tmpManifest.Form || 'manifest';
+		this._triggerFileDownload(tmpFileName + '.json', tmpJSON, 'application/json');
+		this._showToast('success', `Exported JSON: ${tmpFileName}.json`);
+	}
+
+	/**
+	 * Export the current manifest as a CSV file download.
+	 *
+	 * Uses ManifestConversionToCSV from pict-section-form to convert the
+	 * manifest to a tabular array, then formats as a CSV string.
+	 */
+	exportCSV()
+	{
+		let tmpManifest = this._resolveManifestData();
+		if (!tmpManifest)
+		{
+			this._showToast('error', 'No manifest data to export.');
+			return;
+		}
+
+		// Instantiate the conversion service without registering it globally
+		let tmpConverter = this.fable.instantiateServiceProviderWithoutRegistration('ManifestConversionToCSV', {}, `${this.UUID}-CSVExport`);
+
+		let tmpCSVDataArray = tmpConverter.createTabularArrayFromManifests(tmpManifest);
+
+		if (!tmpCSVDataArray || tmpCSVDataArray.length === 0)
+		{
+			this._showToast('error', 'Could not convert manifest to CSV.');
+			return;
+		}
+
+		// Convert the 2D array to a CSV string with proper escaping
+		let tmpCSVLines = [];
+		for (let i = 0; i < tmpCSVDataArray.length; i++)
+		{
+			let tmpRow = tmpCSVDataArray[i];
+			let tmpEscapedRow = [];
+			for (let j = 0; j < tmpRow.length; j++)
+			{
+				let tmpCell = tmpRow[j];
+				if ((typeof tmpCell === 'string') && ((tmpCell.indexOf(',') >= 0) || (tmpCell.indexOf('"') >= 0) || (tmpCell.indexOf('\n') >= 0)))
+				{
+					tmpEscapedRow.push('"' + tmpCell.replace(/"/g, '""') + '"');
+				}
+				else
+				{
+					tmpEscapedRow.push(tmpCell);
+				}
+			}
+			tmpCSVLines.push(tmpEscapedRow.join(','));
+		}
+		let tmpCSVString = tmpCSVLines.join('\n');
+
+		let tmpFileName = tmpManifest.Scope || tmpManifest.Form || 'manifest';
+		this._triggerFileDownload(tmpFileName + '.csv', tmpCSVString, 'text/csv');
+		this._showToast('success', `Exported CSV: ${tmpFileName}.csv`);
+	}
+
+	/**
+	 * Trigger a browser file download from an in-memory string.
+	 *
+	 * @param {string} pFileName - The suggested file name
+	 * @param {string} pContent - The file content
+	 * @param {string} pMimeType - MIME type for the blob
+	 */
+	_triggerFileDownload(pFileName, pContent, pMimeType)
+	{
+		if (typeof document === 'undefined')
+		{
+			return;
+		}
+
+		let tmpBlob = new Blob([pContent], { type: pMimeType });
+		let tmpURL = URL.createObjectURL(tmpBlob);
+
+		let tmpLink = document.createElement('a');
+		tmpLink.href = tmpURL;
+		tmpLink.download = pFileName;
+		tmpLink.style.display = 'none';
+		document.body.appendChild(tmpLink);
+		tmpLink.click();
+
+		// Clean up
+		document.body.removeChild(tmpLink);
+		URL.revokeObjectURL(tmpURL);
+	}
+
+	/* -------------------------------------------------------------------------- */
+	/*               Code Section: Extended Descriptor Properties                 */
+	/* -------------------------------------------------------------------------- */
+
+	/**
+	 * Add an extended descriptor property to the Input properties panel.
+	 *
+	 * @param {string} pAddress - Dot-notation path relative to the Descriptor (e.g. 'PictForm.Units')
+	 * @param {string} [pName] - Display label (defaults to the last segment of the address)
+	 * @param {string} [pDataType] - 'String' (default), 'Number', or 'Boolean'
+	 * @param {string} [pDescription] - Tooltip / placeholder text
+	 */
+	addExtendedDescriptorProperty(pAddress, pName, pDataType, pDescription)
+	{
+		if (typeof pAddress !== 'string' || pAddress.length === 0)
+		{
+			return;
+		}
+
+		// Avoid duplicates
+		for (let i = 0; i < this._ExtendedDescriptorProperties.length; i++)
+		{
+			if (this._ExtendedDescriptorProperties[i].Address === pAddress)
+			{
+				return;
+			}
+		}
+
+		let tmpSegments = pAddress.split('.');
+		let tmpDefaultName = tmpSegments[tmpSegments.length - 1];
+
+		this._ExtendedDescriptorProperties.push(
+		{
+			Name: pName || tmpDefaultName,
+			Address: pAddress,
+			DataType: pDataType || 'String',
+			Description: pDescription || ''
+		});
+	}
+
+	/**
+	 * Remove an extended descriptor property by address.
+	 *
+	 * @param {string} pAddress - Dot-notation path to remove
+	 */
+	removeExtendedDescriptorProperty(pAddress)
+	{
+		for (let i = 0; i < this._ExtendedDescriptorProperties.length; i++)
+		{
+			if (this._ExtendedDescriptorProperties[i].Address === pAddress)
+			{
+				this._ExtendedDescriptorProperties.splice(i, 1);
+				return;
+			}
+		}
+	}
+
 	/**
 	 * Show a floating toast notification inside the form editor.
 	 *