pict-section-flow 0.0.2 → 0.0.3

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

@@ -13,222 +13,73 @@ const _DefaultConfiguration =
 
 	EnablePalette: true,
 
-	CSS: /*css*/`
-		.pict-flow-toolbar {
-			display: flex;
-			align-items: center;
-			gap: 0.5em;
-			padding: 0.5em 0.75em;
-			background-color: #ffffff;
-			border-bottom: 1px solid #e0e0e0;
-			flex-wrap: wrap;
-		}
-		.pict-flow-toolbar-group {
-			display: flex;
-			align-items: center;
-			gap: 0.25em;
-			padding-right: 0.75em;
-			border-right: 1px solid #e0e0e0;
-		}
-		.pict-flow-toolbar-group:last-child {
-			border-right: none;
-			padding-right: 0;
-		}
-		.pict-flow-toolbar-btn {
-			display: inline-flex;
-			align-items: center;
-			justify-content: center;
-			padding: 0.35em 0.65em;
-			border: 1px solid #bdc3c7;
-			border-radius: 4px;
-			background-color: #fff;
-			color: #2c3e50;
-			font-size: 0.85em;
-			cursor: pointer;
-			transition: background-color 0.15s, border-color 0.15s;
-			user-select: none;
-			-webkit-user-select: none;
-		}
-		.pict-flow-toolbar-btn:hover {
-			background-color: #ecf0f1;
-			border-color: #95a5a6;
-		}
-		.pict-flow-toolbar-btn:active {
-			background-color: #d5dbdb;
-		}
-		.pict-flow-toolbar-btn.danger {
-			color: #e74c3c;
-			border-color: #e74c3c;
-		}
-		.pict-flow-toolbar-btn.danger:hover {
-			background-color: #fdedec;
-		}
-		.pict-flow-toolbar-label {
-			font-size: 0.8em;
-			color: #7f8c8d;
-			margin-right: 0.25em;
-		}
-		.pict-flow-toolbar-select {
-			padding: 0.3em 0.5em;
-			border: 1px solid #bdc3c7;
-			border-radius: 4px;
-			font-size: 0.85em;
-			background-color: #fff;
-			color: #2c3e50;
-		}
-		.pict-flow-palette-container {
-			border-bottom: 1px solid #e0e0e0;
-			background-color: #fafafa;
-		}
-		.pict-flow-palette-toggle {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			padding: 0.4em 0.75em;
-			cursor: pointer;
-			user-select: none;
-			-webkit-user-select: none;
-			font-size: 0.8em;
-			color: #7f8c8d;
-			background-color: #f4f4f5;
-			border-bottom: 1px solid #e0e0e0;
-		}
-		.pict-flow-palette-toggle:hover {
-			background-color: #ecf0f1;
-			color: #2c3e50;
-		}
-		.pict-flow-palette-toggle-arrow {
-			font-size: 0.7em;
-			transition: transform 0.2s;
-		}
-		.pict-flow-palette-toggle-arrow.open {
-			transform: rotate(180deg);
-		}
-		.pict-flow-palette-body {
-			display: none;
-			padding: 0.5em 0.75em 0.75em 0.75em;
-			max-height: 280px;
-			overflow-y: auto;
-		}
-		.pict-flow-palette-body.open {
-			display: block;
-		}
-		.pict-flow-palette-category {
-			margin-bottom: 0.5em;
-		}
-		.pict-flow-palette-category:last-child {
-			margin-bottom: 0;
-		}
-		.pict-flow-palette-category-label {
-			font-size: 0.7em;
-			font-weight: 700;
-			text-transform: uppercase;
-			letter-spacing: 0.05em;
-			color: #95a5a6;
-			margin-bottom: 0.35em;
-			padding-bottom: 0.2em;
-			border-bottom: 1px solid #ecf0f1;
-		}
-		.pict-flow-palette-cards {
-			display: flex;
-			flex-wrap: wrap;
-			gap: 0.35em;
-		}
-		.pict-flow-palette-card {
-			display: inline-flex;
-			align-items: center;
-			gap: 0.35em;
-			padding: 0.35em 0.6em;
-			border: 1px solid #d5d8dc;
-			border-radius: 4px;
-			background-color: #ffffff;
-			font-size: 0.8em;
-			cursor: pointer;
-			transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
-			user-select: none;
-			-webkit-user-select: none;
-			position: relative;
-		}
-		.pict-flow-palette-card:hover {
-			background-color: #eaf2f8;
-			border-color: #3498db;
-			box-shadow: 0 1px 3px rgba(52, 152, 219, 0.15);
-		}
-		.pict-flow-palette-card.disabled {
-			opacity: 0.45;
-			pointer-events: none;
-			cursor: default;
-		}
-		.pict-flow-palette-card-icon {
-			font-size: 1.1em;
-			line-height: 1;
-		}
-		.pict-flow-palette-card-swatch {
-			width: 10px;
-			height: 10px;
-			border-radius: 2px;
-			flex-shrink: 0;
-		}
-		.pict-flow-palette-card-title {
-			font-weight: 500;
-			color: #2c3e50;
-			white-space: nowrap;
-		}
-		.pict-flow-palette-card-code {
-			font-size: 0.8em;
-			color: #95a5a6;
-			font-family: monospace;
-		}
-		.pict-flow-toolbar-select.layout-select {
-			min-width: 120px;
-			max-width: 200px;
-		}
-	`,
+	CSS: false,
 
 	Templates:
 	[
 		{
 			Hash: 'Flow-Toolbar-Template',
 			Template: /*html*/`
-<div class="pict-flow-toolbar">
+<div class="pict-flow-toolbar" id="Flow-Toolbar-Bar-{~D:Record.FlowViewIdentifier~}">
 	<div class="pict-flow-toolbar-group">
-		<span class="pict-flow-toolbar-label">Node:</span>
-		<select class="pict-flow-toolbar-select" id="Flow-Toolbar-NodeType-{~D:Record.FlowViewIdentifier~}">
-		</select>
-		<button class="pict-flow-toolbar-btn" data-flow-action="add-node">+ Add Node</button>
+		<button class="pict-flow-toolbar-btn" data-flow-action="add-node" id="Flow-Toolbar-AddNode-{~D:Record.FlowViewIdentifier~}" title="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 danger" data-flow-action="delete-selected" title="Delete Node">
+			<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 danger" data-flow-action="delete-selected">Delete</button>
+		<button class="pict-flow-toolbar-btn" data-flow-action="cards-popup" id="Flow-Toolbar-Cards-{~D:Record.FlowViewIdentifier~}" title="Card Palette">
+			<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>
 	</div>
 	<div class="pict-flow-toolbar-group">
-		<button class="pict-flow-toolbar-btn" data-flow-action="zoom-in">Zoom +</button>
-		<button class="pict-flow-toolbar-btn" data-flow-action="zoom-out">Zoom -</button>
-		<button class="pict-flow-toolbar-btn" data-flow-action="zoom-fit">Fit</button>
+		<button class="pict-flow-toolbar-btn" data-flow-action="layout-popup" id="Flow-Toolbar-Layout-{~D:Record.FlowViewIdentifier~}" title="Manage Layouts">
+			<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-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>
 	<div class="pict-flow-toolbar-group">
-		<button class="pict-flow-toolbar-btn" data-flow-action="auto-layout">Auto Layout</button>
+		<button class="pict-flow-toolbar-btn" data-flow-action="zoom-in" title="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">
+			<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">
+			<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">
-		<span class="pict-flow-toolbar-label">Layouts:</span>
-		<select class="pict-flow-toolbar-select layout-select"
-			id="Flow-Toolbar-LayoutSelect-{~D:Record.FlowViewIdentifier~}">
-			<option value="">-- select layout --</option>
-		</select>
-		<button class="pict-flow-toolbar-btn" data-flow-action="save-layout" title="Save the current node positions as a named layout">Save</button>
-		<button class="pict-flow-toolbar-btn" data-flow-action="restore-layout" title="Restore the selected layout">Restore</button>
-		<button class="pict-flow-toolbar-btn danger" data-flow-action="delete-layout" title="Delete the selected saved layout">Delete</button>
-	</div>
-	<div class="pict-flow-toolbar-group">
-		<button class="pict-flow-toolbar-btn" data-flow-action="fullscreen" id="Flow-Toolbar-Fullscreen-{~D:Record.FlowViewIdentifier~}" title="Toggle Fullscreen">&#x26F6; Fullscreen</button>
+	<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">
+			<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">
+			<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">
+			<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">
+			<span class="pict-flow-toolbar-btn-icon" id="Flow-Toolbar-Icon-collapse-{~D:Record.FlowViewIdentifier~}"></span>
+		</button>
 	</div>
 </div>
-<div class="pict-flow-palette-container" id="Flow-Palette-{~D:Record.FlowViewIdentifier~}">
-	<div class="pict-flow-palette-toggle" data-flow-action="toggle-palette">
-		<span>Card Palette</span>
-		<span class="pict-flow-palette-toggle-arrow" id="Flow-Palette-Arrow-{~D:Record.FlowViewIdentifier~}">&#9660;</span>
-	</div>
-	<div class="pict-flow-palette-body" id="Flow-Palette-Body-{~D:Record.FlowViewIdentifier~}">
-	</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~}">
+		<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>
 `
 		}
@@ -255,7 +106,13 @@ class PictViewFlowToolbar extends libPictView
 		this.serviceType = 'PictViewFlowToolbar';
 
 		this._FlowView = null;
-		this._PaletteOpen = false;
+
+		// Toolbar mode state
+		this._ToolbarMode = 'docked'; // 'docked' | 'floating' | 'collapsed'
+		this._ActivePopup = null;     // 'add-node' | 'cards' | 'layout' | null
+		this._FloatingPosition = { X: 80, Y: 80 };
+		this._DocumentClickHandler = null;
+		this._FloatingToolbarView = null;
 	}
 
 	render(pRenderableHash, pRenderDestinationAddress, pTemplateRecordAddress)
