pict-section-flow 0.0.17 → 0.0.19

package/source/views/PictView-Flow-Toolbar.js

@@ -21,67 +21,152 @@ const _DefaultConfiguration =
 	[
 		{
 			Hash: 'Flow-Toolbar-Template',
+			// Inline onclick handlers route to the toolbar via the FlowView
+			// (the flow toolbar is reachable as ._ToolbarView from the
+			// registered FlowView). Each button is responsible for its own
+			// action — no event delegation.
 			Template: /*html*/`
 <div class="pict-flow-toolbar" id="Flow-Toolbar-Bar-{~D:Record.FlowViewIdentifier~}">
 	<div class="pict-flow-toolbar-group">
-		<button class="pict-flow-toolbar-btn" data-flow-action="add-node" id="Flow-Toolbar-AddNode-{~D:Record.FlowViewIdentifier~}" title="Add Node">
+		<button class="pict-flow-toolbar-btn" data-flow-action="add-node" id="Flow-Toolbar-AddNode-{~D:Record.FlowViewIdentifier~}" title="Add Node"
+			onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._handleToolbarAction('add-node')">
 			<span class="pict-flow-toolbar-btn-icon" id="Flow-Toolbar-Icon-plus-{~D:Record.FlowViewIdentifier~}"></span>
 			<span class="pict-flow-toolbar-btn-text">Node</span>
 		</button>
-		<button class="pict-flow-toolbar-btn" data-flow-action="cards-popup" id="Flow-Toolbar-Cards-{~D:Record.FlowViewIdentifier~}" title="Card Palette">
+		<button class="pict-flow-toolbar-btn" data-flow-action="cards-popup" id="Flow-Toolbar-Cards-{~D:Record.FlowViewIdentifier~}" title="Card Palette"
+			onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._handleToolbarAction('cards-popup')">
 			<span class="pict-flow-toolbar-btn-icon" id="Flow-Toolbar-Icon-cards-{~D:Record.FlowViewIdentifier~}"></span>
 			<span class="pict-flow-toolbar-btn-text">Cards</span>
 			<span class="pict-flow-toolbar-btn-chevron" id="Flow-Toolbar-CardsChevron-{~D:Record.FlowViewIdentifier~}"></span>
 		</button>
-		<button class="pict-flow-toolbar-btn" data-flow-action="delete-selected" title="Delete Node">
+		<button class="pict-flow-toolbar-btn" data-flow-action="delete-selected" title="Delete Node"
+			onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._handleToolbarAction('delete-selected')">
 			<span class="pict-flow-toolbar-btn-icon" id="Flow-Toolbar-Icon-trash-{~D:Record.FlowViewIdentifier~}"></span>
 		</button>
 	</div>
 	<div class="pict-flow-toolbar-group">
-		<button class="pict-flow-toolbar-btn" data-flow-action="layout-popup" id="Flow-Toolbar-Layout-{~D:Record.FlowViewIdentifier~}" title="Manage Layouts">
+		<button class="pict-flow-toolbar-btn" data-flow-action="layout-popup" id="Flow-Toolbar-Layout-{~D:Record.FlowViewIdentifier~}" title="Manage saved layouts"
+			onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._handleToolbarAction('layout-popup')">
 			<span class="pict-flow-toolbar-btn-icon" id="Flow-Toolbar-Icon-layout-{~D:Record.FlowViewIdentifier~}"></span>
-			<span class="pict-flow-toolbar-btn-text">Layout</span>
+			<span class="pict-flow-toolbar-btn-text">Layouts</span>
 			<span class="pict-flow-toolbar-btn-chevron" id="Flow-Toolbar-LayoutChevron-{~D:Record.FlowViewIdentifier~}"></span>
 		</button>
-		<button class="pict-flow-toolbar-btn" data-flow-action="auto-layout" title="Auto Layout">
-			<span class="pict-flow-toolbar-btn-icon" id="Flow-Toolbar-Icon-auto-layout-{~D:Record.FlowViewIdentifier~}"></span>
-			<span class="pict-flow-toolbar-btn-text">Auto Layout</span>
-		</button>
+		<div class="pict-flow-toolbar-btn-split" id="Flow-Toolbar-Auto-{~D:Record.FlowViewIdentifier~}">
+			<button class="pict-flow-toolbar-btn pict-flow-toolbar-btn-split-main" data-flow-action="apply-current-layout" title="Apply current layout algorithm"
+				onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._handleToolbarAction('apply-current-layout')">
+				<span class="pict-flow-toolbar-btn-icon" id="Flow-Toolbar-Icon-auto-{~D:Record.FlowViewIdentifier~}"></span>
+				<span class="pict-flow-toolbar-btn-text">Auto</span>
+			</button>
+			<button class="pict-flow-toolbar-btn pict-flow-toolbar-btn-split-chevron" data-flow-action="layout-algorithm-popup" title="Choose layout algorithm"
+				onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._handleToolbarAction('layout-algorithm-popup')">
+				<span class="pict-flow-toolbar-btn-chevron" id="Flow-Toolbar-AutoChevron-{~D:Record.FlowViewIdentifier~}"></span>
+			</button>
+		</div>
 	</div>
 	<div class="pict-flow-toolbar-group">
-		<button class="pict-flow-toolbar-btn" data-flow-action="zoom-in" title="Zoom In">
+		<button class="pict-flow-toolbar-btn" data-flow-action="zoom-in" title="Zoom In"
+			onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._handleToolbarAction('zoom-in')">
 			<span class="pict-flow-toolbar-btn-icon" id="Flow-Toolbar-Icon-zoom-in-{~D:Record.FlowViewIdentifier~}"></span>
 		</button>
-		<button class="pict-flow-toolbar-btn" data-flow-action="zoom-out" title="Zoom Out">
+		<button class="pict-flow-toolbar-btn" data-flow-action="zoom-out" title="Zoom Out"
+			onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._handleToolbarAction('zoom-out')">
 			<span class="pict-flow-toolbar-btn-icon" id="Flow-Toolbar-Icon-zoom-out-{~D:Record.FlowViewIdentifier~}"></span>
 		</button>
-		<button class="pict-flow-toolbar-btn" data-flow-action="zoom-fit" title="Fit to View">
+		<button class="pict-flow-toolbar-btn" data-flow-action="zoom-fit" title="Fit to View"
+			onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._handleToolbarAction('zoom-fit')">
 			<span class="pict-flow-toolbar-btn-icon" id="Flow-Toolbar-Icon-zoom-fit-{~D:Record.FlowViewIdentifier~}"></span>
 		</button>
 	</div>
 	<div class="pict-flow-toolbar-group pict-flow-toolbar-right">
-		<button class="pict-flow-toolbar-btn" data-flow-action="settings-popup" id="Flow-Toolbar-Settings-{~D:Record.FlowViewIdentifier~}" title="Theme Settings">
+		<button class="pict-flow-toolbar-btn" data-flow-action="settings-popup" id="Flow-Toolbar-Settings-{~D:Record.FlowViewIdentifier~}" title="Theme Settings"
+			onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._handleToolbarAction('settings-popup')">
 			<span class="pict-flow-toolbar-btn-icon" id="Flow-Toolbar-Icon-settings-{~D:Record.FlowViewIdentifier~}"></span>
 		</button>
-		<button class="pict-flow-toolbar-btn" data-flow-action="fullscreen" id="Flow-Toolbar-Fullscreen-{~D:Record.FlowViewIdentifier~}" title="Toggle Fullscreen">
+		<button class="pict-flow-toolbar-btn" data-flow-action="fullscreen" id="Flow-Toolbar-Fullscreen-{~D:Record.FlowViewIdentifier~}" title="Toggle Fullscreen"
+			onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._handleToolbarAction('fullscreen')">
 			<span class="pict-flow-toolbar-btn-icon" id="Flow-Toolbar-Fullscreen-Icon-{~D:Record.FlowViewIdentifier~}"></span>
 		</button>
-		<button class="pict-flow-toolbar-btn" data-flow-action="toggle-floating" title="Float">
+		<button class="pict-flow-toolbar-btn" data-flow-action="toggle-floating" title="Float"
+			onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._handleToolbarAction('toggle-floating')">
 			<span class="pict-flow-toolbar-btn-icon" id="Flow-Toolbar-Icon-grip-{~D:Record.FlowViewIdentifier~}"></span>
 		</button>
-		<button class="pict-flow-toolbar-btn" data-flow-action="collapse-toolbar" title="Collapse Toolbar">
+		<button class="pict-flow-toolbar-btn" data-flow-action="collapse-toolbar" title="Collapse Toolbar"
+			onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._handleToolbarAction('collapse-toolbar')">
 			<span class="pict-flow-toolbar-btn-icon" id="Flow-Toolbar-Icon-collapse-{~D:Record.FlowViewIdentifier~}"></span>
 		</button>
 	</div>
 </div>
 <div class="pict-flow-toolbar-collapsed" id="Flow-Toolbar-Collapsed-{~D:Record.FlowViewIdentifier~}">
-	<button class="pict-flow-toolbar-expand-btn" data-flow-action="expand-toolbar" title="Expand Toolbar" id="Flow-Toolbar-ExpandBtn-{~D:Record.FlowViewIdentifier~}">
+	<button class="pict-flow-toolbar-expand-btn" data-flow-action="expand-toolbar" title="Expand Toolbar" id="Flow-Toolbar-ExpandBtn-{~D:Record.FlowViewIdentifier~}"
+		onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._handleToolbarAction('expand-toolbar')">
 		<span id="Flow-Toolbar-Icon-expand-{~D:Record.FlowViewIdentifier~}"></span>
 	</button>
 </div>
 <div class="pict-flow-toolbar-popup-anchor" id="Flow-Toolbar-PopupAnchor-{~D:Record.FlowViewIdentifier~}">
 </div>
 `
+		},
+		{
+			Hash: 'Flow-AddNode-List',
+			// Iteration source is `Record.Rows` — the outer call sets the
+			// FlowViewIdentifier on each row so inline handlers resolve their
+			// owning view independently. Nested {~D:~} inside {~TS:~}
+			// addresses isn't supported by the template engine, so we keep
+			// addresses static.
+			Template: '{~TS:Flow-AddNode-Row:Record.Rows~}'
+		},
+		{
+			Hash: 'Flow-AddNode-Row',
+			Template: '<div class="pict-flow-popup-list-item" data-node-type="{~D:Record.NodeType~}"'
+				+ ' onclick="_Pict.views[\'{~D:Record.FlowViewIdentifier~}\']._ToolbarView._addNodeFromPopup(this.getAttribute(\'data-node-type\'))">'
+				+ '<span class="pict-flow-popup-list-item-icon">{~D:Record.IconHTML~}</span>'
+				+ '<span class="pict-flow-popup-list-item-label">{~D:Record.Label~}</span>'
+				+ '{~NE:Record.Code^<span class="pict-flow-popup-list-item-code">{~D:Record.Code~}</span>~}'
+				+ '</div>'
+		},
+		{
+			Hash: 'Flow-Cards-List',
+			Template: '{~TS:Flow-Cards-Category:Record.Categories~}'
+		},
+		{
+			Hash: 'Flow-Cards-Category',
+			Template: '<div class="pict-flow-palette-category" style="padding:0.35em 0.5em;">'
+				+ '<div class="pict-flow-palette-category-label">{~D:Record.Name~}</div>'
+				+ '<div class="pict-flow-palette-cards">{~TS:Flow-Cards-Card:Record.Cards~}</div>'
+				+ '</div>'
+		},
+		{
+			Hash: 'Flow-Cards-Card',
+			Template: '<div class="pict-flow-palette-card{~D:Record.DisabledClass~}" data-card-type="{~D:Record.CardType~}" title="{~D:Record.Tooltip~}"'
+				+ ' onclick="_Pict.views[\'{~D:Record.FlowViewIdentifier~}\']._ToolbarView._addCardFromPopup(this.getAttribute(\'data-card-type\'))">'
+				+ '{~NE:Record.IconHTML^<span class="pict-flow-palette-card-icon">{~D:Record.IconHTML~}</span>~}'
+				+ '{~NE:Record.IconEmoji^<span class="pict-flow-palette-card-icon">{~D:Record.IconEmoji~}</span>~}'
+				+ '{~NE:Record.SwatchColor^<span class="pict-flow-palette-card-swatch" style="background-color: {~D:Record.SwatchColor~};"></span>~}'
+				+ '<span class="pict-flow-palette-card-title">{~D:Record.Label~}</span>'
+				+ '{~NE:Record.Code^<span class="pict-flow-palette-card-code">{~D:Record.Code~}</span>~}'
+				+ '</div>'
+		},
+		{
+			Hash: 'Flow-Layout-List',
+			Template: '{~TS:Flow-Layout-Row:Record.Rows~}'
+		},
+		{
+			Hash: 'Flow-Layout-Row',
+			Template: '<div class="pict-flow-popup-layout-row" data-layout-hash="{~D:Record.LayoutHash~}"'
+				+ ' onclick="_Pict.views[\'{~D:Record.FlowViewIdentifier~}\']._ToolbarView._restoreLayoutFromPopup(\'{~D:Record.LayoutHash~}\', event)">'
+				+ '<span class="pict-flow-popup-layout-name">{~D:Record.Name~}</span>'
+				+ '<button class="pict-flow-popup-layout-delete" title="Delete layout"'
+				+ ' onclick="_Pict.views[\'{~D:Record.FlowViewIdentifier~}\']._ToolbarView._deleteLayoutFromPopup(\'{~D:Record.LayoutHash~}\', event)">'
+				+ '{~D:Record.DeleteIconHTML~}</button>'
+				+ '</div>'
+		},
+		{
+			Hash: 'Flow-Layout-OptionList',
+			Template: '{~TS:Flow-Layout-Option:Record.Options~}'
+		},
+		{
+			Hash: 'Flow-Layout-Option',
+			Template: '<option value="{~D:Record.Value~}"{~D:Record.SelectedAttr~}>{~D:Record.Label~}</option>'
 		}
 	],
 
