pict-section-flow 0.0.18 → 0.0.19

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

@@ -21,72 +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 saved 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">Layouts</span>
 			<span class="pict-flow-toolbar-btn-chevron" id="Flow-Toolbar-LayoutChevron-{~D:Record.FlowViewIdentifier~}"></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">
+			<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">
+			<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>'
 		}
 	],
 
@@ -141,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();
@@ -425,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);
+				tmpIconHTML = 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);
-			}
-
-			// 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];
@@ -641,318 +664,225 @@ 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)
+				let tmpIconHTML = '';
+				let tmpIsEmoji = false;
+				if (tmpMeta.Icon && tmpIconProvider && !tmpIconProvider.isEmojiIcon(tmpMeta.Icon))
 				{
-					tmpCardEl.classList.add('disabled');
+					tmpIconHTML = tmpIconProvider.getIconSVGMarkup(tmpIconProvider.resolveIconKey(tmpMeta), 14);
 				}
-				tmpCardEl.setAttribute('data-card-type', tmpCardConfig.Hash);
-
-				if (tmpMeta.Tooltip)
+				else if (tmpMeta.Icon)
 				{
-					tmpCardEl.setAttribute('title', tmpMeta.Tooltip);
+					tmpIsEmoji = true;
 				}
-				else if (tmpMeta.Description)
+				else if (tmpIconProvider)
 				{
-					tmpCardEl.setAttribute('title', tmpMeta.Description);
+					tmpIconHTML = tmpIconProvider.getIconSVGMarkup('default', 14);
 				}
 
