pict-section-flow 1.2.0 → 1.4.0

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

@@ -11,6 +11,10 @@ const _DefaultConfiguration =
 
 	FlowViewIdentifier: 'Pict-Flow',
 
+	// Host-supplied buttons (mirrors the docked toolbar's ToolbarExtraButtons), so floating mode keeps
+	// the same custom buttons. Each entry is { Hash, Icon, Label?, Tooltip?, Active? }.
+	ToolbarExtraButtons: [],
+
 	CSS: false,
 
 	Templates:
@@ -64,6 +68,7 @@ const _DefaultConfiguration =
 		onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._FloatingToolbarView._handleButtonClick('fullscreen')">
 		<span id="Flow-FloatingIcon-fullscreen-{~D:Record.FlowViewIdentifier~}"></span>
 	</button>
+	{~TS:Flow-FloatingToolbar-Extra-Button:Record.ToolbarExtraButtons~}
 	<div class="pict-flow-floating-separator"></div>
 	<button class="pict-flow-floating-btn" data-flow-action="dock-toolbar" title="Dock Toolbar"
 		onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._FloatingToolbarView._handleButtonClick('dock-toolbar')">
@@ -71,6 +76,15 @@ const _DefaultConfiguration =
 	</button>
 </div>
 `
+		},
+		{
+			Hash: 'Flow-FloatingToolbar-Extra-Button',
+			// Icon-only host button (the floating toolbar is compact). Icon span
+			// is filled post-render by _populateIcons (keyed by Hash).
+			Template: /*html*/`<button class="pict-flow-floating-btn" title="{~D:Record.Tooltip~}" data-flow-action="extra" data-extra-hash="{~D:Record.Hash~}"
+	onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._FloatingToolbarView._handleExtraClick('{~D:Record.Hash~}', this)">
+	<span id="Flow-FloatingExtraIcon-{~D:Record.Hash~}-{~D:Record.FlowViewIdentifier~}"></span>
+</button>`
 		}
 	],
 
@@ -111,9 +125,34 @@ class PictViewFlowFloatingToolbar extends libPictView
 
 	render(pRenderableHash, pRenderDestinationAddress, pTemplateRecordAddress)
 	{
+		// Stamp the owning view onto each host button so its row resolves.
+		let tmpExtraButtons = this.options.ToolbarExtraButtons;
+		if (Array.isArray(tmpExtraButtons))
+		{
+			for (let i = 0; i < tmpExtraButtons.length; i++)
+			{
+				tmpExtraButtons[i].FlowViewIdentifier = this.options.FlowViewIdentifier;
+			}
+		}
 		return super.render(pRenderableHash, pRenderDestinationAddress, this.options);
 	}
 
+	/**
+	 * Handle a click on a host-supplied (ToolbarExtraButtons) floating button.
+	 * Routes to the docked toolbar's _handleExtraAction (the single dispatch
+	 * point that fires the FlowView's onToolbarButton hook).
+	 *
+	 * @param {string} pHash - The button's Hash
+	 * @param {HTMLElement} pElement - The clicked button element
+	 */
+	_handleExtraClick(pHash, pElement)
+	{
+		if (this._ToolbarView)
+		{
+			this._ToolbarView._handleExtraAction(pHash, pElement);
+		}
+	}
+
 	onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent)
 	{
 		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
@@ -222,6 +261,20 @@ class PictViewFlowFloatingToolbar extends libPictView
 				tmpElements[0].innerHTML = tmpIconProvider.getIconSVGMarkup(tmpIconMap[tmpKeys[i]], 16);
 			}
 		}
+
+		// Host-supplied extra buttons (keyed by Hash, icon from the button's Icon key).
+		let tmpExtraButtons = this.options.ToolbarExtraButtons;
+		if (Array.isArray(tmpExtraButtons))
+		{
+			for (let i = 0; i < tmpExtraButtons.length; i++)
+			{
+				let tmpExtraIcon = this.pict.ContentAssignment.getElement(`#Flow-FloatingExtraIcon-${tmpExtraButtons[i].Hash}-${tmpFlowViewIdentifier}`);
+				if (tmpExtraIcon.length > 0)
+				{
+					tmpExtraIcon[0].innerHTML = tmpIconProvider.getIconSVGMarkup(tmpExtraButtons[i].Icon, 16);
+				}
+			}
+		}
 	}
 
 	/**

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

@@ -52,6 +52,13 @@ class PictViewFlowNode extends libPictView
 		{
 			tmpClassList += ' pict-flow-node-color-' + tmpColorRole;
 		}
+		// A host can stamp an extra CSS class onto a node via node.NodeClass (e.g. a moodboard marks a
+		// card whose connection points should stay visible on a read-only board). Survives re-renders
+		// because it lives on the node data.
+		if (typeof pNodeData.NodeClass === 'string' && pNodeData.NodeClass)
+		{
+			tmpClassList += ' ' + pNodeData.NodeClass;
+		}
 		tmpGroup.setAttribute('class', tmpClassList);
 		tmpGroup.setAttribute('transform', `translate(${pNodeData.X}, ${pNodeData.Y})`);
 		tmpGroup.setAttribute('data-node-hash', pNodeData.Hash);
@@ -86,6 +93,13 @@ class PictViewFlowNode extends libPictView
 		pNodeData.Width = tmpWidth;
 		pNodeData.Height = tmpHeight;
 
+		// Optional rotation (degrees) about the node's center. Applied on top of the position
+		// translate so free-form canvases can tilt a card; zero / unset leaves it axis-aligned.
+		if (typeof pNodeData.Rotation === 'number' && pNodeData.Rotation)
+		{
+			tmpGroup.setAttribute('transform', PictViewFlowNode.nodeTransform(pNodeData.X, pNodeData.Y, pNodeData.Rotation, tmpWidth, tmpHeight));
+		}
+
 		// Determine node body mode from theme (bracket vs rect)
 		let tmpNodeBodyMode = 'rect';
 		if (this._FlowView._ThemeProvider)
@@ -160,8 +174,10 @@ class PictViewFlowNode extends libPictView
 				tmpGroup.appendChild(tmpTypeLabel);
 			}
 
-			// FlowCard metadata: icon in title bar, code badge in body (hover-only via CSS)
-			if (pNodeTypeConfig && pNodeTypeConfig.CardMetadata)
+			// FlowCard metadata: icon in title bar, code badge in body (hover-only via CSS). Skip the
+			// title icon entirely when there is no title bar (height 0), e.g. edge-to-edge moodboard
+			// cards, otherwise the default fallback glyph paints in the card's top-left corner.
+			if (pNodeTypeConfig && pNodeTypeConfig.CardMetadata && tmpTitleBarHeight > 0)
 			{
 				let tmpMeta = pNodeTypeConfig.CardMetadata;
 				let tmpIconProvider = this._FlowView._IconProvider;
@@ -312,6 +328,24 @@ class PictViewFlowNode extends libPictView
 			tmpGroup.appendChild(tmpIndicator);
 		}
 
+		// Resize handle: a small grip at the bottom-right corner, shown only when this node is
+		// selected and the flow allows node resizing. Its data-element-type routes pointer-down to
+		// the InteractionManager's node-resize path. Appended last so it paints over the body.
+		if (pIsSelected && this._FlowView.options && this._FlowView.options.EnableNodeResizing)
+		{
+			let tmpHandleSize = 14;
+			let tmpHandle = this._FlowView._SVGHelperProvider.createSVGElement('rect');
+			tmpHandle.setAttribute('class', 'pict-flow-node-resize-handle');
+			tmpHandle.setAttribute('x', String(tmpWidth - (tmpHandleSize - 4)));
+			tmpHandle.setAttribute('y', String(tmpHeight - (tmpHandleSize - 4)));
+			tmpHandle.setAttribute('width', String(tmpHandleSize));
+			tmpHandle.setAttribute('height', String(tmpHandleSize));
+			tmpHandle.setAttribute('rx', '3');
+			tmpHandle.setAttribute('data-node-hash', pNodeData.Hash);
+			tmpHandle.setAttribute('data-element-type', 'node-resize');
+			tmpGroup.appendChild(tmpHandle);
+		}
+
 		pNodesLayer.appendChild(tmpGroup);
 	}
 
@@ -556,6 +590,26 @@ class PictViewFlowNode extends libPictView
 		return Math.min(Math.max(8, tmpRadius), Math.floor(pTitleBarHeight / 2));
 	}
 
+	/**
+	 * The SVG group transform for a node: a position translate, plus a rotation about the node's
+	 * center when a non-zero rotation (degrees) is given.
+	 * @param {number} pX
+	 * @param {number} pY
+	 * @param {number} pRotation - degrees; 0 / non-number means no rotation
+	 * @param {number} pWidth
+	 * @param {number} pHeight
+	 * @returns {string}
+	 */
+	static nodeTransform(pX, pY, pRotation, pWidth, pHeight)
+	{
+		let tmpRotation = (typeof pRotation === 'number') ? pRotation : 0;
+		if (!tmpRotation)
+		{
+			return `translate(${pX}, ${pY})`;
+		}
+		return `translate(${pX}, ${pY}) rotate(${tmpRotation} ${pWidth / 2} ${pHeight / 2})`;
+	}
+
 	_renderRectNodeBody(pGroup, pNodeData, pWidth, pHeight, pTitleBarHeight, pNodeTypeConfig)
 	{
 		// Per-card corner radius (a node-data or node-type override of the theme default), so a card

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

@@ -226,14 +226,36 @@ class PictViewFlowPropertiesPanel extends libPictView
 		let tmpFO = pPanelsLayer.querySelector(`[data-panel-hash="${pPanelData.Hash}"]`);
 		if (tmpFO)
 		{
-			// Render appearance and help tabs. Tab-switching click handlers
-			// are inline `onclick=` attributes in Flow-PanelChrome-Template
-			// that call FlowView._handlePanelTabClick → switchPanelTab.
-			this._renderAppearanceTab(pPanelData, tmpFO);
-			this._renderHelpTab(pPanelData, tmpFO);
+			// The Appearance tab edits a node's body/title appearance, which a connection (edge) has none
+			// of -- so for a connection panel, hide that tab (and the now-single-tab bar) and leave just
+			// the connection's own panel. Node panels keep the appearance + help tabs.
+			if (pPanelData.ConnectionHash)
+			{
+				this._hidePanelTabsForConnection(tmpFO);
+			}
+			else
+			{
+				// Tab-switching click handlers are inline `onclick=` attributes in Flow-PanelChrome-Template
+				// that call FlowView._handlePanelTabClick → switchPanelTab.
+				this._renderAppearanceTab(pPanelData, tmpFO);
+				this._renderHelpTab(pPanelData, tmpFO);
+			}
 		}
 	}
 