@@ -267,12 +124,13 @@ class PictViewFlowToolbar extends libPictView
 
 	onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent)
 	{
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
+
 		// Bind toolbar button events via event delegation
-		let tmpToolbarElements = this.pict.ContentAssignment.getElement(`.pict-flow-toolbar`);
-		if (tmpToolbarElements.length > 0)
+		let tmpToolbarBar = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-Bar-${tmpFlowViewIdentifier}`);
+		if (tmpToolbarBar.length > 0)
 		{
-			let tmpToolbar = tmpToolbarElements[0];
-			tmpToolbar.addEventListener('click', (pEvent) =>
+			tmpToolbarBar[0].addEventListener('click', (pEvent) =>
 			{
 				let tmpTarget = pEvent.target;
 				if (!tmpTarget) return;
@@ -286,170 +144,395 @@ class PictViewFlowToolbar extends libPictView
 			});
 		}
 
-		// Bind palette toggle and card click events
-		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
-		let tmpPaletteContainer = this.pict.ContentAssignment.getElement(`#Flow-Palette-${tmpFlowViewIdentifier}`);
-		if (tmpPaletteContainer.length > 0)
+		// 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)
 		{
-			tmpPaletteContainer[0].addEventListener('click', (pEvent) =>
+			tmpExpandBtn[0].addEventListener('click', () =>
 			{
-				let tmpTarget = pEvent.target;
-				if (!tmpTarget) return;
-
-				// Check for toggle
-				let tmpToggle = tmpTarget.closest('[data-flow-action="toggle-palette"]');
-				if (tmpToggle)
-				{
-					this._togglePalette();
-					return;
-				}
-
-				// Check for card click
-				let tmpCard = tmpTarget.closest('[data-card-type]');
-				if (tmpCard)
-				{
-					let tmpCardType = tmpCard.getAttribute('data-card-type');
-					this._addCardFromPalette(tmpCardType);
-				}
+				this._setToolbarMode('docked');
 			});
 		}
 
-		// Populate the node type dropdown, palette, and layout dropdown
-		this._populateNodeTypeDropdown();
-		this._renderPalette();
-		this._populateLayoutDropdown();
+		// Populate SVG icons for toolbar buttons
+		this._populateToolbarIcons();
 
 		return super.onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent);
 	}
 