@@ -113,6 +198,16 @@ class PictViewFlowToolbar extends libPictView
 		this._FloatingPosition = { X: 80, Y: 80 };
 		this._DocumentClickHandler = null;
 		this._FloatingToolbarView = null;
+
+		// Layout-algorithm parameter form (pict-section-form metacontroller).
+		// Lazily created on first popup open; null until then. Falls back to
+		// hand-rolled inputs when PictFormMetacontroller is not registered.
+		this._LayoutFormMetacontroller = null;
+		this._LayoutFormHostID = null;
+		// Whether the parameter form is expanded inside the popup. Persists
+		// across popup opens so a user who collapsed it doesn't have to
+		// re-collapse on every reopen. Defaults to expanded.
+		this._LayoutFormExpanded = true;
 	}
 
 	render(pRenderableHash, pRenderDestinationAddress, pTemplateRecordAddress)
@@ -126,33 +221,8 @@ class PictViewFlowToolbar extends libPictView
 	{
 		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
 
-		// Bind toolbar button events via event delegation
-		let tmpToolbarBar = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-Bar-${tmpFlowViewIdentifier}`);
-		if (tmpToolbarBar.length > 0)
-		{
-			tmpToolbarBar[0].addEventListener('click', (pEvent) =>
-			{
-				let tmpTarget = pEvent.target;
-				if (!tmpTarget) return;
-
-				// Walk up to find the button with the action
-				let tmpButton = tmpTarget.closest('[data-flow-action]');
-				if (!tmpButton) return;
-
-				let tmpAction = tmpButton.getAttribute('data-flow-action');
-				this._handleToolbarAction(tmpAction);
-			});
-		}
-
-		// Bind expand button click (it's outside the main toolbar bar)
-		let tmpExpandBtn = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-ExpandBtn-${tmpFlowViewIdentifier}`);
-		if (tmpExpandBtn.length > 0)
-		{
-			tmpExpandBtn[0].addEventListener('click', () =>
-			{
-				this._setToolbarMode('docked');
-			});
-		}
+		// Click handlers live on each button as inline `onclick` attributes
+		// in Flow-Toolbar-Template — they call _handleToolbarAction directly.
 
 		// Populate SVG icons for toolbar buttons
 		this._populateToolbarIcons();
@@ -174,6 +244,14 @@ class PictViewFlowToolbar extends libPictView
 				tmpCardsBtn[0].remove();
 			}
 		}
+		if (this.options.EnableLayoutMenu === false)
+		{
+			let tmpAutoBtn = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-Auto-${tmpFlowViewIdentifier}`);
+			if (tmpAutoBtn.length > 0)
+			{
+				tmpAutoBtn[0].remove();
+			}
+		}
 
 		return super.onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent);
 	}
@@ -198,7 +276,7 @@ class PictViewFlowToolbar extends libPictView
 			'zoom-in': 'zoom-in',
 			'zoom-out': 'zoom-out',
 			'zoom-fit': 'zoom-fit',
-			'auto-layout': 'auto-layout',
+			'auto': 'auto-layout',
 			'cards': 'cards',
 			'layout': 'layout',
 			'settings': 'settings',
@@ -237,6 +315,12 @@ class PictViewFlowToolbar extends libPictView
 		{
 			tmpLayoutChevron[0].innerHTML = tmpIconProvider.getIconSVGMarkup('chevron-down', 8);
 		}
+
+		let tmpAutoChevron = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-AutoChevron-${tmpFlowViewIdentifier}`);
+		if (tmpAutoChevron.length > 0)
+		{
+			tmpAutoChevron[0].innerHTML = tmpIconProvider.getIconSVGMarkup('chevron-down', 8);
+		}
 	}
 
 	// ── Popup Management ──────────────────────────────────────────────────
@@ -278,6 +362,9 @@ class PictViewFlowToolbar extends libPictView
 			case 'layout':
 				this._buildLayoutPopup(tmpPopup);
 				break;
+			case 'layout-algorithm':
+				this._buildLayoutAlgorithmPopup(tmpPopup);
+				break;
 			case 'settings':
 				this._buildSettingsPopup(tmpPopup);
 				break;
@@ -366,6 +453,9 @@ class PictViewFlowToolbar extends libPictView
 			case 'layout':
 				tmpTriggerSelector = `#Flow-Toolbar-Layout-${tmpFlowViewIdentifier}`;
 				break;
+			case 'layout-algorithm':
+				tmpTriggerSelector = `#Flow-Toolbar-Auto-${tmpFlowViewIdentifier}`;
+				break;
 			case 'settings':
 				tmpTriggerSelector = `#Flow-Toolbar-Settings-${tmpFlowViewIdentifier}`;
 				break;
@@ -390,212 +480,180 @@ class PictViewFlowToolbar extends libPictView
 	// ── Add Node Popup ────────────────────────────────────────────────────
 
 	/**
-	 * Build the searchable Add Node popup content.
+	 * Build the searchable Add Node popup content via templates with inline
+	 * handlers. Search input fires `_filterNodeList` which re-renders the
+	 * list section in place.
+	 *
 	 * @param {HTMLElement} pContainer
 	 */
 	_buildAddNodePopup(pContainer)
 	{
-		// Search wrapper
-		let tmpSearchWrapper = document.createElement('div');
-		tmpSearchWrapper.className = 'pict-flow-popup-search-wrapper';
-
-		let tmpSearchIcon = document.createElement('span');
-		tmpSearchIcon.className = 'pict-flow-popup-search-icon';
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
 		let tmpIconProvider = this._FlowView ? this._FlowView._IconProvider : null;
-		if (tmpIconProvider)
-		{
-			tmpSearchIcon.innerHTML = tmpIconProvider.getIconSVGMarkup('search', 12);
-		}
-		tmpSearchWrapper.appendChild(tmpSearchIcon);
-
-		let tmpSearchInput = document.createElement('input');
-		tmpSearchInput.className = 'pict-flow-popup-search';
-		tmpSearchInput.setAttribute('type', 'text');
-		tmpSearchInput.setAttribute('placeholder', 'Search node types...');
-		tmpSearchWrapper.appendChild(tmpSearchInput);
-		pContainer.appendChild(tmpSearchWrapper);
-
-		// Node list
-		let tmpListDiv = document.createElement('div');
-		tmpListDiv.className = 'pict-flow-popup-node-list';
-		pContainer.appendChild(tmpListDiv);
-
-		// Initial population
-		this._populateNodeList(tmpListDiv, '');
-
-		// Filter on input
-		tmpSearchInput.addEventListener('input', () =>
-		{
-			this._populateNodeList(tmpListDiv, tmpSearchInput.value);
-		});
+		let tmpSearchIconHTML = tmpIconProvider ? tmpIconProvider.getIconSVGMarkup('search', 12) : '';
+
+		let tmpListID = `Flow-Toolbar-AddNodeList-${tmpFlowViewIdentifier}`;
+		let tmpSearchID = `Flow-Toolbar-AddNodeSearch-${tmpFlowViewIdentifier}`;
+
+		// Stage AppData and render the initial list HTML inline — the popup
+		// element isn't in the DOM yet, so we can't look it up via
+		// getElementById here. _filterNodeList handles updates after open.
+		let tmpInitialListHTML = this._renderNodeListHTML('');
+
+		this.pict.ContentAssignment.assignContent(pContainer,
+			'<div class="pict-flow-popup-search-wrapper">'
+			+ '<span class="pict-flow-popup-search-icon">' + tmpSearchIconHTML + '</span>'
+			+ '<input id="' + tmpSearchID + '" class="pict-flow-popup-search" type="text" placeholder="Search node types..." '
+			+ 'oninput="_Pict.views[\'' + tmpFlowViewIdentifier + '\']._ToolbarView._filterNodeList(\'' + tmpListID + '\', this.value)" />'
+			+ '</div>'
+			+ '<div id="' + tmpListID + '" class="pict-flow-popup-node-list">' + tmpInitialListHTML + '</div>');
 	}
 
 	/**
-	 * Populate the node list in the Add Node popup, filtered by search text.
-	 * @param {HTMLElement} pListDiv
+	 * Build the HTML string for the Add Node list filtered by the given
+	 * text. Stages AppData and renders the {~TS:~} template into a string;
+	 * returns "no matches" markup when nothing matches.
+	 *
 	 * @param {string} pFilter
+	 * @returns {string}
 	 */