+	// Hide the node-oriented Appearance (and Help) tabs plus the tab bar for a connection panel, so it
+	// shows only its single Properties pane with no lone tab.
+	_hidePanelTabsForConnection(pForeignObject)
+	{
+		if (!pForeignObject) { return; }
+		let tmpAppearanceTab = pForeignObject.querySelector('.pict-flow-panel-tab[data-tab-target="appearance"]');
+		if (tmpAppearanceTab) { tmpAppearanceTab.style.display = 'none'; }
+		let tmpAppearancePane = pForeignObject.querySelector('.pict-flow-panel-tab-pane[data-tab="appearance"]');
+		if (tmpAppearancePane) { tmpAppearancePane.style.display = 'none'; }
+		let tmpTabbar = pForeignObject.querySelector('.pict-flow-panel-tabbar');
+		if (tmpTabbar) { tmpTabbar.style.display = 'none'; }
+	}
+
 	/**
 	 * Instantiate (or reuse) the panel type implementation and render into the body container.
 	 *

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

@@ -15,6 +15,10 @@ const _DefaultConfiguration =
 	EnableAddNode: true,
 	EnableCardPalette: true,
 
+	// Host-supplied buttons (set by the FlowView from its own ToolbarExtraButtons option). Each entry
+	// is { Hash, Icon, Label?, Tooltip?, Active? }. Rendered as a group via Flow-Toolbar-Extra-Button.
+	ToolbarExtraButtons: [],
+
 	CSS: false,
 
 	Templates:
@@ -77,6 +81,7 @@ const _DefaultConfiguration =
 			<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-extra">{~TS:Flow-Toolbar-Extra-Button:Record.ToolbarExtraButtons~}</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"
 			onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._handleToolbarAction('settings-popup')">
@@ -105,6 +110,18 @@ const _DefaultConfiguration =
 <div class="pict-flow-toolbar-popup-anchor" id="Flow-Toolbar-PopupAnchor-{~D:Record.FlowViewIdentifier~}">
 </div>
 `
+		},
+		{
+			Hash: 'Flow-Toolbar-Extra-Button',
+			// Host-supplied button. The icon span is filled post-render by
+			// _populateToolbarIcons (keyed by Hash), matching how the built-in
+			// button icons are injected. FlowViewIdentifier + ActiveClass are
+			// stamped onto each row in render().
+			Template: /*html*/`<button class="pict-flow-toolbar-btn{~D:Record.ActiveClass~}" id="Flow-Toolbar-Extra-{~D:Record.Hash~}-{~D:Record.FlowViewIdentifier~}" title="{~D:Record.Tooltip~}" data-flow-action="extra" data-extra-hash="{~D:Record.Hash~}"
+	onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._handleExtraAction('{~D:Record.Hash~}', this)">
+	<span class="pict-flow-toolbar-btn-icon" id="Flow-Toolbar-ExtraIcon-{~D:Record.Hash~}-{~D:Record.FlowViewIdentifier~}"></span>
+	<span class="pict-flow-toolbar-btn-text">{~D:Record.Label~}</span>
+</button>`
 		},
 		{
 			Hash: 'Flow-AddNode-List',
@@ -121,7 +138,7 @@ const _DefaultConfiguration =
 				+ ' 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>~}'
+				+ '{~D:Record.CodeBlock~}'
 				+ '</div>'
 		},
 		{
@@ -137,13 +154,16 @@ const _DefaultConfiguration =
 		},
 		{
 			Hash: 'Flow-Cards-Card',
+			// The icon / swatch / code spans are pre-rendered into complete HTML blocks by
+			// _buildCardsPopup (a block is '' when its piece is absent). The template can't build them
+			// inline: the engine does not parse a nested {~D:~} inside a {~NE:~} (its `~}` terminator
+			// collides with the inner tag's), which left the palette showing raw template literals.
 			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>~}'
