pict-section-flow 0.0.2 → 0.0.3

package/source/providers/PictProvider-Flow-Icons.js

@@ -0,0 +1,335 @@
+const libFableServiceProviderBase = require('fable-serviceproviderbase');
+
+/**
+ * PictProvider-Flow-Icons
+ *
+ * Centralized SVG icon provider for the flow diagram.
+ * All icons use a duotone style: 2px outline (#2c3e50) with
+ * subtle filled accent shapes (#d5e8f7).
+ *
+ * Each icon is registered as a pict template with hash `Flow-Icon-{key}`,
+ * making them individually overridable by consumers.
+ */
+
+const _ProviderConfiguration =
+{
+	ProviderIdentifier: 'PictProviderFlowIcons'
+};
+
+// ── Default Icon SVG Markup ────────────────────────────────────────────────
+// All icons: viewBox="0 0 24 24", duotone style
+// Accent fill: #d5e8f7, Stroke: #2c3e50, Stroke-width: 2
+//
+// The {FlowIconSize} placeholder is replaced at render time with the
+// requested pixel size. Each template is a self-contained <svg> element.
+
+const _DefaultIcons =
+{
+	// ── FlowCard Icons ─────────────────────────────────────────────────────
+
+	'ITE': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="6" r="3" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><circle cx="6" cy="18" r="2.5" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><circle cx="18" cy="18" r="2.5" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><path d="M12 9v2M9.5 12.5L6 15.5M14.5 12.5L18 15.5" stroke="#2c3e50" stroke-width="2"/></svg>',
+
+	'SW': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><path d="M3 12h5M16 12h5M14.8 9.2l3.7-5.2M14.8 14.8l3.7 5.2" stroke="#2c3e50" stroke-width="2"/></svg>',
+
+	'EACH': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><rect x="14" y="3" width="7" height="7" rx="1.5" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><rect x="3" y="14" width="7" height="7" rx="1.5" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><rect x="14" y="14" width="7" height="7" rx="1.5" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/></svg>',
+
+	'FREAD': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-7-7z" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><path d="M13 2v7h7" stroke="#2c3e50" stroke-width="2"/><path d="M9 13h6M9 17h4" stroke="#2c3e50" stroke-width="2"/></svg>',
+
+	'FWRITE': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-7-7z" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><path d="M13 2v7h7" stroke="#2c3e50" stroke-width="2"/><path d="M12 13v5M9.5 15.5L12 13l2.5 2.5" stroke="#2c3e50" stroke-width="2"/></svg>',
+
+	'LOG': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="3" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><circle cx="7.5" cy="8" r="1" fill="#2c3e50"/><circle cx="7.5" cy="12" r="1" fill="#2c3e50"/><circle cx="7.5" cy="16" r="1" fill="#2c3e50"/><path d="M11 8h5.5M11 12h5.5M11 16h3.5" stroke="#2c3e50" stroke-width="2"/></svg>',
+
+	'GET': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="10.5" cy="10.5" r="6.5" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><path d="M21 21l-5.15-5.15" stroke="#2c3e50" stroke-width="2"/></svg>',
+
+	'SET': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4.5 1.5L4 16Z" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><path d="M14 6l3 3" stroke="#2c3e50" stroke-width="2"/></svg>',
+
+	// ── UI Icons ───────────────────────────────────────────────────────────
+
+	'fullscreen': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke="#2c3e50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"/><path d="M9 21H3v-6"/><path d="M21 3l-7 7"/><path d="M3 21l7-7"/></svg>',
+
+	'exit-fullscreen': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke="#2c3e50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14h6v6"/><path d="M20 10h-6V4"/><path d="M14 10l7-7"/><path d="M3 21l7-7"/></svg>',
+
+	'close': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke="#2c3e50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
+
+	'chevron-down': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke="#2c3e50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>',
+
+	// ── Toolbar & Popup Icons ─────────────────────────────────────────────
+
+	'search': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><path d="M21 21l-4.35-4.35" stroke="#2c3e50" stroke-width="2"/></svg>',
+
+	'cards': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="16" height="12" rx="2" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><path d="M6 7V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-2" stroke="#2c3e50" stroke-width="2"/></svg>',
+
+	'layout': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="8" height="10" rx="1.5" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><rect x="13" y="3" width="8" height="6" rx="1.5" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><rect x="3" y="15" width="8" height="6" rx="1.5" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><rect x="13" y="11" width="8" height="10" rx="1.5" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/></svg>',
+
+	'collapse': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="3" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><path d="M8 12h8" stroke="#2c3e50" stroke-width="2"/></svg>',
+
+	'expand': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="3" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><path d="M12 8v8M8 12h8" stroke="#2c3e50" stroke-width="2"/></svg>',
+
+	'grip': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="#2c3e50"><circle cx="9" cy="5" r="1.5"/><circle cx="15" cy="5" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="19" r="1.5"/><circle cx="15" cy="19" r="1.5"/></svg>',
+
+	'settings': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke="#2c3e50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3" fill="#d5e8f7"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>',
+
+	'plus': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><path d="M12 8v8M8 12h8" stroke="#2c3e50" stroke-width="2"/></svg>',
+
+	'trash': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18" stroke="#2c3e50" stroke-width="2"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="#2c3e50" stroke-width="2"/><rect x="5" y="6" width="14" height="14" rx="2" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><path d="M10 11v6M14 11v6" stroke="#2c3e50" stroke-width="2"/></svg>',
+
+	'save': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><path d="M17 21v-8H7v8" stroke="#2c3e50" stroke-width="2"/><path d="M7 3v5h8" stroke="#2c3e50" stroke-width="2"/></svg>',
+
+	'auto-layout': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="8" height="6" rx="1.5" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><rect x="2" y="16" width="8" height="6" rx="1.5" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><rect x="14" y="16" width="8" height="6" rx="1.5" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><path d="M12 8v4M6 16v-4h12v4" stroke="#2c3e50" stroke-width="2"/></svg>',
+
+	'zoom-in': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><path d="M21 21l-4.35-4.35" stroke="#2c3e50" stroke-width="2"/><path d="M11 8v6M8 11h6" stroke="#2c3e50" stroke-width="2"/></svg>',
+
+	'zoom-out': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><path d="M21 21l-4.35-4.35" stroke="#2c3e50" stroke-width="2"/><path d="M8 11h6" stroke="#2c3e50" stroke-width="2"/></svg>',
+
+	'zoom-fit': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke="#2c3e50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V3h4"/><path d="M17 3h4v4"/><path d="M21 17v4h-4"/><path d="M7 21H3v-4"/><rect x="7" y="7" width="10" height="10" rx="1.5" fill="#d5e8f7"/></svg>',
+
+	'dock': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="4" rx="1.5" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><path d="M12 20V11M8 14l4-4 4 4" stroke="#2c3e50" stroke-width="2"/></svg>',
+
+	'restore': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke="#2c3e50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/></svg>',
+
+	'delete-node': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18" stroke="#2c3e50" stroke-width="2"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="#2c3e50" stroke-width="2"/><rect x="5" y="6" width="14" height="14" rx="2" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><path d="M10 11v6M14 11v6" stroke="#2c3e50" stroke-width="2"/></svg>',
+
+	// ── Fallback ───────────────────────────────────────────────────────────
+
+	'default': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="4" fill="#d5e8f7" stroke="#2c3e50" stroke-width="2"/><circle cx="12" cy="12" r="2.5" fill="#2c3e50"/></svg>'
+};
+
+class PictProviderFlowIcons extends libFableServiceProviderBase
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		let tmpOptions = Object.assign({}, _ProviderConfiguration, pOptions);
+		super(pFable, tmpOptions, pServiceHash);
+
+		this.serviceType = 'PictProviderFlowIcons';
+
+		this._FlowView = (pOptions && pOptions.FlowView) ? pOptions.FlowView : null;
+
+		// Deep copy the default icons
+		this._Icons = JSON.parse(JSON.stringify(_DefaultIcons));
+
+		// Merge any additional icons passed via options
+		if (pOptions && pOptions.AdditionalIcons && typeof pOptions.AdditionalIcons === 'object')
+		{
+			let tmpKeys = Object.keys(pOptions.AdditionalIcons);
+			for (let i = 0; i < tmpKeys.length; i++)
+			{
+				this._Icons[tmpKeys[i]] = pOptions.AdditionalIcons[tmpKeys[i]];
+			}
+		}
+	}
+
+	/**
+	 * Register all icons as pict templates with hash Flow-Icon-{key}.
+	 * Consumers can override any icon by registering a template with
+	 * the same hash before the flow view renders.
+	 */
+	registerIconTemplates()
+	{
+		if (!this.fable || !this.fable.TemplateProvider)
+		{
+			this.log.warn('PictProviderFlowIcons: TemplateProvider not available; icon templates not registered.');
+			return;
+		}
+
+		let tmpKeys = Object.keys(this._Icons);
+		for (let i = 0; i < tmpKeys.length; i++)
+		{
+			let tmpHash = 'Flow-Icon-' + tmpKeys[i];
+
+			// Only register if not already present (allow consumer overrides)
+			if (!this.fable.TemplateProvider.getTemplate(tmpHash))
+			{
+				this.fable.TemplateProvider.addTemplate(tmpHash, this._Icons[tmpKeys[i]]);
+			}
+		}
+	}
+
+	/**
+	 * Determine if the given icon string is an emoji (legacy) or an icon key.
+	 * Returns true if the string contains characters with code points above U+00FF,
+	 * indicating emoji or Unicode symbol characters.
+	 *
+	 * @param {string} pIconValue - The icon value to check
+	 * @returns {boolean}
+	 */
+	isEmojiIcon(pIconValue)
+	{
+		if (!pIconValue || typeof pIconValue !== 'string')
+		{
+			return false;
+		}
+
+		for (let i = 0; i < pIconValue.length; i++)
+		{
+			if (pIconValue.charCodeAt(i) > 255)
+			{
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Resolve the icon key to use for a given CardMetadata object.
+	 * Tries Icon field first, then Code field, then falls back to 'default'.
+	 *
+	 * @param {Object} pCardMetadata - The CardMetadata object
+	 * @returns {string} The icon key
+	 */
+	resolveIconKey(pCardMetadata)
+	{
+		if (!pCardMetadata)
+		{
+			return 'default';
+		}
+
+		// If Icon is a known key, use it
+		if (pCardMetadata.Icon && this._Icons.hasOwnProperty(pCardMetadata.Icon))
+		{
+			return pCardMetadata.Icon;
+		}
+
+		// If Icon is a non-emoji string, check if it matches a registered template
+		if (pCardMetadata.Icon && !this.isEmojiIcon(pCardMetadata.Icon))
+		{
+			return pCardMetadata.Icon;
+		}
+
+		// Fall back to Code field
+		if (pCardMetadata.Code && this._Icons.hasOwnProperty(pCardMetadata.Code))
+		{
+			return pCardMetadata.Code;
+		}
+
+		return 'default';
+	}
+
+	/**
+	 * Get the raw SVG markup string for a given icon key, with size applied.
+	 *
+	 * @param {string} pIconKey - The icon key
+	 * @param {number} pSize - Pixel size (default 16)
+	 * @returns {string} The SVG markup string
+	 */
+	getIconSVGMarkup(pIconKey, pSize)
+	{
+		let tmpSize = pSize || 16;
+		let tmpKey = pIconKey || 'default';
+		let tmpMarkup = this._Icons[tmpKey] || this._Icons['default'];
+
+		// Replace the size placeholder
+		return tmpMarkup.replace(/\{FlowIconSize\}/g, String(tmpSize));
+	}
+
+	/**
+	 * Render an icon into an SVG canvas context using createElementNS.
+	 * Creates a <g> element containing the icon paths, positioned at (pX, pY)
+	 * with the given size via a scale transform.
+	 *
+	 * @param {string} pIconKey - The icon key
+	 * @param {SVGElement} pParentGroup - The parent SVG group to append to
+	 * @param {number} pX - X position (top-left of icon bounding box)
+	 * @param {number} pY - Y position (top-left of icon bounding box)
+	 * @param {number} pSize - Pixel size (default 16)
+	 * @returns {SVGGElement|null} The created group element, or null on failure
+	 */
+	renderIconIntoSVGGroup(pIconKey, pParentGroup, pX, pY, pSize)
+	{
+		if (!pParentGroup)
+		{
+			return null;
+		}
+
+		let tmpSize = pSize || 16;
+		let tmpScale = tmpSize / 24;
+		let tmpKey = pIconKey || 'default';
+		let tmpMarkup = this._Icons[tmpKey] || this._Icons['default'];
+
+		// Replace size placeholder (for consistency, though we scale via transform)
+		tmpMarkup = tmpMarkup.replace(/\{FlowIconSize\}/g, '24');
+
+		try
+		{
+			// Create a temporary SVG element to parse the icon markup
+			let tmpTempSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+			tmpTempSVG.innerHTML = tmpMarkup;
+
+			// Find the inner SVG (the icon's root <svg> element)
+			let tmpInnerSVG = tmpTempSVG.querySelector('svg');
+			if (!tmpInnerSVG)
+			{
+				return null;
+			}
+
+			// Create a group to hold the icon content
+			let tmpGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+			tmpGroup.setAttribute('transform', 'translate(' + pX + ',' + pY + ') scale(' + tmpScale + ')');
+			tmpGroup.setAttribute('pointer-events', 'none');
+			tmpGroup.setAttribute('class', 'pict-flow-icon-svg');
+
+			// Move all children from the parsed SVG into the group
+			while (tmpInnerSVG.childNodes.length > 0)
+			{
+				tmpGroup.appendChild(tmpInnerSVG.childNodes[0]);
+			}
+
+			pParentGroup.appendChild(tmpGroup);
+			return tmpGroup;
+		}
+		catch (pError)
+		{
+			this.log.warn('PictProviderFlowIcons renderIconIntoSVGGroup error: ' + pError.message);
+			return null;
+		}
+	}
+
+	/**
+	 * Get all registered icon keys.
+	 * @returns {Array<string>}
+	 */
+	getIconKeys()
+	{
+		return Object.keys(this._Icons);
+	}
+
+	/**
+	 * Check if a given key has a registered icon.
+	 * @param {string} pIconKey
+	 * @returns {boolean}
+	 */
+	hasIcon(pIconKey)
+	{
+		return this._Icons.hasOwnProperty(pIconKey);
+	}
+
+	/**
+	 * Register a new icon or override an existing one.
+	 * @param {string} pIconKey - The icon key
+	 * @param {string} pSVGMarkup - The SVG markup string (must contain {FlowIconSize} placeholders)
+	 * @returns {boolean}
+	 */
+	registerIcon(pIconKey, pSVGMarkup)
+	{
+		if (!pIconKey || !pSVGMarkup)
+		{
+			return false;
+		}
+
+		this._Icons[pIconKey] = pSVGMarkup;
+
+		// Also update the pict template if TemplateProvider is available
+		if (this.fable && this.fable.TemplateProvider)
+		{
+			this.fable.TemplateProvider.addTemplate('Flow-Icon-' + pIconKey, pSVGMarkup);
+		}
+
+		return true;
+	}
+}
+
+module.exports = PictProviderFlowIcons;
+
+module.exports.default_configuration = _ProviderConfiguration;
+module.exports.DefaultIcons = _DefaultIcons;

package/source/providers/PictProvider-Flow-Layouts.js

@@ -13,6 +13,22 @@ const _ProviderConfiguration =
  * still exist are placed at their saved positions and any new nodes are
  * auto-laid-out to the right.
  *
+ * ## Persistence
+ *
+ * By default, layouts are persisted to the browser's `localStorage` using a
+ * key derived from the flow view identifier. This means layouts survive page
+ * refreshes out of the box.
+ *
+ * Developers can override the storage backend (e.g., to use a REST API or
+ * IndexedDB) by replacing the three storage hook methods on the instance or
+ * in a subclass:
+ *
+ *   - `storageWrite(pLayouts, fCallback)` — persist the full layout array
+ *   - `storageRead(fCallback)` — load the persisted layout array
+ *   - `storageDelete(fCallback)` — remove all persisted layouts
+ *
+ * Each callback follows the Node convention: `fCallback(pError, pResult)`.
+ *
  * Saved layout data structure:
  * {
  *     Hash: "layout-<UUID>",
@@ -33,8 +49,174 @@ class PictProviderFlowLayouts extends libPictProvider
 		this.serviceType = 'PictProviderFlowLayouts';
 
 		this._FlowView = (pOptions && pOptions.FlowView) ? pOptions.FlowView : null;
+
+		// Storage key for localStorage persistence.
+		// Defaults to a key derived from the FlowView identifier, or can be
+		// set via options.StorageKey.  Pass `false` to disable localStorage.
+		if (pOptions && pOptions.StorageKey !== undefined)
+		{
+			this._StorageKey = pOptions.StorageKey;
+		}
+		else if (this._FlowView && this._FlowView.options && this._FlowView.options.ViewIdentifier)
+		{
+			this._StorageKey = `pict-flow-layouts-${this._FlowView.options.ViewIdentifier}`;
+		}
+		else
+		{
+			this._StorageKey = 'pict-flow-layouts';
+		}
+	}
+
+	// ── Storage Hooks ─────────────────────────────────────────────────────
+	// These three methods form the persistence contract.  The default
+	// implementation uses localStorage.  Override them on the instance or
+	// subclass to use a REST API, IndexedDB, or any other backend.
+	//
+	// All callbacks follow `fCallback(pError, pResult)`.
+
+	/**
+	 * Persist the full array of layout objects.
+	 *
+	 * Default implementation writes JSON to `localStorage`.
+	 *
+	 * @param {Array} pLayouts - The array of layout objects to persist
+	 * @param {Function} fCallback - `function(pError)` called when done
+	 */
+	storageWrite(pLayouts, fCallback)
+	{
+		if (this._StorageKey === false)
+		{
+			return fCallback(null);
+		}
+		try
+		{
+			if (typeof localStorage !== 'undefined')
+			{
+				localStorage.setItem(this._StorageKey, JSON.stringify(pLayouts));
+			}
+			return fCallback(null);
+		}
+		catch (pError)
+		{
+			this.log.warn(`PictProviderFlowLayouts storageWrite error: ${pError.message}`);
+			return fCallback(pError);
+		}
 	}
 
+	/**
+	 * Load the persisted array of layout objects.
+	 *
+	 * Default implementation reads JSON from `localStorage`.
+	 *
+	 * @param {Function} fCallback - `function(pError, pLayouts)` where
+	 *        pLayouts is an Array (or null/empty if nothing stored)
+	 */
+	storageRead(fCallback)
+	{
+		if (this._StorageKey === false)
+		{
+			return fCallback(null, []);
+		}
+		try
+		{
+			if (typeof localStorage !== 'undefined')
+			{
+				let tmpRaw = localStorage.getItem(this._StorageKey);
+				if (tmpRaw)
+				{
+					let tmpParsed = JSON.parse(tmpRaw);
+					if (Array.isArray(tmpParsed))
+					{
+						return fCallback(null, tmpParsed);
+					}
+				}
+			}
+			return fCallback(null, []);
+		}
+		catch (pError)
+		{
+			this.log.warn(`PictProviderFlowLayouts storageRead error: ${pError.message}`);
+			return fCallback(pError, []);
+		}
+	}
+
+	/**
+	 * Remove all persisted layout data.
+	 *
+	 * Default implementation removes the key from `localStorage`.
+	 *
+	 * @param {Function} fCallback - `function(pError)` called when done
+	 */
+	storageDelete(fCallback)
+	{
+		if (this._StorageKey === false)
+		{
+			return fCallback(null);
+		}
+		try
+		{
+			if (typeof localStorage !== 'undefined')
+			{
+				localStorage.removeItem(this._StorageKey);
+			}
+			return fCallback(null);
+		}
+		catch (pError)
+		{
+			this.log.warn(`PictProviderFlowLayouts storageDelete error: ${pError.message}`);
+			return fCallback(pError);
+		}
+	}
+
+	// ── Initialization ────────────────────────────────────────────────────
+
+	/**
+	 * Load persisted layouts and merge them into _FlowData.SavedLayouts.
+	 * Layouts already present in _FlowData (e.g., from setFlowData) are
+	 * kept; persisted layouts with new hashes are appended.
+	 *
+	 * Call this after _FlowData is populated.
+	 */
+	loadPersistedLayouts()
+	{
+		this.storageRead((pError, pLayouts) =>
+		{
+			if (pError || !Array.isArray(pLayouts) || pLayouts.length === 0)
+			{
+				return;
+			}
+
+			if (!this._FlowView || !this._FlowView._FlowData)
+			{
+				return;
+			}
+
+			let tmpExisting = this._FlowView._FlowData.SavedLayouts;
+			let tmpExistingHashes = {};
+			for (let i = 0; i < tmpExisting.length; i++)
+			{
+				tmpExistingHashes[tmpExisting[i].Hash] = true;
+			}
+
+			let tmpAdded = 0;
+			for (let i = 0; i < pLayouts.length; i++)
+			{
+				if (!tmpExistingHashes[pLayouts[i].Hash])
+				{
+					tmpExisting.push(pLayouts[i]);
+					tmpAdded++;
+				}
+			}
+
+			if (tmpAdded > 0)
+			{
+				this.log.trace(`PictProviderFlowLayouts loaded ${tmpAdded} persisted layout(s)`);
+			}
+		});
+	}
+
+	// ── Public API ────────────────────────────────────────────────────────
+
 	/**
 	 * Save the current node and panel positions as a named layout.
 	 * @param {string} pName - The display name for this layout
@@ -53,7 +235,7 @@ class PictProviderFlowLayouts extends libPictProvider
 		let tmpNodePositions = {};
 		let tmpPanelPositions = {};
 
-		// Capture node positions (arrangement only, no content)
+		// Capture node positions and per-instance overrides (Title, Style)
 		for (let i = 0; i < tmpFlowData.Nodes.length; i++)
 		{
 			let tmpNode = tmpFlowData.Nodes[i];
@@ -62,8 +244,15 @@ class PictProviderFlowLayouts extends libPictProvider
 				X: tmpNode.X,
 				Y: tmpNode.Y,
 				Width: tmpNode.Width,
-				Height: tmpNode.Height
+				Height: tmpNode.Height,
+				Title: tmpNode.Title
 			};
+
+			// Only include Style if it has been customized
+			if (tmpNode.Style && Object.keys(tmpNode.Style).length > 0)
+			{
+				tmpNodePositions[tmpNode.Hash].Style = JSON.parse(JSON.stringify(tmpNode.Style));
+			}
 		}
 
 		// Capture panel positions keyed by NodeHash (panels get new hashes on each open)
@@ -97,6 +286,15 @@ class PictProviderFlowLayouts extends libPictProvider
 		tmpFlowData.SavedLayouts.push(tmpLayout);
 		this._FlowView.marshalFromView();
 
+		// Persist to storage
+		this.storageWrite(tmpFlowData.SavedLayouts, (pError) =>
+		{
+			if (pError)
+			{
+				this.log.warn(`PictProviderFlowLayouts: failed to persist after save: ${pError.message}`);
+			}
+		});
+
 		if (this._FlowView._EventHandlerProvider)
 		{
 			this._FlowView._EventHandlerProvider.fireEvent('onLayoutSaved', tmpLayout);
@@ -150,6 +348,11 @@ class PictProviderFlowLayouts extends libPictProvider
 				tmpNode.Y = tmpSaved.Y;
 				if (typeof tmpSaved.Width === 'number') tmpNode.Width = tmpSaved.Width;
 				if (typeof tmpSaved.Height === 'number') tmpNode.Height = tmpSaved.Height;
+				if (typeof tmpSaved.Title === 'string') tmpNode.Title = tmpSaved.Title;
+				if (tmpSaved.Style && typeof tmpSaved.Style === 'object')
+				{
+					tmpNode.Style = JSON.parse(JSON.stringify(tmpSaved.Style));
+				}
 				tmpMatchedNodes.push(tmpNode);
 			}
 			else
@@ -244,6 +447,15 @@ class PictProviderFlowLayouts extends libPictProvider
 		let tmpRemovedLayout = tmpFlowData.SavedLayouts.splice(tmpIndex, 1)[0];
 		this._FlowView.marshalFromView();
 
+		// Persist to storage (with the layout removed)
+		this.storageWrite(tmpFlowData.SavedLayouts, (pError) =>
+		{
+			if (pError)
+			{
+				this.log.warn(`PictProviderFlowLayouts: failed to persist after delete: ${pError.message}`);
+			}
+		});
+
 		if (this._FlowView._EventHandlerProvider)
 		{
 			this._FlowView._EventHandlerProvider.fireEvent('onLayoutDeleted', tmpRemovedLayout);

package/source/providers/PictProvider-Flow-NodeTypes.js

@@ -30,9 +30,7 @@ const _DefaultNodeTypes =
 		BodyStyle:
 		{
 			'fill': '#eafaf1',
-			'stroke': '#27ae60',
-			'rx': '25',
-			'ry': '25'
+			'stroke': '#27ae60'
 		}
 	},
 	'end':
@@ -45,13 +43,28 @@ const _DefaultNodeTypes =
 		[
 			{ Hash: null, Direction: 'input', Side: 'left', Label: 'In' }
 		],
+		TitleBarColor: '#1abc9c',
+		BodyStyle:
+		{
+			'fill': '#e8f8f5',
+			'stroke': '#1abc9c'
+		}
+	},
+	'halt':
+	{
+		Hash: 'halt',
+		Label: 'Halt',
+		DefaultWidth: 140,
+		DefaultHeight: 80,
+		DefaultPorts:
+		[
+			{ Hash: null, Direction: 'input', Side: 'left', Label: 'In' }
+		],
 		TitleBarColor: '#e74c3c',
 		BodyStyle:
 		{
 			'fill': '#fdedec',
-			'stroke': '#e74c3c',
-			'rx': '25',
-			'ry': '25'
+			'stroke': '#e74c3c'
 		}
 	},
 	'decision':
@@ -100,11 +113,21 @@ class PictProviderFlowNodeTypes extends libPictProvider
 			let tmpAdditionalKeys = Object.keys(pOptions.AdditionalNodeTypes);
 			for (let i = 0; i < tmpAdditionalKeys.length; i++)
 			{
+				let tmpOriginal = pOptions.AdditionalNodeTypes[tmpAdditionalKeys[i]];
 				this._NodeTypes[tmpAdditionalKeys[i]] = Object.assign(
 					{},
 					this._NodeTypes[tmpAdditionalKeys[i]] || {},
-					JSON.parse(JSON.stringify(pOptions.AdditionalNodeTypes[tmpAdditionalKeys[i]]))
+					JSON.parse(JSON.stringify(tmpOriginal))
 				);
+				// Preserve BodyContent.RenderCallback (functions are stripped by JSON serialization)
+				if (tmpOriginal.BodyContent && typeof tmpOriginal.BodyContent.RenderCallback === 'function')
+				{
+					if (!this._NodeTypes[tmpAdditionalKeys[i]].BodyContent)
+					{
+						this._NodeTypes[tmpAdditionalKeys[i]].BodyContent = {};
+					}
+					this._NodeTypes[tmpAdditionalKeys[i]].BodyContent.RenderCallback = tmpOriginal.BodyContent.RenderCallback;
+				}
 			}
 		}
 	}