-	_populateNodeList(pListDiv, pFilter)
+	_renderNodeListHTML(pFilter)
 	{
-		if (!this._FlowView || !this._FlowView._NodeTypeProvider) return;
-
-		// Clear
-		while (pListDiv.firstChild)
-		{
-			pListDiv.removeChild(pListDiv.firstChild);
-		}
+		if (!this._FlowView || !this._FlowView._NodeTypeProvider) return '';
 
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
 		let tmpTypes = this._FlowView._NodeTypeProvider.getNodeTypes();
 		let tmpTypeKeys = Object.keys(tmpTypes);
 		let tmpFilter = (pFilter || '').toLowerCase().trim();
 		let tmpIconProvider = this._FlowView._IconProvider;
-		let tmpMatchCount = 0;
 
+		let tmpRows = [];
 		for (let i = 0; i < tmpTypeKeys.length; i++)
 		{
 			let tmpTypeConfig = tmpTypes[tmpTypeKeys[i]];
 			let tmpMeta = tmpTypeConfig.CardMetadata || {};
-
-			// Skip disabled cards
 			if (tmpMeta.Enabled === false) continue;
 
-			// Filter match: label, code, or category
 			if (tmpFilter)
 			{
 				let tmpLabel = (tmpTypeConfig.Label || '').toLowerCase();
 				let tmpCode = (tmpMeta.Code || '').toLowerCase();
 				let tmpCategory = (tmpMeta.Category || '').toLowerCase();
-				if (tmpLabel.indexOf(tmpFilter) < 0 &&
-					tmpCode.indexOf(tmpFilter) < 0 &&
-					tmpCategory.indexOf(tmpFilter) < 0)
-				{
-					continue;
-				}
+				if (tmpLabel.indexOf(tmpFilter) < 0 && tmpCode.indexOf(tmpFilter) < 0 && tmpCategory.indexOf(tmpFilter) < 0) continue;
 			}
 
-			tmpMatchCount++;
-
-			let tmpRow = document.createElement('div');
-			tmpRow.className = 'pict-flow-popup-list-item';
-			tmpRow.setAttribute('data-node-type', tmpTypeKeys[i]);
-
-			// Icon
-			let tmpIconSpan = document.createElement('span');
-			tmpIconSpan.className = 'pict-flow-popup-list-item-icon';
+			let tmpIconHTML = '';
 			if (tmpIconProvider)
 			{
 				let tmpResolvedKey = tmpIconProvider.resolveIconKey(tmpMeta);
-				tmpIconSpan.innerHTML = tmpIconProvider.getIconSVGMarkup(tmpResolvedKey, 16);
-			}
-			tmpRow.appendChild(tmpIconSpan);
-
-			// Label
-			let tmpLabelSpan = document.createElement('span');
-			tmpLabelSpan.className = 'pict-flow-popup-list-item-label';
-			tmpLabelSpan.textContent = tmpTypeConfig.Label;
-			tmpRow.appendChild(tmpLabelSpan);
-
-			// Code badge
-			if (tmpMeta.Code)
-			{
-				let tmpCodeSpan = document.createElement('span');
-				tmpCodeSpan.className = 'pict-flow-popup-list-item-code';
-				tmpCodeSpan.textContent = tmpMeta.Code;
-				tmpRow.appendChild(tmpCodeSpan);
+				tmpIconHTML = tmpIconProvider.getIconSVGMarkup(tmpResolvedKey, 16);
 			}
-
-			// Click handler
-			tmpRow.addEventListener('click', () =>
+			tmpRows.push(
 			{
-				this._addNodeAtCenter(tmpTypeKeys[i]);
-				this._closePopup();
+				NodeType: tmpTypeKeys[i],
+				Label: tmpTypeConfig.Label || '',
+				IconHTML: tmpIconHTML,
+				Code: tmpMeta.Code || '',
+				FlowViewIdentifier: tmpFlowViewIdentifier
 			});
-
-			pListDiv.appendChild(tmpRow);
 		}
 
-		if (tmpMatchCount === 0)
+		if (tmpRows.length === 0)
 		{
-			let tmpEmpty = document.createElement('div');
-			tmpEmpty.className = 'pict-flow-popup-list-empty';
-			tmpEmpty.textContent = 'No matching node types';
-			pListDiv.appendChild(tmpEmpty);
+			return '<div class="pict-flow-popup-list-empty">No matching node types</div>';
 		}
+		return this.pict.parseTemplateByHash('Flow-AddNode-List', { Rows: tmpRows });
+	}
+
+	/**
+	 * Update the Add Node list contents in response to a search input
+	 * change. Called from the inline `oninput` handler. The list element
+	 * is already in the DOM by the time this fires.
+	 *
+	 * @param {string} pListID
+	 * @param {string} pFilter
+	 */
+	_filterNodeList(pListID, pFilter)
+	{
+		let tmpListEl = document.getElementById(pListID);
+		if (!tmpListEl) return;
+		this.pict.ContentAssignment.assignContent(tmpListEl, this._renderNodeListHTML(pFilter));
+	}
+
+	/**
+	 * Inline handler for an Add Node row click. Adds the node at viewport
+	 * center and closes the popup.
+	 *
+	 * @param {string} pNodeType
+	 */
+	_addNodeFromPopup(pNodeType)
+	{
+		this._addNodeAtCenter(pNodeType);
+		this._closePopup();
 	}
 
 	// ── Cards Popup ───────────────────────────────────────────────────────
 
 	/**
-	 * Build the Cards popup content with search and categorized palette.
+	 * Build the Cards popup using templates with inline handlers. Search
+	 * input fires `_filterCardsList` which re-renders the categorized list.
+	 *
 	 * @param {HTMLElement} pContainer
 	 */
 	_buildCardsPopup(pContainer)
 	{
-		// Search wrapper
-		let tmpSearchWrapper = document.createElement('div');
-		tmpSearchWrapper.className = 'pict-flow-popup-search-wrapper';
-
-		let tmpSearchIcon = document.createElement('span');
-		tmpSearchIcon.className = 'pict-flow-popup-search-icon';
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
 		let tmpIconProvider = this._FlowView ? this._FlowView._IconProvider : null;
-		if (tmpIconProvider)
-		{
-			tmpSearchIcon.innerHTML = tmpIconProvider.getIconSVGMarkup('search', 12);
-		}
-		tmpSearchWrapper.appendChild(tmpSearchIcon);
+		let tmpSearchIconHTML = tmpIconProvider ? tmpIconProvider.getIconSVGMarkup('search', 12) : '';
 
-		let tmpSearchInput = document.createElement('input');
-		tmpSearchInput.className = 'pict-flow-popup-search';
-		tmpSearchInput.setAttribute('type', 'text');
-		tmpSearchInput.setAttribute('placeholder', 'Search cards...');
-		tmpSearchWrapper.appendChild(tmpSearchInput);
-		pContainer.appendChild(tmpSearchWrapper);
+		let tmpListID = `Flow-Toolbar-CardsList-${tmpFlowViewIdentifier}`;
+		let tmpSearchID = `Flow-Toolbar-CardsSearch-${tmpFlowViewIdentifier}`;
 
-		// Palette list container
-		let tmpListDiv = document.createElement('div');
-		tmpListDiv.className = 'pict-flow-popup-node-list';
-		pContainer.appendChild(tmpListDiv);
+		// Initial render inline — popup not yet in DOM.
+		let tmpInitialListHTML = this._renderCardsListHTML('');
 
-		// Initial population
-		this._renderPalette(tmpListDiv, '');
+		this.pict.ContentAssignment.assignContent(pContainer,
+			'<div class="pict-flow-popup-search-wrapper">'
+			+ '<span class="pict-flow-popup-search-icon">' + tmpSearchIconHTML + '</span>'
+			+ '<input id="' + tmpSearchID + '" class="pict-flow-popup-search" type="text" placeholder="Search cards..." '
+			+ 'oninput="_Pict.views[\'' + tmpFlowViewIdentifier + '\']._ToolbarView._filterCardsList(\'' + tmpListID + '\', this.value)" />'
+			+ '</div>'
+			+ '<div id="' + tmpListID + '" class="pict-flow-popup-node-list">' + tmpInitialListHTML + '</div>');
 
-		// Filter on input
-		tmpSearchInput.addEventListener('input', () =>
+		// Focus search input — defer past the popup append.
+		setTimeout(() =>
 		{
-			this._renderPalette(tmpListDiv, tmpSearchInput.value);
-		});
-
-		// Focus search input
-		setTimeout(() => { tmpSearchInput.focus(); }, 50);
+			let tmpSearch = document.getElementById(tmpSearchID);
+			if (tmpSearch) tmpSearch.focus();
+		}, 50);
 	}
 
 	/**
-	 * Render the card palette with categories and card chips into a container.
-	 * @param {HTMLElement} pContainer - The target container element
-	 * @param {string} [pFilter] - Optional search filter text
+	 * Build the cards-list HTML string for the given filter. Stages
+	 * AppData and renders via the {~TS:~} templates; returns "no matches"
+	 * markup when nothing matches.
+	 *
+	 * @param {string} pFilter
+	 * @returns {string}
 	 */