+				+ '{~D:Record.IconBlock~}'
+				+ '{~D:Record.SwatchBlock~}'
 				+ '<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>~}'
+				+ '{~D:Record.CodeBlock~}'
 				+ '</div>'
 		},
 		{
@@ -212,11 +232,32 @@ class PictViewFlowToolbar extends libPictView
 
 	render(pRenderableHash, pRenderDestinationAddress, pTemplateRecordAddress)
 	{
+		// Stamp the per-row render fields onto each host-supplied button so the
+		// Flow-Toolbar-Extra-Button rows resolve their owning view and active
+		// state (nested {~D:~} addressing inside {~TS:~} is not supported).
+		this._stampExtraButtons();
 		// Pass this.options as the template record so {~D:Record.FlowViewIdentifier~}
 		// resolves correctly in the toolbar template.
 		return super.render(pRenderableHash, pRenderDestinationAddress, this.options);
 	}
 
+	/**
+	 * Stamp FlowViewIdentifier + ActiveClass onto each ToolbarExtraButtons entry
+	 * so the row template can address them.
+	 */
+	_stampExtraButtons()
+	{
+		let tmpExtraButtons = this.options.ToolbarExtraButtons;
+		if (!Array.isArray(tmpExtraButtons)) return;
+		for (let i = 0; i < tmpExtraButtons.length; i++)
+		{
+			tmpExtraButtons[i].FlowViewIdentifier = this.options.FlowViewIdentifier;
+			tmpExtraButtons[i].ActiveClass = tmpExtraButtons[i].Active ? ' pict-flow-toolbar-btn-active' : '';
+			// A label-less (icon-only) button renders an empty text span; CSS (:empty) collapses it.
+			if (typeof tmpExtraButtons[i].Label !== 'string') { tmpExtraButtons[i].Label = ''; }
+		}
+	}
+
 	onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent)
 	{
 		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
@@ -321,6 +362,20 @@ class PictViewFlowToolbar extends libPictView
 		{
 			tmpAutoChevron[0].innerHTML = tmpIconProvider.getIconSVGMarkup('chevron-down', 8);
 		}
+
+		// Host-supplied extra buttons (keyed by Hash, icon from the button's Icon key).
+		let tmpExtraButtons = this.options.ToolbarExtraButtons;
+		if (Array.isArray(tmpExtraButtons))
+		{
+			for (let i = 0; i < tmpExtraButtons.length; i++)
+			{
+				let tmpExtraIcon = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-ExtraIcon-${tmpExtraButtons[i].Hash}-${tmpFlowViewIdentifier}`);
+				if (tmpExtraIcon.length > 0)
+				{
+					tmpExtraIcon[0].innerHTML = tmpIconProvider.getIconSVGMarkup(tmpExtraButtons[i].Icon, 14);
+				}
+			}
+		}
 	}
 
 	// ── Popup Management ──────────────────────────────────────────────────
@@ -548,12 +603,16 @@ class PictViewFlowToolbar extends libPictView
 				let tmpResolvedKey = tmpIconProvider.resolveIconKey(tmpMeta);
 				tmpIconHTML = tmpIconProvider.getIconSVGMarkup(tmpResolvedKey, 16);
 			}
+			let tmpRowCode = tmpMeta.Code || '';
 			tmpRows.push(
 			{
 				NodeType: tmpTypeKeys[i],
 				Label: tmpTypeConfig.Label || '',
 				IconHTML: tmpIconHTML,
-				Code: tmpMeta.Code || '',
+				Code: tmpRowCode,
+				// Pre-rendered so the template renders it with {~D:~} (a nested {~D:~} inside {~NE:~} is
+				// not parsed by the engine).
+				CodeBlock: tmpRowCode ? ('<span class="pict-flow-popup-list-item-code">' + tmpRowCode + '</span>') : '',
 				FlowViewIdentifier: tmpFlowViewIdentifier
 			});
 		}
@@ -682,16 +741,27 @@ class PictViewFlowToolbar extends libPictView
 					tmpIconHTML = tmpIconProvider.getIconSVGMarkup('default', 14);
 				}
 
+				// Pre-render each conditional span into a complete HTML block ('' when absent). The
+				// template renders these directly with {~D:~}; it cannot wrap them inline because the
+				// engine does not parse a nested {~D:~} inside a {~NE:~}.
+				let tmpCode = tmpMeta.Code || '';
+				let tmpSwatchColor = (!tmpIconHTML && !tmpIsEmoji && tmpCardConfig.TitleBarColor) ? tmpCardConfig.TitleBarColor : '';
+				let tmpIconBlock = '';
+				if (tmpIconHTML) { tmpIconBlock = '<span class="pict-flow-palette-card-icon">' + tmpIconHTML + '</span>'; }
+				else if (tmpIsEmoji) { tmpIconBlock = '<span class="pict-flow-palette-card-icon">' + tmpMeta.Icon + '</span>'; }
+				let tmpSwatchBlock = tmpSwatchColor ? ('<span class="pict-flow-palette-card-swatch" style="background-color: ' + tmpSwatchColor + ';"></span>') : '';
+				let tmpCodeBlock = tmpCode ? ('<span class="pict-flow-palette-card-code">' + tmpCode + '</span>') : '';
+
 				tmpMatching.push(
 				{
 					CardType: tmpCardConfig.Hash,
 					Label: tmpCardConfig.Label || '',
-					Code: tmpMeta.Code || '',
-					IconHTML: tmpIconHTML,
-					IconEmoji: tmpIsEmoji ? tmpMeta.Icon : '',
+					Code: tmpCode,
+					IconBlock: tmpIconBlock,
+					SwatchBlock: tmpSwatchBlock,
+					CodeBlock: tmpCodeBlock,
 					DisabledClass: (tmpMeta.Enabled === false) ? ' disabled' : '',
 					Tooltip: tmpMeta.Tooltip || tmpMeta.Description || '',
-					SwatchColor: (!tmpIconHTML && !tmpIsEmoji && tmpCardConfig.TitleBarColor) ? tmpCardConfig.TitleBarColor : '',
 					FlowViewIdentifier: tmpFlowViewIdentifier
 				});
 			}
@@ -1677,7 +1747,8 @@ class PictViewFlowToolbar extends libPictView
 					FlowViewIdentifier: tmpFlowViewIdentifier,
 					DefaultDestinationAddress: `#Flow-FloatingToolbar-Container-${tmpFlowViewIdentifier}`,
 					EnableAddNode: this.options.EnableAddNode,
-					EnableCardPalette: this.options.EnableCardPalette
+					EnableCardPalette: this.options.EnableCardPalette,
+					ToolbarExtraButtons: this.options.ToolbarExtraButtons
 				}
 			);
 			this._FloatingToolbarView._ToolbarView = this;
@@ -1742,6 +1813,23 @@ class PictViewFlowToolbar extends libPictView
 	 * Handle a toolbar action
 	 * @param {string} pAction
 	 */
+	/**
+	 * Handle a click on a host-supplied (ToolbarExtraButtons) button. Routes to
+	 * the FlowView's onToolbarButton hook with the button hash and the clicked
+	 * element (so the host can anchor a popover next to it).
+	 *
+	 * @param {string} pHash - The button's Hash
+	 * @param {HTMLElement} pElement - The clicked button element
+	 */
+	_handleExtraAction(pHash, pElement)
+	{
+		if (!this._FlowView) return;
+		if (typeof this._FlowView.options.onToolbarButton === 'function')
+		{
+			this._FlowView.options.onToolbarButton(pHash, pElement);
+		}
+	}
+
 	_handleToolbarAction(pAction)
 	{
 		if (!this._FlowView) return;

package/source/views/PictView-Flow.js

@@ -59,10 +59,34 @@ const _DefaultConfiguration =
 	EnableZooming: true,
 	EnableNodeDragging: true,
 	EnableConnectionCreation: true,
+	// When on, a connection can be drawn between ANY two ports (any port can start a drag, any port can
+	// receive it), rather than only output -> input. Off by default so directed graphs (workflows) keep
+	// their source/target semantics; free-form canvases (a moodboard, whose links are undirected) turn it
+	// on so a card's ports connect in any direction.
+	EnableUndirectedConnections: false,
+	// When on, the selected node shows a bottom-right grip that resizes it by drag. Off by default
+	// so existing diagrams are unaffected; free-form canvases (moodboards) turn it on.
+	EnableNodeResizing: false,
 	EnableGridSnap: false,
 	GridSnapSize: 20,
+	// When on, several nodes can be selected at once: shift-click a node to toggle it, drag on the
+	// empty canvas to marquee-select (shift+drag pans), and dragging any selected node moves them all.
+	// Off by default so single-selection diagrams are unaffected; free-form canvases turn it on.
+	EnableMultiSelect: false,
+	// When on, dragging a single node shows alignment guide lines (and snaps) as its edges or centers
+	// line up with other nodes. Off by default; free-form canvases turn it on.
+	EnableAlignmentGuides: false,
 	EnableLayoutMenu: true,
 
+	// Host-supplied toolbar buttons. Each entry is { Hash, Icon, Label?, Tooltip?, Active? } where Icon
+	// is a flow icon-provider key (edit, check, background, ...). They render in BOTH the docked and the
+	// floating toolbar (so they survive every toolbar mode) and, on click, fire onToolbarButton below.
+	// Empty by default, so existing consumers are unaffected.
+	ToolbarExtraButtons: [],
+	// Fired when a ToolbarExtraButtons button is clicked: onToolbarButton(pHash, pElement). The element
+	// lets the host anchor a popover next to the button. Off (false) by default.
+	onToolbarButton: false,
+
 	MinZoom: 0.1,
 	MaxZoom: 5.0,
 	ZoomStep: 0.1,
@@ -70,6 +94,8 @@ const _DefaultConfiguration =
 	DefaultNodeType: 'default',
 	DefaultNodeWidth: 180,
 	DefaultNodeHeight: 80,
+	MinimumNodeWidth: 48,
+	MinimumNodeHeight: 32,
 
 	// Properties panel for connections (edges). Connections are not typed, so one config serves
 	// them all: { PanelType, DefaultWidth, DefaultHeight, Title, Configuration }. When set, a
@@ -227,6 +253,9 @@ class PictViewFlow extends libPictView
 				PanY: 0,
 				Zoom: 1,
 				SelectedNodeHash: null,
+				// The full selection set (multi-select). SelectedNodeHash stays the primary / most
+				// recently touched member for backward compatibility; single-select keeps it == [hash].
+				SelectedNodeHashes: [],
 				SelectedConnectionHash: null,
 				SelectedTetherHash: null
 			},
@@ -547,7 +576,8 @@ class PictViewFlow extends libPictView
 						DefaultDestinationAddress: `#Flow-Toolbar-${tmpViewIdentifier}`,
 						FlowViewIdentifier: tmpViewIdentifier,
 						EnableAddNode: this.options.EnableAddNode,
-						EnableCardPalette: this.options.EnableCardPalette
+						EnableCardPalette: this.options.EnableCardPalette,
+						ToolbarExtraButtons: this.options.ToolbarExtraButtons
 					}
 				));
 			// Use the toolbar's render method after it's set up