-				// Icon or color swatch
-				if (tmpMeta.Icon)
+				tmpMatching.push(
 				{
-					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 tmpIconSpan = document.createElement('span');
-					tmpIconSpan.className = 'pict-flow-palette-card-icon';
-					tmpIconSpan.innerHTML = this._FlowView._IconProvider.getIconSVGMarkup('default', 14);
-					tmpCardEl.appendChild(tmpIconSpan);
-				}
-				else if (tmpCardConfig.TitleBarColor)
-				{
-					let tmpSwatch = document.createElement('span');
-					tmpSwatch.className = 'pict-flow-palette-card-swatch';
-					tmpSwatch.style.backgroundColor = tmpCardConfig.TitleBarColor;
-					tmpCardEl.appendChild(tmpSwatch);
-				}
-
-				// 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)
-				{
-					let tmpCodeSpan = document.createElement('span');
-					tmpCodeSpan.className = 'pict-flow-palette-card-code';
-					tmpCodeSpan.textContent = tmpMeta.Code;
-					tmpCardEl.appendChild(tmpCodeSpan);
-				}
-
-				// Click handler
-				tmpCardEl.addEventListener('click', () =>
-				{
-					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;
-
-		// 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 tmpSaveInput = document.createElement('input');
-		tmpSaveInput.className = 'pict-flow-popup-layout-save-input';
-		tmpSaveInput.setAttribute('type', 'text');
-		tmpSaveInput.setAttribute('placeholder', 'Layout name...');
-		tmpSaveInputRow.appendChild(tmpSaveInput);
-
-		let tmpSaveConfirmBtn = document.createElement('button');
-		tmpSaveConfirmBtn.className = 'pict-flow-popup-layout-save-confirm';
-		tmpSaveConfirmBtn.title = 'Save';
-		if (tmpIconProvider)
-		{
-			tmpSaveConfirmBtn.innerHTML = tmpIconProvider.getIconSVGMarkup('save', 14);
-		}
-		else
+		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++)
 		{
-			tmpSaveConfirmBtn.textContent = '✓';
+			tmpLayoutRecords.push(
+			{
+				LayoutHash: tmpLayouts[i].Hash,
+				Name: tmpLayouts[i].Name || '',
+				DeleteIconHTML: tmpDeleteIconHTML,
+				FlowViewIdentifier: tmpFlowViewIdentifier
+			});
 		}
-		tmpSaveInputRow.appendChild(tmpSaveConfirmBtn);
 
-		// "Save Current Layout" clickable row
-		let tmpSaveRow = document.createElement('div');
-		tmpSaveRow.className = 'pict-flow-popup-layout-save';
+		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 tmpSaveIcon = document.createElement('span');
-		tmpSaveIcon.className = 'pict-flow-popup-layout-save-icon';
-		if (tmpIconProvider)
-		{
-			tmpSaveIcon.innerHTML = tmpIconProvider.getIconSVGMarkup('save', 14);
+	/**
+	 * 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);
 		}
-		tmpSaveRow.appendChild(tmpSaveIcon);
-
-		let tmpSaveText = document.createElement('span');
-		tmpSaveText.textContent = 'Save Current Layout';
-		tmpSaveRow.appendChild(tmpSaveText);
-
-		// Click "Save Current Layout" to reveal the input row
-		tmpSaveRow.addEventListener('click', () =>
-		{
-			tmpSaveRow.style.display = 'none';
-			tmpSaveInputRow.style.display = '';
-			tmpSaveInput.value = '';
-			setTimeout(() => { tmpSaveInput.focus(); }, 50);
-		});
-
-		// Confirm save via button click
-		let tmpDoSave = () =>
-		{
-			let tmpName = tmpSaveInput.value.trim();
-			if (tmpName === '') return;
-			this._FlowView._LayoutProvider.saveLayout(tmpName);
-			// Refresh the popup content
-			while (pContainer.firstChild)
-			{
-				pContainer.removeChild(pContainer.firstChild);
-			}
-			this._buildLayoutPopup(pContainer);
-		};
-
-		tmpSaveConfirmBtn.addEventListener('click', tmpDoSave);
-
-		// Confirm save via Enter key
-		tmpSaveInput.addEventListener('keydown', (pEvent) =>
-		{
-			if (pEvent.key === 'Enter')
-			{
-				pEvent.preventDefault();
-				tmpDoSave();
-			}
-			else if (pEvent.key === 'Escape')
-			{
-				// Cancel — hide input, show the save row again
-				tmpSaveInputRow.style.display = 'none';
-				tmpSaveRow.style.display = '';
-			}
-		});
-
-		// Prevent clicks inside the input from closing the popup
-		tmpSaveInput.addEventListener('click', (pEvent) =>
-		{
-			pEvent.stopPropagation();
-		});
-
-		tmpSaveSection.appendChild(tmpSaveRow);
-		tmpSaveSection.appendChild(tmpSaveInputRow);
-		pContainer.appendChild(tmpSaveSection);
-
-		// Divider
-		let tmpDivider = document.createElement('div');
-		tmpDivider.className = 'pict-flow-popup-divider';
-		pContainer.appendChild(tmpDivider);
+	}
 
-		// Layout rows
-		if (!this._FlowView || !this._FlowView._LayoutProvider)
+	/**
+	 * Inline handler — Enter saves, Escape cancels.
+	 */
+	_handleLayoutSaveKey(pEvent, pInputID, pSaveRowID, pInputRowID)
+	{
+		if (pEvent.key === 'Enter')
 		{
-			let tmpEmpty = document.createElement('div');
-			tmpEmpty.className = 'pict-flow-popup-list-empty';
-			tmpEmpty.textContent = 'No saved layouts';
-			pContainer.appendChild(tmpEmpty);
-			return;
+			pEvent.preventDefault();
+			this._confirmLayoutSave(pInputID);
 		}
-
-		let tmpLayouts = this._FlowView._LayoutProvider.getLayouts();
-
-		if (tmpLayouts.length === 0)
+		else if (pEvent.key === 'Escape')
 		{
-			let tmpEmpty = document.createElement('div');
-			tmpEmpty.className = 'pict-flow-popup-list-empty';
-			tmpEmpty.textContent = 'No saved layouts';
-			pContainer.appendChild(tmpEmpty);
-			return;
+			let tmpRow = document.getElementById(pSaveRowID);
+			let tmpInputRow = document.getElementById(pInputRowID);
+			if (tmpInputRow) tmpInputRow.style.display = 'none';
+			if (tmpRow) tmpRow.style.display = '';
 		}
+	}
 
-		for (let i = 0; i < tmpLayouts.length; i++)
-		{
-			let tmpLayout = tmpLayouts[i];
-
-			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);
+	/**
+	 * 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);
 
-			// 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)
-			{
-				tmpDeleteBtn.innerHTML = tmpIconProvider.getIconSVGMarkup('trash', 12);
-			}
-			else
-			{
-				tmpDeleteBtn.textContent = '×';
-			}
-			tmpRow.appendChild(tmpDeleteBtn);
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
+		let tmpPopupEl = document.getElementById(`Flow-Toolbar-Popup-${tmpFlowViewIdentifier}`);
+		if (tmpPopupEl) this._buildLayoutPopup(tmpPopupEl);
+	}
 
-			// 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();
-			});
+	/**
+	 * 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();
+	}
 
-			// 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);
-			});
+	/**
+	 * 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);
 
-			pContainer.appendChild(tmpRow);
-		}
+		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 content. Distinct from the
-	 * `_buildLayoutPopup` above which manages **saved layout snapshots**.
-	 * This popup lets the user pick a layout algorithm, tune its
-	 * parameters, and toggle auto-apply.
+	 * 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
 	 */
@@ -960,251 +890,202 @@ class PictViewFlowToolbar extends libPictView
 	{
 		if (!this._FlowView || !this._FlowView._LayoutService) return;
 
+		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) : '⚙';
 
-		// ── Algorithm row: label + dropdown + collapse toggle ────
-		let tmpAlgoSection = document.createElement('div');
-		tmpAlgoSection.className = 'pict-flow-popup-settings-section pict-flow-popup-layout-algorithm-row';
-
-		let tmpAlgoLabel = document.createElement('label');
-		tmpAlgoLabel.className = 'pict-flow-popup-settings-label';
-		tmpAlgoLabel.textContent = 'Algorithm';
-		tmpAlgoSection.appendChild(tmpAlgoLabel);
-
-		let tmpAlgoControls = document.createElement('div');
-		tmpAlgoControls.className = 'pict-flow-popup-layout-algorithm-controls';
-
-		let tmpAlgoSelect = document.createElement('select');
-		tmpAlgoSelect.className = 'pict-flow-popup-settings-select pict-flow-popup-layout-algorithm-select';
-		tmpAlgoSelect.setAttribute('data-layout-control', 'algorithm');
-
-		let tmpAlgorithms = tmpLayoutService.listAlgorithms();
-		for (let i = 0; i < tmpAlgorithms.length; i++)
+		// Build option records for the dropdowns
+		let tmpAlgoOptions = tmpLayoutService.listAlgorithms().map((pAlgo) => (
 		{
-			let tmpOption = document.createElement('option');
-			tmpOption.value = tmpAlgorithms[i].Name;
-			tmpOption.textContent = tmpAlgorithms[i].Label || tmpAlgorithms[i].Name;
-			if (tmpAlgorithms[i].Name === tmpCurrentSettings.Algorithm)
-			{
-				tmpOption.selected = true;
-			}
-			tmpAlgoSelect.appendChild(tmpOption);
-		}
+			Value: pAlgo.Name,
+			Label: pAlgo.Label || pAlgo.Name,
+			SelectedAttr: (pAlgo.Name === tmpCurrentSettings.Algorithm) ? ' selected="selected"' : ''
+		}));
 
-		tmpAlgoSelect.addEventListener('change', () =>
+		let tmpEdgeOptionRecords = [];
+		tmpEdgeOptionRecords.push(
 		{
-			let tmpName = tmpAlgoSelect.value;
-			let tmpAlgo = tmpLayoutService.getAlgorithm(tmpName);
-			let tmpDefaults = (tmpAlgo && tmpAlgo.DefaultParameters) ? JSON.parse(JSON.stringify(tmpAlgo.DefaultParameters)) : {};
-			this._FlowView.setLayoutAlgorithm(tmpName, tmpDefaults);
-			// Refresh the popup so the parameter form reflects the new algorithm
-			while (pContainer.firstChild)
-			{
-				pContainer.removeChild(pContainer.firstChild);
-			}
-			this._buildLayoutAlgorithmPopup(pContainer);
+			Value: '__inherit__',
+			Label: `Inherit from layout (${tmpDefaultThemeName})`,
+			SelectedAttr: !tmpExplicitEdgeOverride ? ' selected="selected"' : ''
 		});
-		tmpAlgoSelect.addEventListener('click', (pEvent) => { pEvent.stopPropagation(); });
+		let tmpEdgeThemes = tmpLayoutService.listEdgeThemes();
+		for (let i = 0; i < tmpEdgeThemes.length; i++)
+		{
+			tmpEdgeOptionRecords.push(
+			{
+				Value: tmpEdgeThemes[i].Name,
+				Label: tmpEdgeThemes[i].Label || tmpEdgeThemes[i].Name,
+				SelectedAttr: (tmpEdgeThemes[i].Name === tmpExplicitEdgeOverride) ? ' selected="selected"' : ''
+			});
+		}
 
-		tmpAlgoControls.appendChild(tmpAlgoSelect);
+		let tmpAlgoOptionsHTML = this.pict.parseTemplateByHash('Flow-Layout-OptionList', { Options: tmpAlgoOptions });
+		let tmpEdgeOptionsHTML = this.pict.parseTemplateByHash('Flow-Layout-OptionList', { Options: tmpEdgeOptionRecords });
 
-		// Collapse toggle for the parameter form. Only meaningful when
-		// the algorithm actually has parameters (Custom doesn't).
 		let tmpHasParameters = !!(tmpAlgoDescriptor && (
 			(tmpAlgoDescriptor.ParameterManifest && tmpAlgoDescriptor.ParameterManifest.Descriptors) ||
 			(tmpAlgoDescriptor.ParameterSchema && Object.keys(tmpAlgoDescriptor.ParameterSchema).length > 0)
 		));
-		let tmpFormToggle = null;
-		if (tmpHasParameters)
-		{
-			tmpFormToggle = document.createElement('button');
-			tmpFormToggle.type = 'button';
-			tmpFormToggle.className = 'pict-flow-popup-collapse-toggle';
-			tmpFormToggle.title = this._LayoutFormExpanded ? 'Hide parameters' : 'Show parameters';
-			tmpFormToggle.setAttribute('aria-expanded', this._LayoutFormExpanded ? 'true' : 'false');
-			let tmpIconProvider = this._FlowView ? this._FlowView._IconProvider : null;
-			tmpFormToggle.innerHTML = tmpIconProvider
-				? tmpIconProvider.getIconSVGMarkup('settings', 13)
-				: '⚙';
-			tmpAlgoControls.appendChild(tmpFormToggle);
-		}
 
-		tmpAlgoSection.appendChild(tmpAlgoControls);
-		pContainer.appendChild(tmpAlgoSection);
+		let tmpAlgoDescription = (tmpAlgoDescriptor && tmpAlgoDescriptor.Description)
+			? '<div class="pict-flow-popup-control-description">' + tmpAlgoDescriptor.Description + '</div>'
+			: '';
 
-		// ── Description (one-liner under the dropdown row) ───
-		if (tmpAlgoDescriptor && tmpAlgoDescriptor.Description)
+		let tmpFormToggleHTML = '';
+		if (tmpHasParameters)
 		{
-			let tmpDescDiv = document.createElement('div');
-			tmpDescDiv.className = 'pict-flow-popup-control-description';
-			tmpDescDiv.textContent = tmpAlgoDescriptor.Description;
-			pContainer.appendChild(tmpDescDiv);
+			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>';
 		}
 
-		// ── Parameter form (collapsible, sits right under the
-		// algorithm row so the editor reads as part of the same
-		// "this is the algorithm" section) ───────────────────
-		this._buildLayoutParameterFormSection(pContainer, tmpAlgoDescriptor, tmpCurrentSettings);
+		let tmpAutoApplyID = `Flow-Toolbar-AutoApply-${tmpFlowViewIdentifier}`;
+		let tmpApplyDisabled = (tmpCurrentSettings.Algorithm === 'Custom') ? ' disabled' : '';
+		let tmpApplyTitle = (tmpCurrentSettings.Algorithm === 'Custom') ? ' title="Custom does not auto-position nodes"' : '';
 
-		// Wire toggle now that the form host element exists
-		if (tmpFormToggle)
+		let tmpEdgeDescriptionHTML = '';
+		if (tmpResolvedEdge)
 		{
-			tmpFormToggle.addEventListener('click', (pEvent) =>
+			let tmpResolvedDescriptor = tmpLayoutService.getEdgeTheme(tmpResolvedEdge);
+			if (tmpResolvedDescriptor && tmpResolvedDescriptor.Description)
 			{
-				pEvent.stopPropagation();
-				this._LayoutFormExpanded = !this._LayoutFormExpanded;
-				tmpFormToggle.setAttribute('aria-expanded', this._LayoutFormExpanded ? 'true' : 'false');
-				tmpFormToggle.title = this._LayoutFormExpanded ? 'Hide parameters' : 'Show parameters';
-				let tmpHost = this._LayoutFormHostID ? document.getElementById(this._LayoutFormHostID) : null;
-				if (tmpHost)
-				{
-					tmpHost.setAttribute('data-collapsed', this._LayoutFormExpanded ? 'false' : 'true');
-				}
-			});
+				tmpEdgeDescriptionHTML = '<div class="pict-flow-popup-control-description">' + tmpResolvedDescriptor.Description + '</div>';
+			}
 		}
 
-		// ── Edge theme dropdown ──────────────────────────────
-		let tmpEdgeDivider = document.createElement('div');
-		tmpEdgeDivider.className = 'pict-flow-popup-divider';
-		pContainer.appendChild(tmpEdgeDivider);
-
-		let tmpEdgeSection = document.createElement('div');
-		tmpEdgeSection.className = 'pict-flow-popup-settings-section';
-
-		let tmpEdgeLabel = document.createElement('label');
-		tmpEdgeLabel.className = 'pict-flow-popup-settings-label';
-		tmpEdgeLabel.textContent = 'Edge theme';
-		tmpEdgeSection.appendChild(tmpEdgeLabel);
-
-		let tmpEdgeSelect = document.createElement('select');
-		tmpEdgeSelect.className = 'pict-flow-popup-settings-select';
-		tmpEdgeSelect.setAttribute('data-layout-control', 'edge-theme');
+		// 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)
+		{
+			this._buildLayoutParameterFormSection(tmpFormHostEl, tmpAlgoDescriptor, tmpCurrentSettings);
+		}
+	}
 
-		let tmpEdgeSettings = this._FlowView.getEdgeTheme();
-		let tmpResolvedEdge = tmpEdgeSettings.Theme;
-		let tmpExplicitEdgeOverride = tmpEdgeSettings.Override;
+	/**
+	 * 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);
 
-		// Inherit option — falls back to the active layout's DefaultEdgeTheme
-		let tmpInheritOpt = document.createElement('option');
-		tmpInheritOpt.value = '__inherit__';
-		let tmpDefaultThemeName = (tmpAlgoDescriptor && tmpAlgoDescriptor.DefaultEdgeTheme) || 'Bezier';
-		tmpInheritOpt.textContent = `Inherit from layout (${tmpDefaultThemeName})`;
-		if (!tmpExplicitEdgeOverride) tmpInheritOpt.selected = true;
-		tmpEdgeSelect.appendChild(tmpInheritOpt);
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
+		let tmpPopupEl = document.getElementById(`Flow-Toolbar-Popup-${tmpFlowViewIdentifier}`);
+		if (tmpPopupEl) this._buildLayoutAlgorithmPopup(tmpPopupEl);
+	}
 
-		let tmpEdgeThemes = tmpLayoutService.listEdgeThemes();
-		for (let i = 0; i < tmpEdgeThemes.length; i++)
+	/**
+	 * Inline handler — switch edge theme, refresh popup so descriptions
+	 * track the new theme.
+	 */
+	_handleEdgeThemeChange(pValue)
+	{
+		if (!this._FlowView) return;
+		if (pValue === '__inherit__')
 		{
-			let tmpOpt = document.createElement('option');
-			tmpOpt.value = tmpEdgeThemes[i].Name;
-			tmpOpt.textContent = tmpEdgeThemes[i].Label || tmpEdgeThemes[i].Name;
-			if (tmpEdgeThemes[i].Name === tmpExplicitEdgeOverride)
-			{
-				tmpOpt.selected = true;
-			}
-			tmpEdgeSelect.appendChild(tmpOpt);
+			this._FlowView.setEdgeTheme(null);
 		}
-
-		tmpEdgeSelect.addEventListener('change', () =>
-		{
-			let tmpVal = tmpEdgeSelect.value;
-			if (tmpVal === '__inherit__')
-			{
-				this._FlowView.setEdgeTheme(null);
-			}
-			else
-			{
-				this._FlowView.setEdgeTheme(tmpVal);
-			}
-			// Rebuild the popup so the description and any theme-specific
-			// controls reflect the new theme.
-			while (pContainer.firstChild)
-			{
-				pContainer.removeChild(pContainer.firstChild);
-			}
-			this._buildLayoutAlgorithmPopup(pContainer);
-		});
-		tmpEdgeSelect.addEventListener('click', (pEvent) => { pEvent.stopPropagation(); });
-
-		tmpEdgeSection.appendChild(tmpEdgeSelect);
-		pContainer.appendChild(tmpEdgeSection);
-
-		// Edge theme description (uses the *resolved* theme so users see
-		// what's actually rendering, regardless of inherit/explicit choice)
-		if (tmpResolvedEdge)
+		else
 		{
-			let tmpResolvedDescriptor = tmpLayoutService.getEdgeTheme(tmpResolvedEdge);
-			if (tmpResolvedDescriptor && tmpResolvedDescriptor.Description)
-			{
-				let tmpEdgeDesc = document.createElement('div');
-				tmpEdgeDesc.className = 'pict-flow-popup-control-description';
-				tmpEdgeDesc.textContent = tmpResolvedDescriptor.Description;
-				pContainer.appendChild(tmpEdgeDesc);
-			}
+			this._FlowView.setEdgeTheme(pValue);
 		}
 
-		// ── Auto-apply toggle ────────────────────────────────
-		let tmpAutoApplyDivider = document.createElement('div');
-		tmpAutoApplyDivider.className = 'pict-flow-popup-divider';
-		pContainer.appendChild(tmpAutoApplyDivider);
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
+		let tmpPopupEl = document.getElementById(`Flow-Toolbar-Popup-${tmpFlowViewIdentifier}`);
+		if (tmpPopupEl) this._buildLayoutAlgorithmPopup(tmpPopupEl);
+	}
 
-		let tmpAutoApplySection = document.createElement('div');
-		tmpAutoApplySection.className = 'pict-flow-popup-settings-section';
-		tmpAutoApplySection.style.display = 'flex';
-		tmpAutoApplySection.style.alignItems = 'center';
-		tmpAutoApplySection.style.gap = '8px';
+	/**
+	 * Inline handler — toggle auto-apply.
+	 */
+	_handleAutoApplyChange(pChecked)
+	{
+		if (!this._FlowView) return;
+		this._FlowView.setLayoutAutoApply(pChecked);
+	}
+
+	/**
+	 * 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();
+	}
 
-		let tmpAutoApplyCheckbox = document.createElement('input');
-		tmpAutoApplyCheckbox.type = 'checkbox';
-		tmpAutoApplyCheckbox.id = `Flow-Toolbar-AutoApply-${this.options.FlowViewIdentifier}`;
-		tmpAutoApplyCheckbox.checked = !!tmpCurrentSettings.AutoApply;
-		tmpAutoApplyCheckbox.addEventListener('change', () =>
+	/**
+	 * 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)
 		{
-			this._FlowView.setLayoutAutoApply(tmpAutoApplyCheckbox.checked);
-		});
-		tmpAutoApplyCheckbox.addEventListener('click', (pEvent) => { pEvent.stopPropagation(); });
-
-		let tmpAutoApplyLabel = document.createElement('label');
-		tmpAutoApplyLabel.className = 'pict-flow-popup-settings-label';
-		tmpAutoApplyLabel.setAttribute('for', tmpAutoApplyCheckbox.id);
-		tmpAutoApplyLabel.textContent = 'Auto-apply on changes';
-		tmpAutoApplyLabel.style.cursor = 'pointer';
-
-		tmpAutoApplySection.appendChild(tmpAutoApplyCheckbox);
-		tmpAutoApplySection.appendChild(tmpAutoApplyLabel);
-		pContainer.appendChild(tmpAutoApplySection);
-
-		// (Parameter form is rendered above, right under the algorithm row,
-		// so it reads as part of the same "this is the algorithm" section.)
-
-		// ── Apply Now button ─────────────────────────────────
-		let tmpApplyDivider = document.createElement('div');
-		tmpApplyDivider.className = 'pict-flow-popup-divider';
-		pContainer.appendChild(tmpApplyDivider);
-
-		let tmpApplyRow = document.createElement('div');
-		tmpApplyRow.className = 'pict-flow-popup-settings-section';
-		tmpApplyRow.style.padding = '4px 8px';
-
-		let tmpApplyBtn = document.createElement('button');
-		tmpApplyBtn.className = 'pict-flow-popup-layout-save-confirm';
-		tmpApplyBtn.textContent = 'Apply Now';
-		tmpApplyBtn.style.width = '100%';
-		tmpApplyBtn.style.padding = '6px';
-		if (tmpCurrentSettings.Algorithm === 'Custom')
-		{
-			tmpApplyBtn.disabled = true;
-			tmpApplyBtn.title = 'Custom does not auto-position nodes';
+			tmpHost.setAttribute('data-collapsed', this._LayoutFormExpanded ? 'false' : 'true');
 		}
-		tmpApplyBtn.addEventListener('click', () =>
-		{
-			if (tmpCurrentSettings.Algorithm === 'Custom') return;
-			this._FlowView.applyCurrentLayout();
-		});
-		tmpApplyRow.appendChild(tmpApplyBtn);
-		pContainer.appendChild(tmpApplyRow);
 	}
 
 	/**
@@ -1346,7 +1227,9 @@ class PictViewFlowToolbar extends libPictView
 		tmpDivider.className = 'pict-flow-popup-divider';
 		pContainer.appendChild(tmpDivider);
 
-		// Form host div — the metacontroller renders into here
+		// 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;
 
@@ -1354,8 +1237,11 @@ class PictViewFlowToolbar extends libPictView
 		tmpHostDiv.id = tmpHostID;
 		tmpHostDiv.className = 'pict-flow-popup-layout-form-host';
 		tmpHostDiv.setAttribute('data-collapsed', this._LayoutFormExpanded ? 'false' : 'true');
-		// Clicks inside the form must NOT close the popup
-		tmpHostDiv.addEventListener('click', (pEvent) => { pEvent.stopPropagation(); });
+		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.
@@ -1467,28 +1353,32 @@ class PictViewFlowToolbar extends libPictView
 			return;
 		}
 
-		// Push form changes back into _FlowData.LayoutParameters and re-apply
-		// the layout (when non-Custom). One listener at the host level catches
-		// both `change` (for selects/numbers/checkboxes) and `input` (for the
-		// live-update case). De-bounce via micro-task so multi-key edits
-		// resolve to a single re-layout pass. Read from the algorithm-scoped
-		// AppData branch (matches the UUID-prefixed descriptor addresses).
-		let tmpScheduled = false;
-		let tmpPushBack = () =>
-		{
-			if (tmpScheduled) return;
-			tmpScheduled = true;
-			Promise.resolve().then(() =>
-			{
-				tmpScheduled = false;
-				let tmpScopedRoot = this.pict.AppData[tmpScope] || {};
-				let tmpEditorParams = (tmpScopedRoot.PictFlowLayoutEditor || {}).Parameters || {};
-				let tmpMerged = Object.assign({}, this._FlowView.getLayoutAlgorithm().Parameters || {}, tmpEditorParams);
-				this._FlowView.setLayoutAlgorithm(pCurrentSettings.Algorithm, tmpMerged);
-			});
-		};
-		tmpHostDiv.addEventListener('change', tmpPushBack);
-		tmpHostDiv.addEventListener('input', tmpPushBack);
+		// 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._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);
+		});
 	}
 
 	/**
@@ -1503,6 +1393,9 @@ class PictViewFlowToolbar extends libPictView
 	 */
 	_buildLayoutParamInput(pKey, pSchema, pCurrentValue)
 	{
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
+		let tmpViewPath = "_Pict.views['" + tmpFlowViewIdentifier + "']._ToolbarView";
+		let tmpKeyEsc = pKey.replace(/'/g, "\\'");
 		let tmpInput;
 
 		if (pSchema.Type === 'boolean')
@@ -1510,10 +1403,8 @@ class PictViewFlowToolbar extends libPictView
 			tmpInput = document.createElement('input');
 			tmpInput.type = 'checkbox';
 			tmpInput.checked = !!pCurrentValue;
-			tmpInput.addEventListener('change', () =>
-			{
-				this._updateLayoutParameter(pKey, tmpInput.checked);
-			});
+			tmpInput.setAttribute('onchange',
+				tmpViewPath + "._updateLayoutParameter('" + tmpKeyEsc + "', this.checked)");
 		}
 		else if (pSchema.Type === 'enum' && Array.isArray(pSchema.Options))
 		{
@@ -1527,42 +1418,23 @@ class PictViewFlowToolbar extends libPictView
 				if (pSchema.Options[i] === pCurrentValue) tmpOpt.selected = true;
 				tmpInput.appendChild(tmpOpt);
 			}
-			tmpInput.addEventListener('change', () =>
-			{
-				this._updateLayoutParameter(pKey, tmpInput.value);
-			});
+			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';
-			// PreciseNumber: arbitrary precision (string-stored, big.js / ExpressionParser-friendly).
-			// Number: integer or simple float.
 			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';
-			let tmpDisplayValue = (pCurrentValue == null) ? '' : String(pCurrentValue);
-			tmpInput.value = tmpDisplayValue;
+			tmpInput.value = (pCurrentValue == null) ? '' : String(pCurrentValue);
 			tmpInput.style.width = '90px';
-			tmpInput.addEventListener('change', () =>
-			{
-				let tmpRaw = tmpInput.value;
-				if (tmpRaw === '') return;
-				if (tmpIsPrecise)
-				{
-					// Preserve the user-entered string so big.js / ExpressionParser
-					// can use it without float round-trip drift.
-					this._updateLayoutParameter(pKey, tmpRaw);
-				}
-				else
-				{
-					let tmpNum = parseFloat(tmpRaw);
-					if (isNaN(tmpNum)) return;
-					this._updateLayoutParameter(pKey, tmpNum);
-				}
-			});
+			let tmpPreciseFlag = tmpIsPrecise ? 'true' : 'false';
+			tmpInput.setAttribute('onchange',
+				tmpViewPath + "._updateLayoutNumberParameter('" + tmpKeyEsc + "', this.value, " + tmpPreciseFlag + ")");
 		}
 		else
 		{
@@ -1571,14 +1443,11 @@ class PictViewFlowToolbar extends libPictView
 			tmpInput.className = 'pict-flow-popup-settings-input';
 			tmpInput.value = (pCurrentValue == null) ? '' : String(pCurrentValue);
 			tmpInput.style.width = '90px';
-			tmpInput.addEventListener('change', () =>
-			{
-				this._updateLayoutParameter(pKey, tmpInput.value);
-			});
+			tmpInput.setAttribute('onchange',
+				tmpViewPath + "._updateLayoutParameter('" + tmpKeyEsc + "', this.value)");
 		}
 
-		tmpInput.addEventListener('click', (pEvent) => { pEvent.stopPropagation(); });
-
+		tmpInput.setAttribute('onclick', 'event.stopPropagation()');
 		return tmpInput;
 	}
 