-	_renderPalette(pContainer, pFilter)
+	_renderCardsListHTML(pFilter)
 	{
-		if (!this._FlowView || !this._FlowView._NodeTypeProvider) return;
-
-		// Clear existing content
-		while (pContainer.firstChild)
-		{
-			pContainer.removeChild(pContainer.firstChild);
-		}
+		if (!this._FlowView || !this._FlowView._NodeTypeProvider) return '';
 
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
 		let tmpCategories = this._FlowView._NodeTypeProvider.getCardsByCategory();
 		let tmpCategoryKeys = Object.keys(tmpCategories);
 		let tmpFilter = (pFilter || '').toLowerCase().trim();
+		let tmpIconProvider = this._FlowView._IconProvider;
 		let tmpTotalMatchCount = 0;
 
+		let tmpCategoryRecords = [];
 		for (let i = 0; i < tmpCategoryKeys.length; i++)
 		{
 			let tmpCategoryName = tmpCategoryKeys[i];
 			let tmpCards = tmpCategories[tmpCategoryName];
-			let tmpMatchingCards = [];
+			let tmpMatching = [];
 
-			// Filter cards within this category
 			for (let j = 0; j < tmpCards.length; j++)
 			{
 				let tmpCardConfig = tmpCards[j];
@@ -606,413 +664,916 @@ class PictViewFlowToolbar extends libPictView
 					let tmpLabel = (tmpCardConfig.Label || '').toLowerCase();
 					let tmpCode = (tmpMeta.Code || '').toLowerCase();
 					let tmpCategory = tmpCategoryName.toLowerCase();
-					if (tmpLabel.indexOf(tmpFilter) < 0 &&
-						tmpCode.indexOf(tmpFilter) < 0 &&
-						tmpCategory.indexOf(tmpFilter) < 0)
-					{
-						continue;
-					}
+					if (tmpLabel.indexOf(tmpFilter) < 0 && tmpCode.indexOf(tmpFilter) < 0 && tmpCategory.indexOf(tmpFilter) < 0) continue;
 				}
 
-				tmpMatchingCards.push(tmpCardConfig);
-			}
-
-			if (tmpMatchingCards.length === 0) continue;
-
-			tmpTotalMatchCount += tmpMatchingCards.length;
-
-			let tmpCategoryDiv = document.createElement('div');
-			tmpCategoryDiv.className = 'pict-flow-palette-category';
-			tmpCategoryDiv.style.padding = '0.35em 0.5em';
-
-			let tmpCategoryLabel = document.createElement('div');
-			tmpCategoryLabel.className = 'pict-flow-palette-category-label';
-			tmpCategoryLabel.textContent = tmpCategoryName;
-			tmpCategoryDiv.appendChild(tmpCategoryLabel);
-
-			let tmpCardsDiv = document.createElement('div');
-			tmpCardsDiv.className = 'pict-flow-palette-cards';
-
-			for (let j = 0; j < tmpMatchingCards.length; j++)
-			{
-				let tmpCardConfig = tmpMatchingCards[j];
-				let tmpMeta = tmpCardConfig.CardMetadata || {};
-
-				let tmpCardEl = document.createElement('div');
-				tmpCardEl.className = 'pict-flow-palette-card';
-				if (tmpMeta.Enabled === false)
-				{
-					tmpCardEl.classList.add('disabled');
-				}
-				tmpCardEl.setAttribute('data-card-type', tmpCardConfig.Hash);
-
-				if (tmpMeta.Tooltip)
-				{
-					tmpCardEl.setAttribute('title', tmpMeta.Tooltip);
-				}
-				else if (tmpMeta.Description)
-				{
-					tmpCardEl.setAttribute('title', tmpMeta.Description);
-				}
-
-				// Icon or color swatch
-				if (tmpMeta.Icon)
-				{
-					let tmpIconSpan = document.createElement('span');
-					tmpIconSpan.className = 'pict-flow-palette-card-icon';
-					let tmpIconProvider = this._FlowView._IconProvider;
-					if (tmpIconProvider && !tmpIconProvider.isEmojiIcon(tmpMeta.Icon))
-					{
-						let tmpResolvedKey = tmpIconProvider.resolveIconKey(tmpMeta);
-						tmpIconSpan.innerHTML = tmpIconProvider.getIconSVGMarkup(tmpResolvedKey, 14);
-					}
-					else
-					{
-						tmpIconSpan.textContent = tmpMeta.Icon;
-					}
-					tmpCardEl.appendChild(tmpIconSpan);
-				}
-				else if (this._FlowView._IconProvider)
+				let tmpIconHTML = '';
+				let tmpIsEmoji = false;
+				if (tmpMeta.Icon && tmpIconProvider && !tmpIconProvider.isEmojiIcon(tmpMeta.Icon))
 				{
-					let tmpIconSpan = document.createElement('span');
-					tmpIconSpan.className = 'pict-flow-palette-card-icon';
-					tmpIconSpan.innerHTML = this._FlowView._IconProvider.getIconSVGMarkup('default', 14);
-					tmpCardEl.appendChild(tmpIconSpan);
+					tmpIconHTML = tmpIconProvider.getIconSVGMarkup(tmpIconProvider.resolveIconKey(tmpMeta), 14);
 				}
-				else if (tmpCardConfig.TitleBarColor)
+				else if (tmpMeta.Icon)
 				{
-					let tmpSwatch = document.createElement('span');
-					tmpSwatch.className = 'pict-flow-palette-card-swatch';
-					tmpSwatch.style.backgroundColor = tmpCardConfig.TitleBarColor;
-					tmpCardEl.appendChild(tmpSwatch);
+					tmpIsEmoji = true;
 				}
-
-				// Title
-				let tmpTitleSpan = document.createElement('span');
-				tmpTitleSpan.className = 'pict-flow-palette-card-title';
-				tmpTitleSpan.textContent = tmpCardConfig.Label;
-				tmpCardEl.appendChild(tmpTitleSpan);
-
-				// Code badge
-				if (tmpMeta.Code)
+				else if (tmpIconProvider)
 				{
-					let tmpCodeSpan = document.createElement('span');
-					tmpCodeSpan.className = 'pict-flow-palette-card-code';
-					tmpCodeSpan.textContent = tmpMeta.Code;
-					tmpCardEl.appendChild(tmpCodeSpan);
+					tmpIconHTML = tmpIconProvider.getIconSVGMarkup('default', 14);
 				}
 
-				// Click handler
-				tmpCardEl.addEventListener('click', () =>
+				tmpMatching.push(
 				{
-					this._addCardFromPalette(tmpCardConfig.Hash);
-					this._closePopup();
+					CardType: tmpCardConfig.Hash,
+					Label: tmpCardConfig.Label || '',
+					Code: tmpMeta.Code || '',
+					IconHTML: tmpIconHTML,
+					IconEmoji: tmpIsEmoji ? tmpMeta.Icon : '',
+					DisabledClass: (tmpMeta.Enabled === false) ? ' disabled' : '',
+					Tooltip: tmpMeta.Tooltip || tmpMeta.Description || '',
+					SwatchColor: (!tmpIconHTML && !tmpIsEmoji && tmpCardConfig.TitleBarColor) ? tmpCardConfig.TitleBarColor : '',
+					FlowViewIdentifier: tmpFlowViewIdentifier
 				});
-
-				tmpCardsDiv.appendChild(tmpCardEl);
 			}
 
-			tmpCategoryDiv.appendChild(tmpCardsDiv);
-			pContainer.appendChild(tmpCategoryDiv);
+			if (tmpMatching.length === 0) continue;
+			tmpTotalMatchCount += tmpMatching.length;
+			tmpCategoryRecords.push(
+			{
+				Name: tmpCategoryName,
+				Cards: tmpMatching,
+				FlowViewIdentifier: tmpFlowViewIdentifier
+			});
 		}
 
 		if (tmpTotalMatchCount === 0)
 		{
-			let tmpEmpty = document.createElement('div');
-			tmpEmpty.className = 'pict-flow-popup-list-empty';
-			tmpEmpty.textContent = tmpFilter ? 'No matching cards' : 'No card types available';
-			pContainer.appendChild(tmpEmpty);
+			return '<div class="pict-flow-popup-list-empty">' + (tmpFilter ? 'No matching cards' : 'No card types available') + '</div>';
 		}
+		return this.pict.parseTemplateByHash('Flow-Cards-List', { Categories: tmpCategoryRecords });
+	}
+
+	/**
+	 * Inline `oninput` handler — refresh card list with the new filter.
+	 */
+	_filterCardsList(pListID, pFilter)
+	{
+		let tmpListEl = document.getElementById(pListID);
+		if (!tmpListEl) return;
+		this.pict.ContentAssignment.assignContent(tmpListEl, this._renderCardsListHTML(pFilter));
+	}
+
+	/**
+	 * Inline handler for a card click. Adds the node and closes the popup.
+	 *
+	 * @param {string} pCardType
+	 */
+	_addCardFromPopup(pCardType)
+	{
+		this._addCardFromPalette(pCardType);
+		this._closePopup();
 	}
 
 	// ── Layout Popup ──────────────────────────────────────────────────────
 
 	/**
-	 * Build the Layout popup content.
+	 * Build the Layout popup using templates with inline handlers.
+	 *
+	 * Layout records (name + hash) are pushed into AppData and iterated via
+	 * a {~TS:~} template. The save section is a static fragment with inline
+	 * handlers that call the toolbar's helper methods.
+	 *
 	 * @param {HTMLElement} pContainer
 	 */
 	_buildLayoutPopup(pContainer)
 	{
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
 		let tmpIconProvider = this._FlowView ? this._FlowView._IconProvider : null;
+		let tmpSaveIconHTML = tmpIconProvider ? tmpIconProvider.getIconSVGMarkup('save', 14) : '✓';
+		let tmpDeleteIconHTML = tmpIconProvider ? tmpIconProvider.getIconSVGMarkup('trash', 12) : '×';
+
+		let tmpSaveRowID = `Flow-Toolbar-LayoutSaveRow-${tmpFlowViewIdentifier}`;
+		let tmpSaveInputRowID = `Flow-Toolbar-LayoutSaveInputRow-${tmpFlowViewIdentifier}`;
+		let tmpSaveInputID = `Flow-Toolbar-LayoutSaveInput-${tmpFlowViewIdentifier}`;
+		let tmpListID = `Flow-Toolbar-LayoutList-${tmpFlowViewIdentifier}`;
+
+		// Build layout records for the {~TS:~} iteration
+		let tmpLayouts = (this._FlowView && this._FlowView._LayoutProvider)
+			? this._FlowView._LayoutProvider.getLayouts() : [];
+		let tmpLayoutRecords = [];
+		for (let i = 0; i < tmpLayouts.length; i++)
+		{
+			tmpLayoutRecords.push(
+			{
+				LayoutHash: tmpLayouts[i].Hash,
+				Name: tmpLayouts[i].Name || '',
+				DeleteIconHTML: tmpDeleteIconHTML,
+				FlowViewIdentifier: tmpFlowViewIdentifier
+			});
+		}
 
-		// Save Layout section at top
-		let tmpSaveSection = document.createElement('div');
-		tmpSaveSection.className = 'pict-flow-popup-layout-save-section';
-
-		// Save input row (hidden initially)
-		let tmpSaveInputRow = document.createElement('div');
-		tmpSaveInputRow.className = 'pict-flow-popup-layout-save-input-row';
-		tmpSaveInputRow.style.display = 'none';
+		let tmpListHTML = (tmpLayoutRecords.length === 0)
+			? '<div class="pict-flow-popup-list-empty">No saved layouts</div>'
+			: this.pict.parseTemplateByHash('Flow-Layout-List', { Rows: tmpLayoutRecords });
+
+		this.pict.ContentAssignment.assignContent(pContainer,
+			'<div class="pict-flow-popup-layout-save-section">'
+			+ '<div id="' + tmpSaveRowID + '" class="pict-flow-popup-layout-save"'
+			+ ' onclick="_Pict.views[\'' + tmpFlowViewIdentifier + '\']._ToolbarView._showLayoutSaveInput(\'' + tmpSaveRowID + '\', \'' + tmpSaveInputRowID + '\', \'' + tmpSaveInputID + '\')">'
+			+ '<span class="pict-flow-popup-layout-save-icon">' + tmpSaveIconHTML + '</span>'
+			+ '<span>Save Current Layout</span>'
+			+ '</div>'
+			+ '<div id="' + tmpSaveInputRowID + '" class="pict-flow-popup-layout-save-input-row" style="display:none;">'
+			+ '<input id="' + tmpSaveInputID + '" class="pict-flow-popup-layout-save-input" type="text" placeholder="Layout name..."'
+			+ ' onclick="event.stopPropagation()"'
+			+ ' onkeydown="_Pict.views[\'' + tmpFlowViewIdentifier + '\']._ToolbarView._handleLayoutSaveKey(event, \'' + tmpSaveInputID + '\', \'' + tmpSaveRowID + '\', \'' + tmpSaveInputRowID + '\')" />'
+			+ '<button class="pict-flow-popup-layout-save-confirm" title="Save"'
+			+ ' onclick="_Pict.views[\'' + tmpFlowViewIdentifier + '\']._ToolbarView._confirmLayoutSave(\'' + tmpSaveInputID + '\')">'
+			+ tmpSaveIconHTML + '</button>'
+			+ '</div>'
+			+ '</div>'
+			+ '<div class="pict-flow-popup-divider"></div>'
+			+ '<div id="' + tmpListID + '">' + tmpListHTML + '</div>');
+	}
 
-		let tmpSaveInput = document.createElement('input');
-		tmpSaveInput.className = 'pict-flow-popup-layout-save-input';
-		tmpSaveInput.setAttribute('type', 'text');
-		tmpSaveInput.setAttribute('placeholder', 'Layout name...');
-		tmpSaveInputRow.appendChild(tmpSaveInput);
+	/**
+	 * Inline handler — reveal the layout-name input and focus it.
+	 */
+	_showLayoutSaveInput(pSaveRowID, pInputRowID, pInputID)
+	{
+		let tmpRow = document.getElementById(pSaveRowID);
+		let tmpInputRow = document.getElementById(pInputRowID);
+		let tmpInput = document.getElementById(pInputID);
+		if (tmpRow) tmpRow.style.display = 'none';
+		if (tmpInputRow) tmpInputRow.style.display = '';
+		if (tmpInput)
+		{
+			tmpInput.value = '';
+			setTimeout(() => { tmpInput.focus(); }, 50);
+		}
+	}
 
-		let tmpSaveConfirmBtn = document.createElement('button');
-		tmpSaveConfirmBtn.className = 'pict-flow-popup-layout-save-confirm';
-		tmpSaveConfirmBtn.title = 'Save';
-		if (tmpIconProvider)
+	/**
+	 * Inline handler — Enter saves, Escape cancels.
+	 */
+	_handleLayoutSaveKey(pEvent, pInputID, pSaveRowID, pInputRowID)
+	{
+		if (pEvent.key === 'Enter')
 		{
-			tmpSaveConfirmBtn.innerHTML = tmpIconProvider.getIconSVGMarkup('save', 14);
+			pEvent.preventDefault();
+			this._confirmLayoutSave(pInputID);
 		}
-		else
+		else if (pEvent.key === 'Escape')
 		{
-			tmpSaveConfirmBtn.textContent = '✓';
+			let tmpRow = document.getElementById(pSaveRowID);
+			let tmpInputRow = document.getElementById(pInputRowID);
+			if (tmpInputRow) tmpInputRow.style.display = 'none';
+			if (tmpRow) tmpRow.style.display = '';
 		}
-		tmpSaveInputRow.appendChild(tmpSaveConfirmBtn);
+	}
 