@@ -558,15 +588,13 @@ class PictViewFlow extends libPictView
 			}
 		}
 
-		// Setup the node renderer
+		// Setup the node renderer. A consumer can override the node title-bar height (e.g. a moodboard
+		// sets it to 0 for edge-to-edge image and note cards) via the flow-level NodeTitleBarHeight
+		// option; otherwise the renderer keeps its own default.
+		let tmpNodeViewOptions = { ViewIdentifier: `Flow-NodeRenderer-${tmpViewIdentifier}`, AutoRender: false };
+		if (typeof this.options.NodeTitleBarHeight === 'number') { tmpNodeViewOptions.NodeTitleBarHeight = this.options.NodeTitleBarHeight; }
 		this._NodeView = this.fable.instantiateServiceProviderWithoutRegistration('PictViewFlowNode',
-			Object.assign({},
-				libPictViewFlowNode.default_configuration,
-				{
-					ViewIdentifier: `Flow-NodeRenderer-${tmpViewIdentifier}`,
-					AutoRender: false
-				}
-			));
+			Object.assign({}, libPictViewFlowNode.default_configuration, tmpNodeViewOptions));
 		this._NodeView._FlowView = this;
 
 		// Setup the properties panel renderer
@@ -616,6 +644,33 @@ class PictViewFlow extends libPictView
 		return this._SelectionManager.selectNode(pNodeHash);
 	}
 