@@ -1597,108 +1466,114 @@ class PictViewFlowToolbar extends libPictView
 		this._FlowView.setLayoutAlgorithm(tmpSettings.Algorithm, tmpParams);
 	}
 
+	/**
+	 * 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);
+	}
+
 	// ── Settings Popup ───────────────────────────────────────────────────
 
 	/**
-	 * Build the Settings popup content (theme dropdown + noise slider).
+	 * 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 tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
 		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 tmpThemeSelect = document.createElement('select');
-		tmpThemeSelect.className = 'pict-flow-popup-settings-select';
-
 		let tmpThemeKeys = tmpThemeProvider.getThemeKeys();
 		let tmpActiveKey = tmpThemeProvider.getActiveThemeKey();
 
+		let tmpThemeOptions = [];
 		for (let i = 0; i < tmpThemeKeys.length; i++)
 		{
-			let tmpOption = document.createElement('option');
-			tmpOption.value = tmpThemeKeys[i];
-
 			let tmpTheme = tmpThemeProvider._Themes[tmpThemeKeys[i]];
-			tmpOption.textContent = tmpTheme.Label || tmpThemeKeys[i];
-
-			if (tmpThemeKeys[i] === tmpActiveKey)
+			tmpThemeOptions.push(
 			{
-				tmpOption.selected = true;
-			}
-			tmpThemeSelect.appendChild(tmpOption);
+				Value: tmpThemeKeys[i],
+				Label: tmpTheme.Label || tmpThemeKeys[i],
+				SelectedAttr: (tmpThemeKeys[i] === tmpActiveKey) ? ' selected="selected"' : ''
+			});
 		}
 
-		tmpThemeSelect.addEventListener('change', () =>
-		{
-			this._FlowView.setTheme(tmpThemeSelect.value);
-			// Refresh the noise slider visibility
-			this._refreshNoiseSlider(pContainer);
-		});
-
-		// Prevent popup close on select interaction
-		tmpThemeSelect.addEventListener('click', (pEvent) => { pEvent.stopPropagation(); });
-
-		tmpThemeSection.appendChild(tmpThemeSelect);
-		pContainer.appendChild(tmpThemeSection);
-
-		// Divider
-		let tmpDivider = document.createElement('div');
-		tmpDivider.className = 'pict-flow-popup-divider';
-		pContainer.appendChild(tmpDivider);
-
-		// 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');
-
-		let tmpNoiseLabel = document.createElement('label');
-		tmpNoiseLabel.className = 'pict-flow-popup-settings-label';
-		tmpNoiseLabel.textContent = 'Noise';
-		tmpNoiseSection.appendChild(tmpNoiseLabel);
-
-		let tmpNoiseRow = document.createElement('div');
-		tmpNoiseRow.className = 'pict-flow-popup-settings-slider-row';
-
-		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));
-
-		let tmpNoiseValue = document.createElement('span');
-		tmpNoiseValue.className = 'pict-flow-popup-settings-slider-value';
-		tmpNoiseValue.textContent = tmpNoiseSlider.value + '%';
-
-		tmpNoiseSlider.addEventListener('input', () =>
-		{
-			let tmpLevel = parseInt(tmpNoiseSlider.value, 10) / 100;
-			tmpNoiseValue.textContent = tmpNoiseSlider.value + '%';
-			this._FlowView.setNoiseLevel(tmpLevel);
-		});
+		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>');
+	}
 
-		// Prevent popup close on slider interaction
-		tmpNoiseSlider.addEventListener('click', (pEvent) => { pEvent.stopPropagation(); });
-		tmpNoiseSlider.addEventListener('pointerdown', (pEvent) => { pEvent.stopPropagation(); });
+	/**
+	 * 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);
 
-		tmpNoiseRow.appendChild(tmpNoiseSlider);
-		tmpNoiseRow.appendChild(tmpNoiseValue);
-		tmpNoiseSection.appendChild(tmpNoiseRow);
-		pContainer.appendChild(tmpNoiseSection);
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
+		let tmpPopupEl = document.getElementById(`Flow-Toolbar-Popup-${tmpFlowViewIdentifier}`);
+		if (tmpPopupEl) this._refreshNoiseSlider(tmpPopupEl);
+	}
 
-		// Show/hide noise slider based on active theme
-		this._refreshNoiseSlider(pContainer);
+	/**
+	 * 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);
 	}
 
 	/**