-		// "Save Current Layout" clickable row
-		let tmpSaveRow = document.createElement('div');
-		tmpSaveRow.className = 'pict-flow-popup-layout-save';
+	/**
+	 * Inline handler — save the layout under the entered name and rebuild
+	 * the popup so the new entry appears.
+	 */
+	_confirmLayoutSave(pInputID)
+	{
+		let tmpInput = document.getElementById(pInputID);
+		if (!tmpInput) return;
+		let tmpName = (tmpInput.value || '').trim();
+		if (tmpName === '') return;
+		this._FlowView._LayoutProvider.saveLayout(tmpName);
 
-		let tmpSaveIcon = document.createElement('span');
-		tmpSaveIcon.className = 'pict-flow-popup-layout-save-icon';
-		if (tmpIconProvider)
-		{
-			tmpSaveIcon.innerHTML = tmpIconProvider.getIconSVGMarkup('save', 14);
-		}
-		tmpSaveRow.appendChild(tmpSaveIcon);
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
+		let tmpPopupEl = document.getElementById(`Flow-Toolbar-Popup-${tmpFlowViewIdentifier}`);
+		if (tmpPopupEl) this._buildLayoutPopup(tmpPopupEl);
+	}
+
+	/**
+	 * Inline handler — restore layout when the row (not its delete button)
+	 * is clicked.
+	 */
+	_restoreLayoutFromPopup(pLayoutHash, pEvent)
+	{
+		if (pEvent && pEvent.target && pEvent.target.closest('.pict-flow-popup-layout-delete')) return;
+		this._FlowView._LayoutProvider.restoreLayout(pLayoutHash);
+		this._closePopup();
+	}
+
+	/**
+	 * Inline handler — delete a saved layout and refresh the popup.
+	 */
+	_deleteLayoutFromPopup(pLayoutHash, pEvent)
+	{
+		if (pEvent && typeof pEvent.stopPropagation === 'function') pEvent.stopPropagation();
+		this._FlowView._LayoutProvider.deleteLayout(pLayoutHash);
+
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
+		let tmpPopupEl = document.getElementById(`Flow-Toolbar-Popup-${tmpFlowViewIdentifier}`);
+		if (tmpPopupEl) this._buildLayoutPopup(tmpPopupEl);
+	}
+
+	// ── Layout Algorithm Popup ────────────────────────────────────────────
+
+	/**
+	 * Build the Layout Algorithm popup using templates with inline handlers.
+	 * The popup has three logical sections (algorithm chooser, edge-theme
+	 * chooser, auto-apply toggle + apply button). Each control's behavior
+	 * lives on the toolbar as a helper method called from inline handlers.
+	 *
+	 * Iterations (algorithm options, edge themes) are template-driven via
+	 * AppData arrays.
+	 *
+	 * @param {HTMLElement} pContainer
+	 */
+	_buildLayoutAlgorithmPopup(pContainer)
+	{
+		if (!this._FlowView || !this._FlowView._LayoutService) return;
 
-		let tmpSaveText = document.createElement('span');
-		tmpSaveText.textContent = 'Save Current Layout';
-		tmpSaveRow.appendChild(tmpSaveText);
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
+		let tmpLayoutService = this._FlowView._LayoutService;
+		let tmpCurrentSettings = this._FlowView.getLayoutAlgorithm();
+		let tmpAlgoDescriptor = tmpLayoutService.getAlgorithm(tmpCurrentSettings.Algorithm);
+		let tmpEdgeSettings = this._FlowView.getEdgeTheme();
+		let tmpResolvedEdge = tmpEdgeSettings.Theme;
+		let tmpExplicitEdgeOverride = tmpEdgeSettings.Override;
+		let tmpDefaultThemeName = (tmpAlgoDescriptor && tmpAlgoDescriptor.DefaultEdgeTheme) || 'Bezier';
+		let tmpIconProvider = this._FlowView ? this._FlowView._IconProvider : null;
+		let tmpSettingsIconHTML = tmpIconProvider ? tmpIconProvider.getIconSVGMarkup('settings', 13) : '⚙';
 
-		// Click "Save Current Layout" to reveal the input row
-		tmpSaveRow.addEventListener('click', () =>
+		// Build option records for the dropdowns
+		let tmpAlgoOptions = tmpLayoutService.listAlgorithms().map((pAlgo) => (
 		{
-			tmpSaveRow.style.display = 'none';
-			tmpSaveInputRow.style.display = '';
-			tmpSaveInput.value = '';
-			setTimeout(() => { tmpSaveInput.focus(); }, 50);
-		});
+			Value: pAlgo.Name,
+			Label: pAlgo.Label || pAlgo.Name,
+			SelectedAttr: (pAlgo.Name === tmpCurrentSettings.Algorithm) ? ' selected="selected"' : ''
+		}));
 
-		// Confirm save via button click
-		let tmpDoSave = () =>
+		let tmpEdgeOptionRecords = [];
+		tmpEdgeOptionRecords.push(
 		{
-			let tmpName = tmpSaveInput.value.trim();
-			if (tmpName === '') return;
-			this._FlowView._LayoutProvider.saveLayout(tmpName);
-			// Refresh the popup content
-			while (pContainer.firstChild)
+			Value: '__inherit__',
+			Label: `Inherit from layout (${tmpDefaultThemeName})`,
+			SelectedAttr: !tmpExplicitEdgeOverride ? ' selected="selected"' : ''
+		});
+		let tmpEdgeThemes = tmpLayoutService.listEdgeThemes();
+		for (let i = 0; i < tmpEdgeThemes.length; i++)
+		{
+			tmpEdgeOptionRecords.push(
 			{
-				pContainer.removeChild(pContainer.firstChild);
-			}
-			this._buildLayoutPopup(pContainer);
-		};
+				Value: tmpEdgeThemes[i].Name,
+				Label: tmpEdgeThemes[i].Label || tmpEdgeThemes[i].Name,
+				SelectedAttr: (tmpEdgeThemes[i].Name === tmpExplicitEdgeOverride) ? ' selected="selected"' : ''
+			});
+		}
+
+		let tmpAlgoOptionsHTML = this.pict.parseTemplateByHash('Flow-Layout-OptionList', { Options: tmpAlgoOptions });
+		let tmpEdgeOptionsHTML = this.pict.parseTemplateByHash('Flow-Layout-OptionList', { Options: tmpEdgeOptionRecords });
 
-		tmpSaveConfirmBtn.addEventListener('click', tmpDoSave);
+		let tmpHasParameters = !!(tmpAlgoDescriptor && (
+			(tmpAlgoDescriptor.ParameterManifest && tmpAlgoDescriptor.ParameterManifest.Descriptors) ||
+			(tmpAlgoDescriptor.ParameterSchema && Object.keys(tmpAlgoDescriptor.ParameterSchema).length > 0)
+		));
 
-		// Confirm save via Enter key
-		tmpSaveInput.addEventListener('keydown', (pEvent) =>
+		let tmpAlgoDescription = (tmpAlgoDescriptor && tmpAlgoDescriptor.Description)
+			? '<div class="pict-flow-popup-control-description">' + tmpAlgoDescriptor.Description + '</div>'
+			: '';
+
+		let tmpFormToggleHTML = '';
+		if (tmpHasParameters)
 		{
-			if (pEvent.key === 'Enter')
-			{
-				pEvent.preventDefault();
-				tmpDoSave();
-			}
-			else if (pEvent.key === 'Escape')
+			tmpFormToggleHTML = '<button type="button" class="pict-flow-popup-collapse-toggle"'
+				+ ' aria-expanded="' + (this._LayoutFormExpanded ? 'true' : 'false') + '"'
+				+ ' title="' + (this._LayoutFormExpanded ? 'Hide parameters' : 'Show parameters') + '"'
+				+ ' onclick="_Pict.views[\'' + tmpFlowViewIdentifier + '\']._ToolbarView._toggleLayoutFormCollapsed(this)">'
+				+ tmpSettingsIconHTML
+				+ '</button>';
+		}
+
+		let tmpAutoApplyID = `Flow-Toolbar-AutoApply-${tmpFlowViewIdentifier}`;
+		let tmpApplyDisabled = (tmpCurrentSettings.Algorithm === 'Custom') ? ' disabled' : '';
+		let tmpApplyTitle = (tmpCurrentSettings.Algorithm === 'Custom') ? ' title="Custom does not auto-position nodes"' : '';
+
+		let tmpEdgeDescriptionHTML = '';
+		if (tmpResolvedEdge)
+		{
+			let tmpResolvedDescriptor = tmpLayoutService.getEdgeTheme(tmpResolvedEdge);
+			if (tmpResolvedDescriptor && tmpResolvedDescriptor.Description)
 			{
-				// Cancel — hide input, show the save row again
-				tmpSaveInputRow.style.display = 'none';
-				tmpSaveRow.style.display = '';
+				tmpEdgeDescriptionHTML = '<div class="pict-flow-popup-control-description">' + tmpResolvedDescriptor.Description + '</div>';
 			}
-		});
+		}
 
-		// Prevent clicks inside the input from closing the popup
-		tmpSaveInput.addEventListener('click', (pEvent) =>
+		// Place a host div for the parameter form; mount the form into it
+		// after the popup is in the DOM (the metacontroller resolves
+		// destinations via document.querySelector).
+		let tmpParamFormHostID = `Flow-Toolbar-LayoutParamFormHost-${tmpFlowViewIdentifier}`;
+
+		this.pict.ContentAssignment.assignContent(pContainer,
+			'<div class="pict-flow-popup-settings-section pict-flow-popup-layout-algorithm-row">'
+			+ '<label class="pict-flow-popup-settings-label">Algorithm</label>'
+			+ '<div class="pict-flow-popup-layout-algorithm-controls">'
+			+ '<select class="pict-flow-popup-settings-select pict-flow-popup-layout-algorithm-select" data-layout-control="algorithm"'
+			+ ' onclick="event.stopPropagation()"'
+			+ ' onchange="_Pict.views[\'' + tmpFlowViewIdentifier + '\']._ToolbarView._handleLayoutAlgoChange(this.value)">'
+			+ tmpAlgoOptionsHTML
+			+ '</select>'
+			+ tmpFormToggleHTML
+			+ '</div>'
+			+ '</div>'
+			+ tmpAlgoDescription
+			+ '<div id="' + tmpParamFormHostID + '"></div>'
+			+ '<div class="pict-flow-popup-divider"></div>'
+			+ '<div class="pict-flow-popup-settings-section">'
+			+ '<label class="pict-flow-popup-settings-label">Edge theme</label>'
+			+ '<select class="pict-flow-popup-settings-select" data-layout-control="edge-theme"'
+			+ ' onclick="event.stopPropagation()"'
+			+ ' onchange="_Pict.views[\'' + tmpFlowViewIdentifier + '\']._ToolbarView._handleEdgeThemeChange(this.value)">'
+			+ tmpEdgeOptionsHTML
+			+ '</select>'
+			+ '</div>'
+			+ tmpEdgeDescriptionHTML
+			+ '<div class="pict-flow-popup-divider"></div>'
+			+ '<div class="pict-flow-popup-settings-section" style="display:flex;align-items:center;gap:8px;">'
+			+ '<input type="checkbox" id="' + tmpAutoApplyID + '"' + (tmpCurrentSettings.AutoApply ? ' checked="checked"' : '') + ''
+			+ ' onclick="event.stopPropagation()"'
+			+ ' onchange="_Pict.views[\'' + tmpFlowViewIdentifier + '\']._ToolbarView._handleAutoApplyChange(this.checked)" />'
+			+ '<label class="pict-flow-popup-settings-label" for="' + tmpAutoApplyID + '" style="cursor:pointer;">Auto-apply on changes</label>'
+			+ '</div>'
+			+ '<div class="pict-flow-popup-divider"></div>'
+			+ '<div class="pict-flow-popup-settings-section" style="padding:4px 8px;">'
+			+ '<button class="pict-flow-popup-layout-save-confirm" style="width:100%;padding:6px;"' + tmpApplyDisabled + tmpApplyTitle
+			+ ' onclick="_Pict.views[\'' + tmpFlowViewIdentifier + '\']._ToolbarView._handleApplyLayoutNow()">Apply Now</button>'
+			+ '</div>');
+
+		// Mount the parameter form (handles its own DOM building /
+		// metacontroller). Use pContainer.querySelector — the popup may
+		// not be in the document yet, so document.getElementById would miss.
+		let tmpFormHostEl = pContainer.querySelector('#' + tmpParamFormHostID);
+		if (tmpFormHostEl)
 		{
-			pEvent.stopPropagation();
-		});
+			this._buildLayoutParameterFormSection(tmpFormHostEl, tmpAlgoDescriptor, tmpCurrentSettings);
+		}
+	}
 