+	/**
+	 * Toggle a node's membership in the selection set (multi-select; shift-click).
+	 * @param {string} pNodeHash
+	 */
+	toggleNodeSelection(pNodeHash)
+	{
+		return this._SelectionManager.toggleNodeSelection(pNodeHash);
+	}
+
+	/**
+	 * Replace the selection set with the given node hashes (multi-select; marquee result).
+	 * @param {Array<string>} pNodeHashes
+	 */
+	selectNodes(pNodeHashes)
+	{
+		return this._SelectionManager.selectNodes(pNodeHashes);
+	}
+
+	/**
+	 * The current selection set as an array of node hashes.
+	 * @returns {Array<string>}
+	 */
+	getSelectedNodeHashes()
+	{
+		return this._SelectionManager.getSelectedNodeHashes();
+	}
+
 	/**
 	 * Select a connection
 	 * @param {string|null} pConnectionHash - Hash of the connection to select, or null to deselect
@@ -1378,6 +1433,27 @@ class PictViewFlow extends libPictView
 		let tmpSource = this.getPortPosition(tmpConnection.SourceNodeHash, tmpConnection.SourcePortHash);
 		let tmpTarget = this.getPortPosition(tmpConnection.TargetNodeHash, tmpConnection.TargetPortHash);
 		if (!tmpSource || !tmpTarget) return null;
+		// A connection renders as a curve, so the straight-line average of its endpoints sits OFF the
+		// line (the panel tether would point into empty space). Prefer the true midpoint of the rendered
+		// path -- getPointAtLength at half its length, which is genuinely on the line. Fall back to the
+		// endpoint average when the path element or SVG geometry is unavailable (e.g. server-side render).
+		if (this._SVGElement && typeof this._SVGElement.querySelector === 'function')
+		{
+			let tmpPathElement = this._SVGElement.querySelector('.pict-flow-connection[data-connection-hash="' + pConnectionHash + '"]');
+			if (tmpPathElement && typeof tmpPathElement.getTotalLength === 'function' && typeof tmpPathElement.getPointAtLength === 'function')
+			{
+				try
+				{
+					let tmpLength = tmpPathElement.getTotalLength();
+					if (tmpLength > 0)
+					{
+						let tmpPoint = tmpPathElement.getPointAtLength(tmpLength / 2);
+						return { x: tmpPoint.x, y: tmpPoint.y };
+					}
+				}
+				catch (pError) { /* fall through to the straight-line midpoint */ }
+			}
+		}
 		return { x: (tmpSource.x + tmpTarget.x) / 2, y: (tmpSource.y + tmpTarget.y) / 2 };
 	}
 