+	// ── Icon Population ───────────────────────────────────────────────────
+
 	/**
-	 * Populate the node type dropdown from the registered node types.
+	 * Populate SVG icons for all toolbar buttons.
 	 */
-	_populateNodeTypeDropdown()
+	_populateToolbarIcons()
 	{
-		if (!this._FlowView || !this._FlowView._NodeTypeProvider)
+		let tmpIconProvider = this._FlowView ? this._FlowView._IconProvider : null;
+		if (!tmpIconProvider) return;
+
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
+
+		// Map of element ID suffix → icon key
+		let tmpIconMap =
 		{
-			return;
+			'plus': 'plus',
+			'trash': 'trash',
+			'zoom-in': 'zoom-in',
+			'zoom-out': 'zoom-out',
+			'zoom-fit': 'zoom-fit',
+			'auto-layout': 'auto-layout',
+			'cards': 'cards',
+			'layout': 'layout',
+			'settings': 'settings',
+			'grip': 'grip',
+			'collapse': 'collapse',
+			'expand': 'expand'
+		};
+
+		let tmpKeys = Object.keys(tmpIconMap);
+		for (let i = 0; i < tmpKeys.length; i++)
+		{
+			let tmpElementId = `Flow-Toolbar-Icon-${tmpKeys[i]}-${tmpFlowViewIdentifier}`;
+			let tmpElements = this.pict.ContentAssignment.getElement(`#${tmpElementId}`);
+			if (tmpElements.length > 0)
+			{
+				tmpElements[0].innerHTML = tmpIconProvider.getIconSVGMarkup(tmpIconMap[tmpKeys[i]], 14);
+			}
 		}
 
-		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
-		let tmpSelectElements = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-NodeType-${tmpFlowViewIdentifier}`);
-		if (tmpSelectElements.length < 1)
+		// Fullscreen icon
+		let tmpFullscreenIcon = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-Fullscreen-Icon-${tmpFlowViewIdentifier}`);
+		if (tmpFullscreenIcon.length > 0)
 		{
-			return;
+			tmpFullscreenIcon[0].innerHTML = tmpIconProvider.getIconSVGMarkup('fullscreen', 14);
 		}
 
-		let tmpSelect = tmpSelectElements[0];
+		// Chevrons (smaller)
+		let tmpCardsChevron = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-CardsChevron-${tmpFlowViewIdentifier}`);
+		if (tmpCardsChevron.length > 0)
+		{
+			tmpCardsChevron[0].innerHTML = tmpIconProvider.getIconSVGMarkup('chevron-down', 8);
+		}
 
-		// Clear existing options
-		while (tmpSelect.firstChild)
+		let tmpLayoutChevron = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-LayoutChevron-${tmpFlowViewIdentifier}`);
+		if (tmpLayoutChevron.length > 0)
 		{
-			tmpSelect.removeChild(tmpSelect.firstChild);
+			tmpLayoutChevron[0].innerHTML = tmpIconProvider.getIconSVGMarkup('chevron-down', 8);
 		}
+	}
 
-		let tmpTypes = this._FlowView._NodeTypeProvider.getNodeTypes();
-		let tmpTypeKeys = Object.keys(tmpTypes);
+	// ── Popup Management ──────────────────────────────────────────────────
 