-		tmpSaveSection.appendChild(tmpSaveRow);
-		tmpSaveSection.appendChild(tmpSaveInputRow);
-		pContainer.appendChild(tmpSaveSection);
+	/**
+	 * Inline handler — switch layout algorithm, refresh popup.
+	 */
+	_handleLayoutAlgoChange(pName)
+	{
+		if (!this._FlowView || !this._FlowView._LayoutService) return;
+		let tmpAlgo = this._FlowView._LayoutService.getAlgorithm(pName);
+		let tmpDefaults = (tmpAlgo && tmpAlgo.DefaultParameters)
+			? JSON.parse(JSON.stringify(tmpAlgo.DefaultParameters)) : {};
+		this._FlowView.setLayoutAlgorithm(pName, tmpDefaults);
 
-		// Divider
-		let tmpDivider = document.createElement('div');
-		tmpDivider.className = 'pict-flow-popup-divider';
-		pContainer.appendChild(tmpDivider);
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
+		let tmpPopupEl = document.getElementById(`Flow-Toolbar-Popup-${tmpFlowViewIdentifier}`);
+		if (tmpPopupEl) this._buildLayoutAlgorithmPopup(tmpPopupEl);
+	}
 
-		// Layout rows
-		if (!this._FlowView || !this._FlowView._LayoutProvider)
+	/**
+	 * Inline handler — switch edge theme, refresh popup so descriptions
+	 * track the new theme.
+	 */
+	_handleEdgeThemeChange(pValue)
+	{
+		if (!this._FlowView) return;
+		if (pValue === '__inherit__')
 		{
-			let tmpEmpty = document.createElement('div');
-			tmpEmpty.className = 'pict-flow-popup-list-empty';
-			tmpEmpty.textContent = 'No saved layouts';
-			pContainer.appendChild(tmpEmpty);
-			return;
+			this._FlowView.setEdgeTheme(null);
+		}
+		else
+		{
+			this._FlowView.setEdgeTheme(pValue);
 		}
 
-		let tmpLayouts = this._FlowView._LayoutProvider.getLayouts();
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
+		let tmpPopupEl = document.getElementById(`Flow-Toolbar-Popup-${tmpFlowViewIdentifier}`);
+		if (tmpPopupEl) this._buildLayoutAlgorithmPopup(tmpPopupEl);
+	}
+
+	/**
+	 * Inline handler — toggle auto-apply.
+	 */
+	_handleAutoApplyChange(pChecked)
+	{
+		if (!this._FlowView) return;
+		this._FlowView.setLayoutAutoApply(pChecked);
+	}
 
-		if (tmpLayouts.length === 0)
+	/**
+	 * Inline handler — fire the layout (when not Custom).
+	 */
+	_handleApplyLayoutNow()
+	{
+		if (!this._FlowView) return;
+		let tmpSettings = this._FlowView.getLayoutAlgorithm();
+		if (tmpSettings.Algorithm === 'Custom') return;
+		this._FlowView.applyCurrentLayout();
+	}
+
+	/**
+	 * Inline handler — toggle the parameter-form collapse state.
+	 */
+	_toggleLayoutFormCollapsed(pToggleButton)
+	{
+		this._LayoutFormExpanded = !this._LayoutFormExpanded;
+		pToggleButton.setAttribute('aria-expanded', this._LayoutFormExpanded ? 'true' : 'false');
+		pToggleButton.title = this._LayoutFormExpanded ? 'Hide parameters' : 'Show parameters';
+		let tmpHost = this._LayoutFormHostID ? document.getElementById(this._LayoutFormHostID) : null;
+		if (tmpHost)
 		{
-			let tmpEmpty = document.createElement('div');
-			tmpEmpty.className = 'pict-flow-popup-list-empty';
-			tmpEmpty.textContent = 'No saved layouts';
-			pContainer.appendChild(tmpEmpty);
+			tmpHost.setAttribute('data-collapsed', this._LayoutFormExpanded ? 'false' : 'true');
+		}
+	}
+
+	/**
+	 * Render the parameter form section. When the host app has registered
+	 * `PictFormMetacontroller` and the algorithm provides a
+	 * `ParameterManifest`, we inject that manifest into a section-form so
+	 * the user gets the same Manyfest-driven UX as the rest of the Pict
+	 * ecosystem. Otherwise we fall back to schema-driven hand-rolled inputs.
+	 *
+	 * Data binding: `pict.AppData.PictFlowLayoutEditor.Parameters` is a
+	 * mirror of `_FlowData.LayoutParameters`. The form's Informary writes
+	 * directly into AppData; a `change`/`input` listener on the popup
+	 * pushes those edits back into `_FlowData.LayoutParameters` and (when
+	 * the active algorithm is non-Custom) re-applies the layout.
+	 *
+	 * @param {HTMLElement} pContainer
+	 * @param {Object} pAlgoDescriptor - the descriptor for the active algorithm
+	 * @param {{ Algorithm: string, Parameters: Object }} pCurrentSettings
+	 */
+	_buildLayoutParameterFormSection(pContainer, pAlgoDescriptor, pCurrentSettings)
+	{
+		if (!pAlgoDescriptor) return;
+
+		let tmpHasManifest = !!(pAlgoDescriptor.ParameterManifest && pAlgoDescriptor.ParameterManifest.Descriptors);
+		let tmpMetacontrollerType = this._resolveMetacontrollerServiceType();
+
+		if (tmpHasManifest && tmpMetacontrollerType)
+		{
+			this._mountLayoutParameterMetacontroller(pContainer, pAlgoDescriptor, pCurrentSettings, tmpMetacontrollerType);
 			return;
 		}
 
-		for (let i = 0; i < tmpLayouts.length; i++)
+		// Fallback path — schema-driven hand-rolled inputs.
+		let tmpSchema = (pAlgoDescriptor.ParameterSchema) ? pAlgoDescriptor.ParameterSchema : {};
+		let tmpParamKeys = Object.keys(tmpSchema);
+		if (tmpParamKeys.length === 0) return;
+
+		let tmpParamDivider = document.createElement('div');
+		tmpParamDivider.className = 'pict-flow-popup-divider';
+		pContainer.appendChild(tmpParamDivider);
+
+		let tmpParamHeader = document.createElement('div');
+		tmpParamHeader.className = 'pict-flow-popup-settings-label';
+		tmpParamHeader.style.fontWeight = 'bold';
+		tmpParamHeader.style.padding = '4px 8px';
+		tmpParamHeader.textContent = 'Parameters';
+		pContainer.appendChild(tmpParamHeader);
+
+		for (let i = 0; i < tmpParamKeys.length; i++)
 		{
-			let tmpLayout = tmpLayouts[i];
+			let tmpKey = tmpParamKeys[i];
+			let tmpFieldSchema = tmpSchema[tmpKey];
+			let tmpCurrentValue = (pCurrentSettings.Parameters && pCurrentSettings.Parameters.hasOwnProperty(tmpKey))
+				? pCurrentSettings.Parameters[tmpKey]
+				: tmpFieldSchema.Default;
 
 			let tmpRow = document.createElement('div');
-			tmpRow.className = 'pict-flow-popup-layout-row';
-
-			let tmpNameSpan = document.createElement('span');
-			tmpNameSpan.className = 'pict-flow-popup-layout-name';
-			tmpNameSpan.textContent = tmpLayout.Name;
-			tmpRow.appendChild(tmpNameSpan);
+			tmpRow.className = 'pict-flow-popup-settings-section';
+			tmpRow.style.display = 'flex';
+			tmpRow.style.alignItems = 'center';
+			tmpRow.style.gap = '8px';
+
+			let tmpRowLabel = document.createElement('label');
+			tmpRowLabel.className = 'pict-flow-popup-settings-label';
+			tmpRowLabel.textContent = tmpFieldSchema.Label || tmpKey;
+			tmpRowLabel.style.flex = '1';
+			tmpRow.appendChild(tmpRowLabel);
+
+			let tmpInput = this._buildLayoutParamInput(tmpKey, tmpFieldSchema, tmpCurrentValue);
+			tmpRow.appendChild(tmpInput);
+			pContainer.appendChild(tmpRow);
+		}
+	}
 
-			// Delete button (visible on hover via CSS)
-			let tmpDeleteBtn = document.createElement('button');
-			tmpDeleteBtn.className = 'pict-flow-popup-layout-delete';
-			tmpDeleteBtn.title = 'Delete layout';
-			if (tmpIconProvider)
+	/**
+	 * Remove `PictSectionForm-*` views the layout-algorithm popup has
+	 * previously registered on the host Pict. Without this, switching
+	 * algorithms accumulates dead section views — the metatemplate
+	 * generated by the next inject would still reference the old ones.
+	 * Idempotent.
+	 */
+	_evictLayoutFormViews()
+	{
+		if (!this.pict || !this.pict.views) return;
+		let tmpKeys = Object.keys(this.pict.views);
+		for (let i = 0; i < tmpKeys.length; i++)
+		{
+			let tmpKey = tmpKeys[i];
+			if (tmpKey.indexOf('PictSectionForm-') === 0 && tmpKey.indexOf('PictFlowLayout') > 0)
 			{
-				tmpDeleteBtn.innerHTML = tmpIconProvider.getIconSVGMarkup('trash', 12);
+				delete this.pict.views[tmpKey];
+				continue;
 			}
-			else
+			// Match any previously-injected layout-algorithm section by hash
+			// suffix (manifests use unique algorithm-suffixed section names).
+			if (tmpKey.indexOf('PictSectionForm-PFL') === 0)
 			{
-				tmpDeleteBtn.textContent = '×';
+				delete this.pict.views[tmpKey];
 			}
-			tmpRow.appendChild(tmpDeleteBtn);
-
-			// Click row → restore layout
-			tmpRow.addEventListener('click', (pEvent) =>
-			{
-				// Don't restore if they clicked the delete button
-				if (pEvent.target.closest('.pict-flow-popup-layout-delete'))
-				{
-					return;
-				}
-				this._FlowView._LayoutProvider.restoreLayout(tmpLayout.Hash);
-				this._closePopup();
-			});
-
-			// Click delete → delete layout and refresh popup
-			tmpDeleteBtn.addEventListener('click', (pEvent) =>
-			{
-				pEvent.stopPropagation();
-				this._FlowView._LayoutProvider.deleteLayout(tmpLayout.Hash);
-				// Refresh the popup content
-				while (pContainer.firstChild)
-				{
-					pContainer.removeChild(pContainer.firstChild);
-				}
-				this._buildLayoutPopup(pContainer);
-			});
-
-			pContainer.appendChild(tmpRow);
 		}
+		this._LayoutFormMetacontroller = null;
 	}
 
-	// ── Settings Popup ───────────────────────────────────────────────────
+	/**
+	 * Look up which form-metacontroller service is registered on the host
+	 * Pict instance. pict-section-form has been published under both
+	 * 'PictFormMetacontroller' and (older) 'PictViewFormMetacontroller'
+	 * names; check both, in that order.
+	 * @returns {string|null}
+	 */
+	_resolveMetacontrollerServiceType()
+	{
+		if (!this.fable || !this.fable.servicesMap) return null;
+		if (this.fable.servicesMap.hasOwnProperty('PictFormMetacontroller'))     return 'PictFormMetacontroller';
+		if (this.fable.servicesMap.hasOwnProperty('PictViewFormMetacontroller')) return 'PictViewFormMetacontroller';
+		return null;
+	}
 
 	/**
-	 * Build the Settings popup content (theme dropdown + noise slider).
+	 * Build the parameter form section using a pict-section-form
+	 * metacontroller. Creates a host div, binds the active layout
+	 * parameters to `pict.AppData.PictFlowLayoutEditor.Parameters`, and
+	 * injects the algorithm's `ParameterManifest`. Form-input changes
+	 * propagate back to `_FlowData.LayoutParameters` via a single
+	 * `change`/`input` listener on the popup container.
+	 *
 	 * @param {HTMLElement} pContainer
+	 * @param {Object} pAlgoDescriptor
+	 * @param {{ Algorithm: string, Parameters: Object }} pCurrentSettings
+	 * @param {string} pMetacontrollerType - 'PictFormMetacontroller' or 'PictViewFormMetacontroller'
 	 */