package/test/CardPalette_tests.js

@@ -0,0 +1,43 @@
+const libChai = require('chai');
+const libExpect = libChai.expect;
+
+const libPictViewFlowToolbar = require('../source/views/PictView-Flow-Toolbar.js');
+
+// The card palette and the add-node list render one row per card type. Each row's icon / swatch / code
+// pieces are conditional, but the pict template engine does NOT parse a nested {~D:~} inside a {~NE:~}
+// (the NE `~}` terminator collides with the inner tag's), which left the palette showing raw template
+// literals like "{~D:Record.IconHTML ~}~};">~} Image". The fix pre-renders each piece into a complete
+// HTML block in the popup builder and renders it with a plain {~D:~}. These tests guard that the
+// broken pattern does not return.
+suite('Flow card palette + add-node row templates',
+function ()
+{
+	function templateByHash(pHash)
+	{
+		let tmpTemplate = libPictViewFlowToolbar.default_configuration.Templates.find((pT) => pT.Hash === pHash);
+		return tmpTemplate ? tmpTemplate.Template : null;
+	}
+
+	// A {~NE:Addr^ ... {~ ... ~} ... ~} block: an NE whose content contains a nested template tag.
+	const _NESTED_NE = /\{~NE:[^^]+\^[^~]*\{~/;
+
+	test('the card-palette row renders pre-built blocks, with no nested tag inside an NE',
+	function ()
+	{
+		let tmpTemplate = templateByHash('Flow-Cards-Card');
+		libExpect(tmpTemplate, 'Flow-Cards-Card template exists').to.be.a('string');
+		libExpect(_NESTED_NE.test(tmpTemplate), 'no nested {~..~} inside an {~NE:~}').to.equal(false);
+		libExpect(tmpTemplate).to.contain('{~D:Record.IconBlock~}');
+		libExpect(tmpTemplate).to.contain('{~D:Record.SwatchBlock~}');
+		libExpect(tmpTemplate).to.contain('{~D:Record.CodeBlock~}');
+	});
+
+	test('the add-node row renders a pre-built code block, with no nested tag inside an NE',
+	function ()
+	{
+		let tmpTemplate = templateByHash('Flow-AddNode-Row');
+		libExpect(tmpTemplate, 'Flow-AddNode-Row template exists').to.be.a('string');
+		libExpect(_NESTED_NE.test(tmpTemplate), 'no nested {~..~} inside an {~NE:~}').to.equal(false);
+		libExpect(tmpTemplate).to.contain('{~D:Record.CodeBlock~}');
+	});
+});