-		for (let i = 0; i < tmpTypeKeys.length; i++)
+	/**
+	 * Open a popup below a trigger button.
+	 * @param {string} pType - 'add-node' | 'cards' | 'layout'
+	 */
+	_openPopup(pType)
+	{
+		// Toggle off if already open
+		if (this._ActivePopup === pType)
 		{
-			let tmpTypeConfig = tmpTypes[tmpTypeKeys[i]];
+			this._closePopup();
+			return;
+		}
 
-			// Skip disabled cards
-			if (tmpTypeConfig.CardMetadata && tmpTypeConfig.CardMetadata.Enabled === false)
-			{
-				continue;
-			}
+		// Close any existing popup first
+		this._closePopup();
 
-			let tmpOption = document.createElement('option');
-			tmpOption.value = tmpTypeKeys[i];
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
+		let tmpAnchor = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-PopupAnchor-${tmpFlowViewIdentifier}`);
+		if (tmpAnchor.length < 1) return;
+
+		// Create popup div
+		let tmpPopup = document.createElement('div');
+		tmpPopup.className = 'pict-flow-toolbar-popup';
+		tmpPopup.setAttribute('id', `Flow-Toolbar-Popup-${tmpFlowViewIdentifier}`);
+
+		// Build popup content
+		switch (pType)
+		{
+			case 'add-node':
+				this._buildAddNodePopup(tmpPopup);
+				break;
+			case 'cards':
+				this._buildCardsPopup(tmpPopup);
+				break;
+			case 'layout':
+				this._buildLayoutPopup(tmpPopup);
+				break;
+			case 'settings':
+				this._buildSettingsPopup(tmpPopup);
+				break;
+		}
 
-			if (tmpTypeConfig.CardMetadata && tmpTypeConfig.CardMetadata.Icon)
+		tmpAnchor[0].appendChild(tmpPopup);
+		this._ActivePopup = pType;
+
+		// Position the popup below the trigger button
+		this._positionPopup(tmpPopup, pType);
+
+		// Click-outside-to-close handler (delayed to avoid catching the opening click)
+		setTimeout(() =>
+		{
+			this._DocumentClickHandler = (pEvent) =>
 			{
-				tmpOption.textContent = tmpTypeConfig.CardMetadata.Icon + ' ' + tmpTypeConfig.Label;
-			}
-			else
+				if (!tmpPopup.contains(pEvent.target))
+				{
+					// Check if click was on the trigger button itself (toggle behavior)
+					let tmpButton = pEvent.target.closest('[data-flow-action]');
+					if (tmpButton)
+					{
+						let tmpAction = tmpButton.getAttribute('data-flow-action');
+						if (tmpAction === pType || tmpAction === pType.replace('-popup', '') + '-popup')
+						{
+							return; // Let the toggle handle it
+						}
+					}
+					this._closePopup();
+				}
+			};
+			document.addEventListener('click', this._DocumentClickHandler, true);
+		}, 0);
+
+		// Focus search input if Add Node popup
+		if (pType === 'add-node')
+		{
+			let tmpSearch = tmpPopup.querySelector('.pict-flow-popup-search');
+			if (tmpSearch)
 			{
-				tmpOption.textContent = tmpTypeConfig.Label;
+				setTimeout(() => { tmpSearch.focus(); }, 50);
 			}
-
-			tmpSelect.appendChild(tmpOption);
 		}
 	}
 
 	/**
-	 * Populate the layout dropdown from saved layouts in the flow data.
+	 * Close the active popup and clean up.
 	 */
-	_populateLayoutDropdown()
+	_closePopup()
 	{
-		if (!this._FlowView || !this._FlowView._LayoutProvider)
+		if (this._DocumentClickHandler)
 		{
-			return;
+			document.removeEventListener('click', this._DocumentClickHandler, true);
+			this._DocumentClickHandler = null;
 		}
 
 		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
-		let tmpSelectElements = this.pict.ContentAssignment.getElement(
-			`#Flow-Toolbar-LayoutSelect-${tmpFlowViewIdentifier}`
-		);
-		if (tmpSelectElements.length < 1)
+		let tmpPopup = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-Popup-${tmpFlowViewIdentifier}`);
+		if (tmpPopup.length > 0)
 		{
-			return;
+			tmpPopup[0].parentNode.removeChild(tmpPopup[0]);
 		}
 
-		let tmpSelect = tmpSelectElements[0];
+		this._ActivePopup = null;
+	}
 
-		// Clear existing options
-		while (tmpSelect.firstChild)
+	/**
+	 * Position a popup below its trigger button.
+	 * @param {HTMLElement} pPopupDiv
+	 * @param {string} pType
+	 */
+	_positionPopup(pPopupDiv, pType)
+	{
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
+
+		// Determine which button triggered the popup
+		let tmpTriggerSelector;
+		switch (pType)
 		{
-			tmpSelect.removeChild(tmpSelect.firstChild);
+			case 'add-node':
+				tmpTriggerSelector = `#Flow-Toolbar-AddNode-${tmpFlowViewIdentifier}`;
+				break;
+			case 'cards':
+				tmpTriggerSelector = `#Flow-Toolbar-Cards-${tmpFlowViewIdentifier}`;
+				break;
+			case 'layout':
+				tmpTriggerSelector = `#Flow-Toolbar-Layout-${tmpFlowViewIdentifier}`;
+				break;
+			case 'settings':
+				tmpTriggerSelector = `#Flow-Toolbar-Settings-${tmpFlowViewIdentifier}`;
+				break;
+			default:
+				return;
 		}
 