-	_buildSettingsPopup(pContainer)
+	_mountLayoutParameterMetacontroller(pContainer, pAlgoDescriptor, pCurrentSettings, pMetacontrollerType)
 	{
-		if (!this._FlowView || !this._FlowView._ThemeProvider) return;
-
-		let tmpThemeProvider = this._FlowView._ThemeProvider;
-
-		// Theme selector section
-		let tmpThemeSection = document.createElement('div');
-		tmpThemeSection.className = 'pict-flow-popup-settings-section';
-
-		let tmpThemeLabel = document.createElement('label');
-		tmpThemeLabel.className = 'pict-flow-popup-settings-label';
-		tmpThemeLabel.textContent = 'Theme';
-		tmpThemeSection.appendChild(tmpThemeLabel);
+		let tmpManifest = JSON.parse(JSON.stringify(pAlgoDescriptor.ParameterManifest));
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
 
-		let tmpThemeSelect = document.createElement('select');
-		tmpThemeSelect.className = 'pict-flow-popup-settings-select';
+		// Section header + divider
+		let tmpDivider = document.createElement('div');
+		tmpDivider.className = 'pict-flow-popup-divider';
+		pContainer.appendChild(tmpDivider);
 
-		let tmpThemeKeys = tmpThemeProvider.getThemeKeys();
-		let tmpActiveKey = tmpThemeProvider.getActiveThemeKey();
+		// Form host div — the metacontroller renders into here. Inline
+		// onclick stops popup-close propagation; onchange/oninput drive the
+		// _FlowData.LayoutParameters writeback (see _pushFormBack).
+		let tmpHostID = `Flow-Toolbar-LayoutForm-${tmpFlowViewIdentifier}`;
+		this._LayoutFormHostID = tmpHostID;
+
+		let tmpHostDiv = document.createElement('div');
+		tmpHostDiv.id = tmpHostID;
+		tmpHostDiv.className = 'pict-flow-popup-layout-form-host';
+		tmpHostDiv.setAttribute('data-collapsed', this._LayoutFormExpanded ? 'false' : 'true');
+		tmpHostDiv.setAttribute('onclick', 'event.stopPropagation()');
+		tmpHostDiv.setAttribute('onchange',
+			"_Pict.views['" + tmpFlowViewIdentifier + "']._ToolbarView._pushLayoutFormBack('" + pCurrentSettings.Algorithm + "')");
+		tmpHostDiv.setAttribute('oninput',
+			"_Pict.views['" + tmpFlowViewIdentifier + "']._ToolbarView._pushLayoutFormBack('" + pCurrentSettings.Algorithm + "')");
+		pContainer.appendChild(tmpHostDiv);
+
+		// Bind the layout parameters as the data source for the form.
+		// `injectManifestAndRender(manifest, _, UUID)` calls
+		// `createDistinctManifest` which prepends the UUID to every descriptor
+		// address (so re-injecting the same manifest doesn't collide). We use
+		// the algorithm name as the UUID, so the form's expected address is
+		// `AppData.<Algorithm>.PictFlowLayoutEditor.Parameters.<Key>` —
+		// bind there, not at the unprefixed root.
+		let tmpScope = pCurrentSettings.Algorithm;
+		this.pict.AppData[tmpScope] = this.pict.AppData[tmpScope] || {};
+		this.pict.AppData[tmpScope].PictFlowLayoutEditor = this.pict.AppData[tmpScope].PictFlowLayoutEditor || {};
+		this.pict.AppData[tmpScope].PictFlowLayoutEditor.Parameters = JSON.parse(JSON.stringify(pCurrentSettings.Parameters || {}));
+
+		// Always recreate the metacontroller per mount. Reusing the same
+		// metacontroller across algorithm switches accumulates section views
+		// (each switch's manifest gets injected onto the existing roster) and
+		// the metatemplate ends up wedging multiple sections into a single
+		// shared destination — only the last one survives. Fresh instance per
+		// mount keeps the DOM consistent; we also evict the prior
+		// `PictSectionForm-*` views from `pict.views` so they GC cleanly.
+		this._evictLayoutFormViews();
+		try
+		{
+			this._LayoutFormMetacontroller = this.fable.instantiateServiceProviderWithoutRegistration(
+				pMetacontrollerType,
+				{
+					ViewIdentifier: `Flow-Toolbar-LayoutForm-MC-${tmpFlowViewIdentifier}-${this.fable.getUUID()}`,
+					DefaultDestinationAddress: `#${tmpHostID}`,
+					AutoRender: false,
+					AutoPopulateAfterRender: true,
+					AutoSolveBeforeRender: false
+				});
+		}
+		catch (pError)
+		{
+			this.log.warn(`Failed to instantiate ${pMetacontrollerType}: ${pError.message}`);
+			this._LayoutFormMetacontroller = null;
+		}
 
-		for (let i = 0; i < tmpThemeKeys.length; i++)
+		if (!this._LayoutFormMetacontroller)
 		{
-			let tmpOption = document.createElement('option');
-			tmpOption.value = tmpThemeKeys[i];
+			tmpHostDiv.innerHTML = '<em style="padding:8px;display:block;opacity:0.7;">pict-section-form not available; parameter form skipped.</em>';
+			return;
+		}
 
-			let tmpTheme = tmpThemeProvider._Themes[tmpThemeKeys[i]];
-			tmpOption.textContent = tmpTheme.Label || tmpThemeKeys[i];
+		// Establish the form-container div the metacontroller expects.
+		let tmpFormContainerID = `Pict-${this._LayoutFormMetacontroller.UUID}-FormContainer`;
+		tmpHostDiv.innerHTML = `<div id="${tmpFormContainerID}" class="pict-form pict-flow-popup-layout-form"></div>`;
 
-			if (tmpThemeKeys[i] === tmpActiveKey)
+		try
+		{
+			// Use `injectManifest` + explicit per-section destination divs +
+			// per-section render. Don't use `injectManifestAndRender` —
+			// its metatemplate flow ends up wedging multi-section manifests
+			// into a single shared destination (each section's render call
+			// uses RenderMethod=replace, blowing the others away). The
+			// explicit path gives each section its own destination div and
+			// renders them independently.
+			let tmpInjectFn = (typeof this._LayoutFormMetacontroller.injectManifest === 'function')
+				? this._LayoutFormMetacontroller.injectManifest.bind(this._LayoutFormMetacontroller)
+				: null;
+			if (!tmpInjectFn) throw new Error('Metacontroller exposes neither injectManifest nor injectManifestAndRender');
+
+			// Pass the algorithm name as the section-hash discriminator so
+			// re-injecting the same algorithm gets unique view registrations.
+			// (createDistinctManifest does the address-prefixing too — see
+			// the per-algorithm AppData binding above.)
+			let tmpDistinct = (typeof this._LayoutFormMetacontroller.createDistinctManifest === 'function')
+				? this._LayoutFormMetacontroller.createDistinctManifest(tmpManifest, pCurrentSettings.Algorithm)
+				: tmpManifest;
+
+			let tmpViews = tmpInjectFn(tmpDistinct);
+
+			// Build a destination div per section view, in order, and render each.
+			let tmpFormContainerEl = tmpHostDiv.querySelector(`#${tmpFormContainerID}`);
+			if (tmpFormContainerEl)
 			{
-				tmpOption.selected = true;
+				let tmpInner = '';
+				for (let i = 0; i < tmpViews.length; i++)
+				{
+					let tmpDest = tmpViews[i].options.DefaultDestinationAddress;
+					if (tmpDest && tmpDest.charAt(0) === '#') tmpDest = tmpDest.substring(1);
+					tmpInner += `<div id="${tmpDest}" class="pict-form-view"></div>`;
+				}
+				tmpFormContainerEl.innerHTML = tmpInner;
 			}
-			tmpThemeSelect.appendChild(tmpOption);
+			// Defer render() to the next microtask so the popup has been
+			// appended to the DOM by `_openPopup` — pict-section-form
+			// resolves destinations via `document.querySelector`, which
+			// can't see detached subtrees. (Same workaround the
+			// metacontroller's own `injectManifestAndRender` uses.)
+			setTimeout(() =>
+			{
+				for (let i = 0; i < tmpViews.length; i++)
+				{
+					tmpViews[i].render();
+					if (typeof tmpViews[i].marshalToView === 'function')
+					{
+						tmpViews[i].marshalToView();
+					}
+				}
+			}, 0);
+		}
+		catch (pError)
+		{
+			this.log.warn(`PictViewFlowToolbar: layout-form injection failed: ${pError.message}`);
+			tmpHostDiv.innerHTML = `<em style="padding:8px;display:block;opacity:0.7;">Form render error: ${pError.message}</em>`;
+			return;
 		}
 
-		tmpThemeSelect.addEventListener('change', () =>
+		// Form-change writeback runs through the host div's inline
+		// onchange/oninput attributes (set above), which call
+		// `_pushLayoutFormBack(algorithm)`.
+	}
+
+	/**
+	 * Inline handler for layout-parameter form changes. Pushes Informary's
+	 * write into AppData back into `_FlowData.LayoutParameters` and
+	 * re-applies the layout (when non-Custom). De-bounces via microtask so
+	 * multi-key edits collapse to a single layout pass.
+	 *
+	 * @param {string} pAlgorithm
+	 */
+	_pushLayoutFormBack(pAlgorithm)
+	{
+		if (this._LayoutFormPushScheduled) return;
+		this._LayoutFormPushScheduled = true;
+		Promise.resolve().then(() =>
 		{
-			this._FlowView.setTheme(tmpThemeSelect.value);
-			// Refresh the noise slider visibility
-			this._refreshNoiseSlider(pContainer);
+			this._LayoutFormPushScheduled = false;
+			if (!this._FlowView) return;
+			let tmpScopedRoot = this.pict.AppData[pAlgorithm] || {};
+			let tmpEditorParams = (tmpScopedRoot.PictFlowLayoutEditor || {}).Parameters || {};
+			let tmpMerged = Object.assign({}, this._FlowView.getLayoutAlgorithm().Parameters || {}, tmpEditorParams);
+			this._FlowView.setLayoutAlgorithm(pAlgorithm, tmpMerged);
 		});
+	}
 
-		// Prevent popup close on select interaction
-		tmpThemeSelect.addEventListener('click', (pEvent) => { pEvent.stopPropagation(); });
+	/**
+	 * Build a single parameter input row for the layout-algorithm popup.
+	 * Wires the input's change handler to update the flow's
+	 * `LayoutParameters` and re-apply the layout if non-Custom.
+	 *
+	 * @param {string} pKey
+	 * @param {Object} pSchema - { Type: 'number' | 'string' | 'boolean' | 'enum', Default, Options? }
+	 * @param {*} pCurrentValue
+	 * @returns {HTMLElement}
+	 */
+	_buildLayoutParamInput(pKey, pSchema, pCurrentValue)
+	{
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
+		let tmpViewPath = "_Pict.views['" + tmpFlowViewIdentifier + "']._ToolbarView";
+		let tmpKeyEsc = pKey.replace(/'/g, "\\'");
+		let tmpInput;
 
-		tmpThemeSection.appendChild(tmpThemeSelect);
-		pContainer.appendChild(tmpThemeSection);
+		if (pSchema.Type === 'boolean')
+		{
+			tmpInput = document.createElement('input');
+			tmpInput.type = 'checkbox';
+			tmpInput.checked = !!pCurrentValue;
+			tmpInput.setAttribute('onchange',
+				tmpViewPath + "._updateLayoutParameter('" + tmpKeyEsc + "', this.checked)");
+		}
+		else if (pSchema.Type === 'enum' && Array.isArray(pSchema.Options))
+		{
+			tmpInput = document.createElement('select');
+			tmpInput.className = 'pict-flow-popup-settings-select';
+			for (let i = 0; i < pSchema.Options.length; i++)
+			{
+				let tmpOpt = document.createElement('option');
+				tmpOpt.value = pSchema.Options[i];
+				tmpOpt.textContent = pSchema.Options[i];
+				if (pSchema.Options[i] === pCurrentValue) tmpOpt.selected = true;
+				tmpInput.appendChild(tmpOpt);
+			}
+			tmpInput.setAttribute('onchange',
+				tmpViewPath + "._updateLayoutParameter('" + tmpKeyEsc + "', this.value)");
+		}
+		else if (pSchema.Type === 'number' || pSchema.Type === 'Number' || pSchema.Type === 'PreciseNumber')
+		{
+			tmpInput = document.createElement('input');
+			tmpInput.type = 'number';
+			tmpInput.className = 'pict-flow-popup-settings-input';
+			let tmpIsPrecise = (pSchema.Type === 'PreciseNumber');
+			if (typeof pSchema.Min === 'number') tmpInput.min = String(pSchema.Min);
+			if (typeof pSchema.Max === 'number') tmpInput.max = String(pSchema.Max);
+			tmpInput.step = tmpIsPrecise ? 'any' : '1';
+			tmpInput.value = (pCurrentValue == null) ? '' : String(pCurrentValue);
+			tmpInput.style.width = '90px';
+			let tmpPreciseFlag = tmpIsPrecise ? 'true' : 'false';
+			tmpInput.setAttribute('onchange',
+				tmpViewPath + "._updateLayoutNumberParameter('" + tmpKeyEsc + "', this.value, " + tmpPreciseFlag + ")");
+		}
+		else
+		{
+			tmpInput = document.createElement('input');
+			tmpInput.type = 'text';
+			tmpInput.className = 'pict-flow-popup-settings-input';
+			tmpInput.value = (pCurrentValue == null) ? '' : String(pCurrentValue);
+			tmpInput.style.width = '90px';
+			tmpInput.setAttribute('onchange',
+				tmpViewPath + "._updateLayoutParameter('" + tmpKeyEsc + "', this.value)");
+		}
 
-		// Divider
-		let tmpDivider = document.createElement('div');
-		tmpDivider.className = 'pict-flow-popup-divider';
-		pContainer.appendChild(tmpDivider);
+		tmpInput.setAttribute('onclick', 'event.stopPropagation()');
+		return tmpInput;
+	}
 
-		// Noise level section
-		let tmpNoiseSection = document.createElement('div');
-		tmpNoiseSection.className = 'pict-flow-popup-settings-section pict-flow-popup-settings-noise';
-		tmpNoiseSection.setAttribute('data-settings-type', 'noise');
+	/**
+	 * Update a single layout parameter on the flow and re-apply the layout
+	 * if the configured algorithm is not 'Custom'.
+	 * @param {string} pKey
+	 * @param {*} pValue
+	 */
+	_updateLayoutParameter(pKey, pValue)
+	{
+		if (!this._FlowView) return;
+		let tmpSettings = this._FlowView.getLayoutAlgorithm();
+		let tmpParams = Object.assign({}, tmpSettings.Parameters || {});
+		tmpParams[pKey] = pValue;
+		this._FlowView.setLayoutAlgorithm(tmpSettings.Algorithm, tmpParams);
+	}
 
-		let tmpNoiseLabel = document.createElement('label');
-		tmpNoiseLabel.className = 'pict-flow-popup-settings-label';
-		tmpNoiseLabel.textContent = 'Noise';
-		tmpNoiseSection.appendChild(tmpNoiseLabel);
+	/**
+	 * Inline-handler helper for numeric parameter inputs. Preserves the
+	 * raw string when PreciseNumber so big.js / ExpressionParser can use
+	 * it without float round-trip drift.
+	 *
+	 * @param {string} pKey
+	 * @param {string} pRawValue
+	 * @param {boolean} pIsPrecise
+	 */
+	_updateLayoutNumberParameter(pKey, pRawValue, pIsPrecise)
+	{
+		if (pRawValue === '') return;
+		if (pIsPrecise)
+		{
+			this._updateLayoutParameter(pKey, pRawValue);
+			return;
+		}
+		let tmpNum = parseFloat(pRawValue);
+		if (isNaN(tmpNum)) return;
+		this._updateLayoutParameter(pKey, tmpNum);
+	}
 
-		let tmpNoiseRow = document.createElement('div');
-		tmpNoiseRow.className = 'pict-flow-popup-settings-slider-row';
+	// ── Settings Popup ───────────────────────────────────────────────────
 
-		let tmpNoiseSlider = document.createElement('input');
-		tmpNoiseSlider.type = 'range';
-		tmpNoiseSlider.className = 'pict-flow-popup-settings-slider';
-		tmpNoiseSlider.min = '0';
-		tmpNoiseSlider.max = '100';
-		tmpNoiseSlider.value = String(Math.round(tmpThemeProvider.getNoiseLevel() * 100));
+	/**
+	 * Build the Settings popup using a template with inline handlers.
+	 *
+	 * Theme options are iterated via `{~TS:~}` from AppData. Sliders and
+	 * selects fire inline handlers that update the FlowView's theme state.
+	 *
+	 * @param {HTMLElement} pContainer
+	 */
+	_buildSettingsPopup(pContainer)
+	{
+		if (!this._FlowView || !this._FlowView._ThemeProvider) return;
 
-		let tmpNoiseValue = document.createElement('span');
-		tmpNoiseValue.className = 'pict-flow-popup-settings-slider-value';
-		tmpNoiseValue.textContent = tmpNoiseSlider.value + '%';
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
+		let tmpThemeProvider = this._FlowView._ThemeProvider;
+		let tmpThemeKeys = tmpThemeProvider.getThemeKeys();
+		let tmpActiveKey = tmpThemeProvider.getActiveThemeKey();
 
-		tmpNoiseSlider.addEventListener('input', () =>
+		let tmpThemeOptions = [];
+		for (let i = 0; i < tmpThemeKeys.length; i++)
 		{
-			let tmpLevel = parseInt(tmpNoiseSlider.value, 10) / 100;
-			tmpNoiseValue.textContent = tmpNoiseSlider.value + '%';
-			this._FlowView.setNoiseLevel(tmpLevel);
-		});
+			let tmpTheme = tmpThemeProvider._Themes[tmpThemeKeys[i]];
+			tmpThemeOptions.push(
+			{
+				Value: tmpThemeKeys[i],
+				Label: tmpTheme.Label || tmpThemeKeys[i],
+				SelectedAttr: (tmpThemeKeys[i] === tmpActiveKey) ? ' selected="selected"' : ''
+			});
+		}
 
-		// Prevent popup close on slider interaction
-		tmpNoiseSlider.addEventListener('click', (pEvent) => { pEvent.stopPropagation(); });
-		tmpNoiseSlider.addEventListener('pointerdown', (pEvent) => { pEvent.stopPropagation(); });
+		let tmpThemeOptionsHTML = this.pict.parseTemplateByHash('Flow-Layout-OptionList', { Options: tmpThemeOptions });
+
+		let tmpNoiseLevel = Math.round(tmpThemeProvider.getNoiseLevel() * 100);
+		let tmpActiveTheme = tmpThemeProvider.getActiveTheme();
+		let tmpNoiseEnabled = !!(tmpActiveTheme && tmpActiveTheme.NoiseConfig && tmpActiveTheme.NoiseConfig.Enabled);
+		let tmpNoiseDisplay = tmpNoiseEnabled ? '' : 'display:none;';
+
+		this.pict.ContentAssignment.assignContent(pContainer,
+			'<div class="pict-flow-popup-settings-section">'
+			+ '<label class="pict-flow-popup-settings-label">Theme</label>'
+			+ '<select class="pict-flow-popup-settings-select"'
+			+ ' onclick="event.stopPropagation()"'
+			+ ' onchange="_Pict.views[\'' + tmpFlowViewIdentifier + '\']._ToolbarView._handleThemeSelectChange(this.value)">'
+			+ tmpThemeOptionsHTML
+			+ '</select>'
+			+ '</div>'
+			+ '<div class="pict-flow-popup-divider"></div>'
+			+ '<div class="pict-flow-popup-settings-section pict-flow-popup-settings-noise" data-settings-type="noise" style="' + tmpNoiseDisplay + '">'
+			+ '<label class="pict-flow-popup-settings-label">Noise</label>'
+			+ '<div class="pict-flow-popup-settings-slider-row">'
+			+ '<input type="range" class="pict-flow-popup-settings-slider" min="0" max="100" value="' + tmpNoiseLevel + '"'
+			+ ' onclick="event.stopPropagation()"'
+			+ ' onpointerdown="event.stopPropagation()"'
+			+ ' oninput="_Pict.views[\'' + tmpFlowViewIdentifier + '\']._ToolbarView._handleNoiseSliderInput(this)" />'
+			+ '<span class="pict-flow-popup-settings-slider-value">' + tmpNoiseLevel + '%</span>'
+			+ '</div>'
+			+ '</div>');
+	}
 
-		tmpNoiseRow.appendChild(tmpNoiseSlider);
-		tmpNoiseRow.appendChild(tmpNoiseValue);
-		tmpNoiseSection.appendChild(tmpNoiseRow);
-		pContainer.appendChild(tmpNoiseSection);
+	/**
+	 * Inline handler — apply selected flow theme and refresh the noise
+	 * slider visibility (some themes don't expose noise).
+	 */
+	_handleThemeSelectChange(pThemeKey)
+	{
+		if (!this._FlowView) return;
+		this._FlowView.setTheme(pThemeKey);
 
-		// Show/hide noise slider based on active theme
-		this._refreshNoiseSlider(pContainer);
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
+		let tmpPopupEl = document.getElementById(`Flow-Toolbar-Popup-${tmpFlowViewIdentifier}`);
+		if (tmpPopupEl) this._refreshNoiseSlider(tmpPopupEl);
+	}
+
+	/**
+	 * Inline handler — push slider position into the noise level and
+	 * update the percentage label adjacent to it.
+	 */
+	_handleNoiseSliderInput(pSlider)
+	{
+		let tmpRaw = parseInt(pSlider.value, 10);
+		if (isNaN(tmpRaw)) return;
+		let tmpLevel = tmpRaw / 100;
+		let tmpValueLabel = pSlider.parentNode ? pSlider.parentNode.querySelector('.pict-flow-popup-settings-slider-value') : null;
+		if (tmpValueLabel) tmpValueLabel.textContent = tmpRaw + '%';
+		if (this._FlowView) this._FlowView.setNoiseLevel(tmpLevel);
 	}
 
 	/**
@@ -1202,6 +1763,17 @@ class PictViewFlowToolbar extends libPictView
 				break;
 
 			case 'auto-layout':
+				// Legacy alias kept for backward compatibility with any
+				// caller still firing 'auto-layout'. The toolbar's "Auto"
+				// button now uses 'apply-current-layout' (below).
+				this._FlowView.autoLayout();
+				break;
+
+			case 'apply-current-layout':
+				// Respects whichever algorithm is configured in the
+				// Algorithm popup. Falls back to Layered when the
+				// configured value is 'Custom' or unset (autoLayout's
+				// existing behavior — "do something useful").
 				this._FlowView.autoLayout();
 				break;
 
@@ -1213,6 +1785,14 @@ class PictViewFlowToolbar extends libPictView
 				this._openPopup('layout');
 				break;
 
+			case 'layout-algorithm-popup':
+				this._openPopup('layout-algorithm');
+				break;
+
+			case 'apply-layout':
+				this._FlowView.applyCurrentLayout();
+				break;
+
 			case 'settings-popup':
 				this._openPopup('settings');
 				break;