-		// Add placeholder option
-		let tmpPlaceholder = document.createElement('option');
-		tmpPlaceholder.value = '';
-		tmpPlaceholder.textContent = '-- select layout --';
-		tmpSelect.appendChild(tmpPlaceholder);
+		let tmpTriggerElements = this.pict.ContentAssignment.getElement(tmpTriggerSelector);
+		if (tmpTriggerElements.length < 1) return;
 
-		let tmpLayouts = this._FlowView._LayoutProvider.getLayouts();
-		for (let i = 0; i < tmpLayouts.length; i++)
+		let tmpAnchor = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-PopupAnchor-${tmpFlowViewIdentifier}`);
+		if (tmpAnchor.length < 1) return;
+
+		let tmpTriggerRect = tmpTriggerElements[0].getBoundingClientRect();
+		let tmpAnchorRect = tmpAnchor[0].getBoundingClientRect();
+
+		let tmpLeft = tmpTriggerRect.left - tmpAnchorRect.left;
+		pPopupDiv.style.left = tmpLeft + 'px';
+		pPopupDiv.style.top = '0px';
+	}
+
+	// ── Add Node Popup ────────────────────────────────────────────────────
+
+	/**
+	 * Build the searchable Add Node popup content.
+	 * @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 tmpIconProvider = this._FlowView ? this._FlowView._IconProvider : null;
+		if (tmpIconProvider)
 		{
-			let tmpLayout = tmpLayouts[i];
-			let tmpOption = document.createElement('option');
-			tmpOption.value = tmpLayout.Hash;
-			tmpOption.textContent = tmpLayout.Name;
-			tmpSelect.appendChild(tmpOption);
+			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);
+		});
 	}
 
 	/**
-	 * Render the card palette with categories and card chips.
+	 * Populate the node list in the Add Node popup, filtered by search text.
+	 * @param {HTMLElement} pListDiv
+	 * @param {string} pFilter
 	 */
-	_renderPalette()
+	_populateNodeList(pListDiv, pFilter)
 	{
 		if (!this._FlowView || !this._FlowView._NodeTypeProvider) return;
 
-		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
-		let tmpPaletteBody = this.pict.ContentAssignment.getElement(`#Flow-Palette-Body-${tmpFlowViewIdentifier}`);
-		if (tmpPaletteBody.length < 1) return;
+		// Clear
+		while (pListDiv.firstChild)
+		{
+			pListDiv.removeChild(pListDiv.firstChild);
+		}
+
+		let tmpTypes = this._FlowView._NodeTypeProvider.getNodeTypes();
+		let tmpTypeKeys = Object.keys(tmpTypes);
+		let tmpFilter = (pFilter || '').toLowerCase().trim();
+		let tmpIconProvider = this._FlowView._IconProvider;
+		let tmpMatchCount = 0;
+
+		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;
+				}
+			}
 
-		let tmpBody = tmpPaletteBody[0];
+			tmpMatchCount++;
 
-		// Clear existing palette content
-		while (tmpBody.firstChild)
+			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';
+			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);
+			}
+
+			// Click handler
+			tmpRow.addEventListener('click', () =>
+			{
+				this._addNodeAtCenter(tmpTypeKeys[i]);
+				this._closePopup();
+			});
+
+			pListDiv.appendChild(tmpRow);
+		}
+
+		if (tmpMatchCount === 0)
 		{
-			tmpBody.removeChild(tmpBody.firstChild);
+			let tmpEmpty = document.createElement('div');
+			tmpEmpty.className = 'pict-flow-popup-list-empty';
+			tmpEmpty.textContent = 'No matching node types';
+			pListDiv.appendChild(tmpEmpty);
 		}
+	}
+
+	// ── Cards Popup ───────────────────────────────────────────────────────
+
+	/**
+	 * Build the Cards popup content (reuses palette rendering).
+	 * @param {HTMLElement} pContainer
+	 */
+	_buildCardsPopup(pContainer)
+	{
+		this._renderPalette(pContainer);
+	}
+
+	/**
+	 * Render the card palette with categories and card chips into a container.
+	 * @param {HTMLElement} pContainer - The target container element
+	 */
+	_renderPalette(pContainer)
+	{
+		if (!this._FlowView || !this._FlowView._NodeTypeProvider) return;
 
 		let tmpCategories = this._FlowView._NodeTypeProvider.getCardsByCategory();
 		let tmpCategoryKeys = Object.keys(tmpCategories);
 
 		if (tmpCategoryKeys.length === 0)
 		{
-			// No FlowCards registered - hide the palette
-			let tmpPaletteContainer = this.pict.ContentAssignment.getElement(`#Flow-Palette-${tmpFlowViewIdentifier}`);
-			if (tmpPaletteContainer.length > 0)
-			{
-				tmpPaletteContainer[0].style.display = 'none';
-			}
+			let tmpEmpty = document.createElement('div');
+			tmpEmpty.className = 'pict-flow-popup-list-empty';
+			tmpEmpty.textContent = 'No card types available';
+			pContainer.appendChild(tmpEmpty);
 			return;
 		}
 
@@ -460,6 +543,7 @@ class PictViewFlowToolbar extends libPictView
 
 			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';
@@ -496,7 +580,23 @@ class PictViewFlowToolbar extends libPictView
 				{
 					let tmpIconSpan = document.createElement('span');
 					tmpIconSpan.className = 'pict-flow-palette-card-icon';
-					tmpIconSpan.textContent = tmpMeta.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)
@@ -522,48 +622,439 @@ class PictViewFlowToolbar extends libPictView
 					tmpCardEl.appendChild(tmpCodeSpan);
 				}
 
+				// Click handler
+				tmpCardEl.addEventListener('click', () =>
+				{
+					this._addCardFromPalette(tmpCardConfig.Hash);
+					this._closePopup();
+				});
+
 				tmpCardsDiv.appendChild(tmpCardEl);
 			}
 
 			tmpCategoryDiv.appendChild(tmpCardsDiv);
-			tmpBody.appendChild(tmpCategoryDiv);
+			pContainer.appendChild(tmpCategoryDiv);
 		}
 	}
 
+	// ── Layout Popup ──────────────────────────────────────────────────────
+
 	/**
-	 * Toggle the palette open/closed.
+	 * Build the Layout popup content.
+	 * @param {HTMLElement} pContainer
 	 */
-	_togglePalette()
+	_buildLayoutPopup(pContainer)
 	{
-		this._PaletteOpen = !this._PaletteOpen;
+		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
+		{
+			tmpSaveConfirmBtn.textContent = '✓';
+		}
+		tmpSaveInputRow.appendChild(tmpSaveConfirmBtn);
 
-		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
+		// "Save Current Layout" clickable row
+		let tmpSaveRow = document.createElement('div');
+		tmpSaveRow.className = 'pict-flow-popup-layout-save';
+
+		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 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);
 
-		let tmpBody = this.pict.ContentAssignment.getElement(`#Flow-Palette-Body-${tmpFlowViewIdentifier}`);
-		if (tmpBody.length > 0)
+		// Confirm save via Enter key
+		tmpSaveInput.addEventListener('keydown', (pEvent) =>
 		{
-			if (this._PaletteOpen)
+			if (pEvent.key === 'Enter')
 			{
-				tmpBody[0].classList.add('open');
+				pEvent.preventDefault();
+				tmpDoSave();
 			}
-			else
+			else if (pEvent.key === 'Escape')
 			{
-				tmpBody[0].classList.remove('open');
+				// 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)
+		{
+			let tmpEmpty = document.createElement('div');
+			tmpEmpty.className = 'pict-flow-popup-list-empty';
+			tmpEmpty.textContent = 'No saved layouts';
+			pContainer.appendChild(tmpEmpty);
+			return;
 		}
 
-		let tmpArrow = this.pict.ContentAssignment.getElement(`#Flow-Palette-Arrow-${tmpFlowViewIdentifier}`);
-		if (tmpArrow.length > 0)
+		let tmpLayouts = this._FlowView._LayoutProvider.getLayouts();
+
+		if (tmpLayouts.length === 0)
 		{
-			if (this._PaletteOpen)
+			let tmpEmpty = document.createElement('div');
+			tmpEmpty.className = 'pict-flow-popup-list-empty';
+			tmpEmpty.textContent = 'No saved layouts';
+			pContainer.appendChild(tmpEmpty);
+			return;
+		}
+
+		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);
+
+			// 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)
 			{
-				tmpArrow[0].classList.add('open');
+				tmpDeleteBtn.innerHTML = tmpIconProvider.getIconSVGMarkup('trash', 12);
 			}
 			else
 			{
-				tmpArrow[0].classList.remove('open');
+				tmpDeleteBtn.textContent = '×';
+			}
+			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);
+		}
+	}
+
+	// ── Settings Popup ───────────────────────────────────────────────────
+
+	/**
+	 * Build the Settings popup content (theme dropdown + noise slider).
+	 * @param {HTMLElement} pContainer
+	 */
+	_buildSettingsPopup(pContainer)
+	{
+		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 tmpThemeSelect = document.createElement('select');
+		tmpThemeSelect.className = 'pict-flow-popup-settings-select';
+
+		let tmpThemeKeys = tmpThemeProvider.getThemeKeys();
+		let tmpActiveKey = tmpThemeProvider.getActiveThemeKey();
+
+		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)
+			{
+				tmpOption.selected = true;
+			}
+			tmpThemeSelect.appendChild(tmpOption);
+		}
+
+		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);
+		});
+
+		// Prevent popup close on slider interaction
+		tmpNoiseSlider.addEventListener('click', (pEvent) => { pEvent.stopPropagation(); });
+		tmpNoiseSlider.addEventListener('pointerdown', (pEvent) => { pEvent.stopPropagation(); });
+
+		tmpNoiseRow.appendChild(tmpNoiseSlider);
+		tmpNoiseRow.appendChild(tmpNoiseValue);
+		tmpNoiseSection.appendChild(tmpNoiseRow);
+		pContainer.appendChild(tmpNoiseSection);
+
+		// Show/hide noise slider based on active theme
+		this._refreshNoiseSlider(pContainer);
+	}
+
+	/**
+	 * Show or hide the noise slider based on whether the active theme supports noise.
+	 * @param {HTMLElement} pContainer - The settings popup container
+	 */
+	_refreshNoiseSlider(pContainer)
+	{
+		let tmpNoiseSection = pContainer.querySelector('[data-settings-type="noise"]');
+		if (!tmpNoiseSection) return;
+
+		let tmpTheme = this._FlowView._ThemeProvider.getActiveTheme();
+		if (tmpTheme && tmpTheme.NoiseConfig && tmpTheme.NoiseConfig.Enabled)
+		{
+			tmpNoiseSection.style.display = '';
+			// Update slider value to reflect theme default
+			let tmpSlider = tmpNoiseSection.querySelector('.pict-flow-popup-settings-slider');
+			let tmpValueLabel = tmpNoiseSection.querySelector('.pict-flow-popup-settings-slider-value');
+			if (tmpSlider)
+			{
+				let tmpLevel = Math.round(this._FlowView._ThemeProvider.getNoiseLevel() * 100);
+				tmpSlider.value = String(tmpLevel);
+				if (tmpValueLabel) tmpValueLabel.textContent = tmpLevel + '%';
 			}
 		}
+		else
+		{
+			tmpNoiseSection.style.display = 'none';
+		}
+	}
+
+	// ── Toolbar Mode Switching ────────────────────────────────────────────
+
+	/**
+	 * Switch between docked, floating, and collapsed modes.
+	 * @param {string} pMode - 'docked' | 'floating' | 'collapsed'
+	 */
+	_setToolbarMode(pMode)
+	{
+		// Close any active popup first
+		this._closePopup();
+
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
+		let tmpBar = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-Bar-${tmpFlowViewIdentifier}`);
+		let tmpCollapsed = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-Collapsed-${tmpFlowViewIdentifier}`);
+
+		switch (pMode)
+		{
+			case 'docked':
+				// Show toolbar bar
+				if (tmpBar.length > 0) tmpBar[0].style.display = '';
+				// Hide collapsed button
+				if (tmpCollapsed.length > 0) tmpCollapsed[0].classList.remove('visible');
+				// Hide floating toolbar
+				if (this._FloatingToolbarView) this._FloatingToolbarView.hide();
+				break;
+
+			case 'floating':
+				// Hide toolbar bar
+				if (tmpBar.length > 0) tmpBar[0].style.display = 'none';
+				// Hide collapsed button
+				if (tmpCollapsed.length > 0) tmpCollapsed[0].classList.remove('visible');
+				// Show floating toolbar
+				this._showFloatingToolbar();
+				break;
+
+			case 'collapsed':
+				// Hide toolbar bar
+				if (tmpBar.length > 0) tmpBar[0].style.display = 'none';
+				// Show collapsed button
+				if (tmpCollapsed.length > 0) tmpCollapsed[0].classList.add('visible');
+				// Hide floating toolbar
+				if (this._FloatingToolbarView) this._FloatingToolbarView.hide();
+				break;
+		}
+
+		this._ToolbarMode = pMode;
+	}
+
+	/**
+	 * Lazily create and show the floating toolbar.
+	 */
+	_showFloatingToolbar()
+	{
+		if (!this._FlowView) return;
+
+		if (!this._FloatingToolbarView)
+		{
+			let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
+			this._FloatingToolbarView = this.fable.instantiateServiceProviderWithoutRegistration(
+				'PictViewFlowFloatingToolbar',
+				{
+					FlowViewIdentifier: tmpFlowViewIdentifier,
+					DefaultDestinationAddress: `#Flow-FloatingToolbar-Container-${tmpFlowViewIdentifier}`
+				}
+			);
+			this._FloatingToolbarView._ToolbarView = this;
+			this._FloatingToolbarView._FlowView = this._FlowView;
+			this._FloatingToolbarView.render();
+		}
+
+		this._FloatingToolbarView.show();
+	}
+
+	// ── Node Placement Helpers ────────────────────────────────────────────
+
+	/**
+	 * Add a node at the center of the visible viewport.
+	 * @param {string} pNodeType - The node type hash
+	 */
+	_addNodeAtCenter(pNodeType)
+	{
+		if (!this._FlowView) return;
+
+		let tmpVS = this._FlowView.viewState;
+
+		// Calculate the center of the visible SVG area
+		let tmpSVGContainer = this._FlowView._SVGElement;
+		let tmpWidth = tmpSVGContainer ? tmpSVGContainer.clientWidth : 600;
+		let tmpHeight = tmpSVGContainer ? tmpSVGContainer.clientHeight : 400;
+
+		let tmpCenterX = (-tmpVS.PanX + tmpWidth / 2) / tmpVS.Zoom;
+		let tmpCenterY = (-tmpVS.PanY + tmpHeight / 2) / tmpVS.Zoom;
+
+		// Slight offset to avoid stacking
+		let tmpNodeCount = this._FlowView.flowData.Nodes.length;
+		tmpCenterX += (tmpNodeCount % 5) * 30;
+		tmpCenterY += (tmpNodeCount % 5) * 30;
+
+		this._FlowView.addNode(pNodeType, tmpCenterX, tmpCenterY);
 	}
 
 	/**
@@ -586,6 +1077,8 @@ class PictViewFlowToolbar extends libPictView
 		this._FlowView.addNode(pCardType, tmpX, tmpY);
 	}
 
+	// ── Action Handler ────────────────────────────────────────────────────
+
 	/**
 	 * Handle a toolbar action
 	 * @param {string} pAction
@@ -599,27 +1092,7 @@ class PictViewFlowToolbar extends libPictView
 		switch (pAction)
 		{
 			case 'add-node':
-				{
-					// Get selected node type from dropdown
-					let tmpSelectElements = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-NodeType-${tmpFlowViewIdentifier}`);
-					let tmpNodeType = 'default';
-					if (tmpSelectElements.length > 0)
-					{
-						tmpNodeType = tmpSelectElements[0].value;
-					}
-
-					// Place the new node at a reasonable position
-					let tmpVS = this._FlowView.viewState;
-					let tmpX = (-tmpVS.PanX + 200) / tmpVS.Zoom;
-					let tmpY = (-tmpVS.PanY + 200) / tmpVS.Zoom;
-
-					// Offset if there are existing nodes to avoid overlap
-					let tmpNodeCount = this._FlowView.flowData.Nodes.length;
-					tmpX += (tmpNodeCount % 5) * 40;
-					tmpY += (tmpNodeCount % 5) * 40;
-
-					this._FlowView.addNode(tmpNodeType, tmpX, tmpY);
-				}
+				this._openPopup('add-node');
 				break;
 
 			case 'delete-selected':
@@ -642,57 +1115,51 @@ class PictViewFlowToolbar extends libPictView
 				this._FlowView.autoLayout();
 				break;
 
-			case 'save-layout':
-				{
-					let tmpName = window.prompt('Enter a name for this layout:');
-					if (tmpName !== null && tmpName.trim() !== '')
-					{
-						this._FlowView._LayoutProvider.saveLayout(tmpName.trim());
-						this._populateLayoutDropdown();
-					}
-				}
+			case 'cards-popup':
+				this._openPopup('cards');
 				break;
 
-			case 'restore-layout':
-				{
-					let tmpSelectElements = this.pict.ContentAssignment.getElement(
-						`#Flow-Toolbar-LayoutSelect-${tmpFlowViewIdentifier}`
-					);
-					if (tmpSelectElements.length > 0)
-					{
-						let tmpLayoutHash = tmpSelectElements[0].value;
-						if (tmpLayoutHash)
-						{
-							this._FlowView._LayoutProvider.restoreLayout(tmpLayoutHash);
-						}
-					}
-				}
+			case 'layout-popup':
+				this._openPopup('layout');
 				break;
 
-			case 'delete-layout':
+			case 'settings-popup':
+				this._openPopup('settings');
+				break;
+
+			case 'toggle-floating':
+				if (this._ToolbarMode === 'floating')
 				{
-					let tmpSelectElements = this.pict.ContentAssignment.getElement(
-						`#Flow-Toolbar-LayoutSelect-${tmpFlowViewIdentifier}`
-					);
-					if (tmpSelectElements.length > 0)
-					{
-						let tmpLayoutHash = tmpSelectElements[0].value;
-						if (tmpLayoutHash)
-						{
-							this._FlowView._LayoutProvider.deleteLayout(tmpLayoutHash);
-							this._populateLayoutDropdown();
-						}
-					}
+					this._setToolbarMode('docked');
+				}
+				else
+				{
+					this._setToolbarMode('floating');
 				}
 				break;
 
+			case 'collapse-toolbar':
+				this._setToolbarMode('collapsed');
+				break;
+
+			case 'expand-toolbar':
+				this._setToolbarMode('docked');
+				break;
+
 			case 'fullscreen':
 				{
 					let tmpIsFullscreen = this._FlowView.toggleFullscreen();
-					let tmpBtnElements = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-Fullscreen-${tmpFlowViewIdentifier}`);
-					if (tmpBtnElements.length > 0)
+					let tmpIconProvider = this._FlowView._IconProvider;
+					let tmpIconElements = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-Fullscreen-Icon-${tmpFlowViewIdentifier}`);
+					if (tmpIconElements.length > 0 && tmpIconProvider)
+					{
+						tmpIconElements[0].innerHTML = tmpIconProvider.getIconSVGMarkup(
+							tmpIsFullscreen ? 'exit-fullscreen' : 'fullscreen', 14);
+					}
+					let tmpFullscreenBtn = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-Fullscreen-${tmpFlowViewIdentifier}`);
+					if (tmpFullscreenBtn.length > 0)
 					{
-						tmpBtnElements[0].innerHTML = tmpIsFullscreen ? '&#x2716; Exit Fullscreen' : '&#x26F6; Fullscreen';
+						tmpFullscreenBtn[0].setAttribute('title', tmpIsFullscreen ? 'Exit Fullscreen' : 'Toggle Fullscreen');
 					}
 				}
 				break;