pict-section-flow 0.0.19 → 1.0.1

package/docs/Theme_Integration.md

@@ -14,8 +14,8 @@ When a host application registers `pict-provider-theme`:
 ```javascript
 const libPictProviderTheme = require('pict-provider-theme');
 pict.addProvider('Theme', libPictProviderTheme.default_configuration, libPictProviderTheme);
-pict.providers.Theme.registerTheme(require('pict-provider-theme/source/themes/retold-default.json'));
-pict.providers.Theme.applyTheme('retold-default', 'system');
+pict.providers.Theme.registerTheme(require('pict-provider-theme/source/themes/pict-default.json'));
+pict.providers.Theme.applyTheme('pict-default', 'system');
 ```
 
 …the flow editor automatically detects it during `onBeforeInitialize` (duck-typed via `applyTheme`/`onApply`/`listThemes`) and subscribes to its `onApply` hook. On every host theme change the editor:

package/docs/_brand.json

@@ -0,0 +1,18 @@
+{
+	"Hash": "pict-section-flow",
+	"Name": "Pict Section Flow",
+	"Tagline": "Flow diagram section for visual workflow and process representations",
+	"Palette": "mix",
+	"Icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"frame-pict-section-flow-filled-light\">\n\t\t\t\t<path d=\"M 2 48\n\t\t\tC 2 18.0222416, 18.0222416 2, 48 2\n\t\t\tC 77.9777584 2, 94 18.0222416, 94 48\n\t\t\tC 94 77.9777584, 77.9777584 94, 48 94\n\t\t\tC 18.0222416 94, 2 77.9777584, 2 48 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 2 48\n\t\t\tC 2 18.0222416, 18.0222416 2, 48 2\n\t\t\tC 77.9777584 2, 94 18.0222416, 94 48\n\t\t\tC 94 77.9777584, 77.9777584 94, 48 94\n\t\t\tC 18.0222416 94, 2 77.9777584, 2 48 Z\" fill=\"#36d1d8\"/>\n\t\t<g clip-path=\"url(#frame-pict-section-flow-filled-light)\"><path d=\"M 16 26 L 48 66 L 80 26 Z\" fill=\"rgba(255,255,255,0.18)\"/>\n\t\t\t\t\t<path d=\"M 24 16 L 48 44 L 72 16 Z\" fill=\"#dc9958\" opacity=\"0.9\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"28\" font-weight=\"600\"\n\t\t\tfill=\"#ffffff\" letter-spacing=\"-1\">PSF</text>\n\t</svg>",
+	"IconType": "svg",
+	"Favicon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"fav-pict-section-flow-light\">\n\t\t\t\t<path d=\"M 2 48\n\t\t\tC 2 18.0222416, 18.0222416 2, 48 2\n\t\t\tC 77.9777584 2, 94 18.0222416, 94 48\n\t\t\tC 94 77.9777584, 77.9777584 94, 48 94\n\t\t\tC 18.0222416 94, 2 77.9777584, 2 48 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 2 48\n\t\t\tC 2 18.0222416, 18.0222416 2, 48 2\n\t\t\tC 77.9777584 2, 94 18.0222416, 94 48\n\t\t\tC 94 77.9777584, 77.9777584 94, 48 94\n\t\t\tC 18.0222416 94, 2 77.9777584, 2 48 Z\" fill=\"#36d1d8\"/>\n\t\t<g clip-path=\"url(#fav-pict-section-flow-light)\"><path d=\"M 16 26 L 48 66 L 80 26 Z\" fill=\"rgba(255,255,255,0.22)\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"60\" font-weight=\"800\"\n\t\t\tfill=\"#ffffff\" letter-spacing=\"-1\">P</text>\n\t</svg>",
+	"FaviconDark": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"fav-pict-section-flow-dark\">\n\t\t\t\t<path d=\"M 2 48\n\t\t\tC 2 18.0222416, 18.0222416 2, 48 2\n\t\t\tC 77.9777584 2, 94 18.0222416, 94 48\n\t\t\tC 94 77.9777584, 77.9777584 94, 48 94\n\t\t\tC 18.0222416 94, 2 77.9777584, 2 48 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 2 48\n\t\t\tC 2 18.0222416, 18.0222416 2, 48 2\n\t\t\tC 77.9777584 2, 94 18.0222416, 94 48\n\t\t\tC 94 77.9777584, 77.9777584 94, 48 94\n\t\t\tC 18.0222416 94, 2 77.9777584, 2 48 Z\" fill=\"#87dfe2\"/>\n\t\t<g clip-path=\"url(#fav-pict-section-flow-dark)\"><path d=\"M 16 26 L 48 66 L 80 26 Z\" fill=\"rgba(255,255,255,0.22)\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"60\" font-weight=\"800\"\n\t\t\tfill=\"#101418\" letter-spacing=\"-1\">P</text>\n\t</svg>",
+	"Colors": {
+		"Primary": "#36d1d8",
+		"Secondary": "#dc9958",
+		"PrimaryLight": "#36d1d8",
+		"PrimaryDark": "#87dfe2",
+		"SecondaryLight": "#dc9958",
+		"SecondaryDark": "#e9c7a7"
+	}
+}

package/docs/index.html

@@ -8,8 +8,6 @@
 
 		<title>Pict-Section-Flow v0.0.17 Documentation</title>
 
-		<!-- Application Stylesheet -->
-		<link href="css/docuserve.css" rel="stylesheet">
 		<!-- KaTeX stylesheet for LaTeX equation rendering -->
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css">
 		<!-- PICT Dynamic View CSS Container -->

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-flow",
-    "version": "0.0.19",
+    "version": "1.0.1",
     "description": "Pict Section Flow Diagram",
     "main": "source/Pict-Section-Flow.js",
     "scripts": {
@@ -21,8 +21,8 @@
     "devDependencies": {
         "chai": "^6.2.2",
         "mocha": "^11.7.5",
-        "pict": "^1.0.367",
-        "pict-docuserve": "^0.1.6",
+        "pict": "^1.0.369",
+        "pict-docuserve": "^1.3.2",
         "pict-router": "^1.0.10",
         "quackage": "^1.2.3"
     }

package/source/PictFlowCard.js

@@ -79,7 +79,7 @@ class PictFlowCard extends libFableServiceProviderBase
 		this.cardEnabled = (typeof tmpOptions.Enabled === 'boolean') ? tmpOptions.Enabled : true;
 
 		// --- Card appearance ---
-		this.cardTitleBarColor = (tmpOptions.TitleBarColor) ? tmpOptions.TitleBarColor : '#2c3e50';
+		this.cardTitleBarColor = (tmpOptions.TitleBarColor) ? tmpOptions.TitleBarColor : 'var(--theme-color-text-primary, #2c3e50)';
 		this.cardBodyStyle = (tmpOptions.BodyStyle) ? tmpOptions.BodyStyle : {};
 		this.cardWidth = (typeof tmpOptions.Width === 'number') ? tmpOptions.Width : 180;
 		this.cardHeight = (typeof tmpOptions.Height === 'number') ? tmpOptions.Height : 80;
@@ -261,7 +261,7 @@ module.exports.default_configuration =
 	Inputs: [],
 	Outputs: [],
 	Enabled: true,
-	TitleBarColor: '#2c3e50',
+	TitleBarColor: 'var(--theme-color-text-primary, #2c3e50)',
 	BodyStyle: {},
 	Width: 180,
 	Height: 80,

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

@@ -70,13 +70,13 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			--pf-node-selected-stroke: var(--theme-color-brand-primary, #3498db);
 
 			/* Node Variants */
-			--pf-node-start-fill: #eafaf1;
+			--pf-node-start-fill: var(--theme-color-background-hover, #eafaf1);
 			--pf-node-start-stroke: var(--theme-color-status-success, #27ae60);
-			--pf-node-end-fill: #e8f8f5;
-			--pf-node-end-stroke: #1abc9c;
-			--pf-node-halt-fill: #fdedec;
+			--pf-node-end-fill: var(--theme-color-background-hover, #e8f8f5);
+			--pf-node-end-stroke: var(--theme-color-brand-primary, #1abc9c);
+			--pf-node-halt-fill: var(--theme-color-background-hover, #fdedec);
 			--pf-node-halt-stroke: var(--theme-color-status-error, #e74c3c);
-			--pf-node-decision-fill: #fff9e6;
+			--pf-node-decision-fill: var(--theme-color-background-hover, #fff9e6);
 			--pf-node-decision-stroke: var(--theme-color-status-warning, #f39c12);
 
 			/* ── Color roles ───────────────────────────────────────
@@ -118,15 +118,15 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			/* Port Type Colors */
 			--pf-port-event-in-fill: var(--theme-color-status-info, #3498db);
 			--pf-port-event-out-fill: var(--theme-color-status-success, #2ecc71);
-			--pf-port-setting-fill: #e67e22;
-			--pf-port-value-fill: #f1c40f;
+			--pf-port-setting-fill: var(--theme-color-status-warning, #e67e22);
+			--pf-port-value-fill: var(--theme-color-status-warning, #f1c40f);
 			--pf-port-error-fill: var(--theme-color-status-error, #e74c3c);
 
 			/* Connection Type Colors (match source port) */
 			--pf-connection-event-in-stroke: var(--theme-color-status-info, #3498db);
 			--pf-connection-event-out-stroke: var(--theme-color-status-success, #2ecc71);
-			--pf-connection-setting-stroke: #e67e22;
-			--pf-connection-value-stroke: #f1c40f;
+			--pf-connection-setting-stroke: var(--theme-color-status-warning, #e67e22);
+			--pf-connection-value-stroke: var(--theme-color-status-warning, #f1c40f);
 			--pf-connection-error-stroke: var(--theme-color-status-error, #e74c3c);
 
 			/* Connections */
@@ -161,14 +161,14 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			--pf-button-hover-bg: var(--theme-color-background-hover, #ecf0f1);
 			--pf-button-active-bg: var(--theme-color-background-selected, #d5dbdb);
 			--pf-button-danger-text: var(--theme-color-status-error, #e74c3c);
-			--pf-button-danger-hover-bg: #fdedec;
+			--pf-button-danger-hover-bg: var(--theme-color-background-hover, #fdedec);
 			--pf-button-close-color: var(--theme-color-text-muted, #b0b8c0);
 
 			/* Badges */
 			--pf-badge-category-bg: var(--theme-color-background-tertiary, #f0f2f4);
 			--pf-badge-category-text: var(--theme-color-text-secondary, #6b7b8d);
-			--pf-badge-code-bg: #eaf2f8;
-			--pf-badge-code-text: #2980b9;
+			--pf-badge-code-bg: var(--theme-color-background-hover, #eaf2f8);
+			--pf-badge-code-text: var(--theme-color-status-info, #2980b9);
 
 			/* Info Panel */
 			--pf-port-item-bg: var(--theme-color-background-secondary, #f8f9fa);
@@ -1978,6 +1978,32 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			this.log.warn('PictProviderFlowCSS: CSSMap not available; CSS not registered.');
 		}
 	}
+
+	/**
+	 * Register the active renderer's CSS overrides (GeometryCSS + AdditionalCSS).
+	 *
+	 * The renderer's CSS is registered at priority 501 — one higher than the
+	 * base container CSS — so its `.pict-flow-container { --pf-*: ... }`
+	 * declarations win the cascade against the equally-specific defaults in
+	 * `generateCSS()`. Called by PictView-Flow.setRenderer() after the
+	 * Flow-Renderer provider switches its active renderer.
+	 *
+	 * @param {Object} pRenderer - the active renderer definition (from PictProviderFlowRenderer)
+	 */
+	registerRendererCSS(pRenderer)
+	{
+		if (!this.fable || !this.fable.CSSMap) { return; }
+		this.fable.CSSMap.removeCSS('PictSectionFlow-Renderer-CSS');
+		if (!pRenderer) { this.fable.CSSMap.injectCSS(); return; }
+
+		let tmpCSS = '';
+		if (pRenderer.GeometryCSS)   { tmpCSS += pRenderer.GeometryCSS;   }
+		if (pRenderer.AdditionalCSS) { tmpCSS += '\n' + pRenderer.AdditionalCSS; }
+		if (tmpCSS.trim().length === 0) { this.fable.CSSMap.injectCSS(); return; }
+
+		this.fable.CSSMap.addCSS('PictSectionFlow-Renderer-CSS', tmpCSS, 501, 'PictProviderFlowCSS');
+		this.fable.CSSMap.injectCSS();
+	}
 }
 
 module.exports = PictProviderFlowCSS;

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

@@ -87,7 +87,7 @@ class PictProviderFlowConnectorShapes extends libFableServiceProviderBase
 				RefX: '7.5',
 				RefY: '3.5',
 				Points: '0 0, 5 3.5, 0 7',
-				Fill: '#95a5a6'
+				Fill: 'var(--theme-color-border-default, #95a5a6)'
 			},
 			'arrowhead-connection-selected':
 			{
@@ -96,7 +96,7 @@ class PictProviderFlowConnectorShapes extends libFableServiceProviderBase
 				RefX: '7.5',
 				RefY: '3.5',
 				Points: '0 0, 5 3.5, 0 7',
-				Fill: '#3498db'
+				Fill: 'var(--theme-color-status-info, #3498db)'
 			},
 			'arrowhead-tether':
 			{
@@ -105,7 +105,7 @@ class PictProviderFlowConnectorShapes extends libFableServiceProviderBase
 				RefX: '6',
 				RefY: '3',
 				Points: '0 0, 4 3, 0 6',
-				Fill: '#95a5a6'
+				Fill: 'var(--theme-color-border-default, #95a5a6)'
 			}
 		};
 
@@ -426,11 +426,11 @@ class PictProviderFlowConnectorShapes extends libFableServiceProviderBase
 		// Per-port-type connection arrowheads
 		let tmpPortTypeColors =
 		{
-			'event-in': '#3498db',
-			'event-out': '#2ecc71',
-			'setting': '#e67e22',
-			'value': '#f1c40f',
-			'error': '#e74c3c'
+			'event-in': 'var(--theme-color-status-info, #3498db)',
+			'event-out': 'var(--theme-color-status-success, #2ecc71)',
+			'setting': 'var(--theme-color-status-warning, #e67e22)',
+			'value': 'var(--theme-color-status-warning, #f1c40f)',
+			'error': 'var(--theme-color-status-error, #e74c3c)'
 		};
 
 		for (let tmpType in tmpPortTypeColors)

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

@@ -4,8 +4,8 @@ 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).
+ * All icons use a duotone style: 2px outline (var(--theme-color-text-primary, #2c3e50)) with
+ * subtle filled accent shapes (var(--theme-color-background-secondary, #d5e8f7)).
  *
  * Each icon is registered as a pict template with hash `Flow-Icon-{key}`,
  * making them individually overridable by consumers.
@@ -18,7 +18,7 @@ const _ProviderConfiguration =
 
 // ── Default Icon SVG Markup ────────────────────────────────────────────────
 // All icons: viewBox="0 0 24 24", duotone style
-// Accent fill: #d5e8f7, Stroke: #2c3e50, Stroke-width: 2
+// Accent fill: var(--theme-color-background-secondary, #d5e8f7), Stroke: var(--theme-color-text-primary, #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.
@@ -27,71 +27,71 @@ 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>',
+	'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="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><circle cx="6" cy="18" r="2.5" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><circle cx="18" cy="18" r="2.5" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M12 9v2M9.5 12.5L6 15.5M14.5 12.5L18 15.5" stroke="var(--theme-color-text-primary, #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>',
+	'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="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M3 12h5M16 12h5M14.8 9.2l3.7-5.2M14.8 14.8l3.7 5.2" stroke="var(--theme-color-text-primary, #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>',
+	'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="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><rect x="14" y="3" width="7" height="7" rx="1.5" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><rect x="3" y="14" width="7" height="7" rx="1.5" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><rect x="14" y="14" width="7" height="7" rx="1.5" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #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>',
+	'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="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M13 2v7h7" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M9 13h6M9 17h4" stroke="var(--theme-color-text-primary, #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>',
+	'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="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M13 2v7h7" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M12 13v5M9.5 15.5L12 13l2.5 2.5" stroke="var(--theme-color-text-primary, #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>',
+	'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="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><circle cx="7.5" cy="8" r="1" fill="var(--theme-color-text-primary, #2c3e50)"/><circle cx="7.5" cy="12" r="1" fill="var(--theme-color-text-primary, #2c3e50)"/><circle cx="7.5" cy="16" r="1" fill="var(--theme-color-text-primary, #2c3e50)"/><path d="M11 8h5.5M11 12h5.5M11 16h3.5" stroke="var(--theme-color-text-primary, #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>',
+	'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="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M21 21l-5.15-5.15" stroke="var(--theme-color-text-primary, #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>',
+	'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="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M14 6l3 3" stroke="var(--theme-color-text-primary, #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>',
+	'fullscreen': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke="var(--theme-color-text-primary, #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>',
+	'exit-fullscreen': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke="var(--theme-color-text-primary, #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>',
+	'close': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke="var(--theme-color-text-primary, #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>',
+	'chevron-down': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke="var(--theme-color-text-primary, #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>',
+	'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="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M21 21l-4.35-4.35" stroke="var(--theme-color-text-primary, #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>',
+	'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="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #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="var(--theme-color-text-primary, #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>',
+	'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="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><rect x="13" y="3" width="8" height="6" rx="1.5" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><rect x="3" y="15" width="8" height="6" rx="1.5" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><rect x="13" y="11" width="8" height="10" rx="1.5" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #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>',
+	'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="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M8 12h8" stroke="var(--theme-color-text-primary, #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>',
+	'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="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M12 8v8M8 12h8" stroke="var(--theme-color-text-primary, #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>',
+	'grip': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="var(--theme-color-text-primary, #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>',
+	'settings': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3" fill="var(--theme-color-background-secondary, #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>',
+	'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="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M12 8v8M8 12h8" stroke="var(--theme-color-text-primary, #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>',
+	'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="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><rect x="5" y="6" width="14" height="14" rx="2" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M10 11v6M14 11v6" stroke="var(--theme-color-text-primary, #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>',
+	'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="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M17 21v-8H7v8" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M7 3v5h8" stroke="var(--theme-color-text-primary, #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>',
+	'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="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><rect x="2" y="16" width="8" height="6" rx="1.5" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><rect x="14" y="16" width="8" height="6" rx="1.5" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M12 8v4M6 16v-4h12v4" stroke="var(--theme-color-text-primary, #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-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="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M21 21l-4.35-4.35" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M11 8v6M8 11h6" stroke="var(--theme-color-text-primary, #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-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="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M21 21l-4.35-4.35" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M8 11h6" stroke="var(--theme-color-text-primary, #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>',
+	'zoom-fit': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke="var(--theme-color-text-primary, #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="var(--theme-color-background-secondary, #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>',
+	'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="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M12 20V11M8 14l4-4 4 4" stroke="var(--theme-color-text-primary, #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>',
+	'restore': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke="var(--theme-color-text-primary, #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>',
+	'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="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><rect x="5" y="6" width="14" height="14" rx="2" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><path d="M10 11v6M14 11v6" stroke="var(--theme-color-text-primary, #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>'
+	'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="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><circle cx="12" cy="12" r="2.5" fill="var(--theme-color-text-primary, #2c3e50)"/></svg>'
 };
 
 class PictProviderFlowIcons extends libFableServiceProviderBase

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

@@ -19,7 +19,7 @@ const _DefaultNodeTypes =
 			{ Hash: null, Direction: 'output', Side: 'right', Label: 'Out' }
 		],
 		ColorRole: 'neutral',
-		TitleBarColor: '#2c3e50',
+		TitleBarColor: 'var(--theme-color-text-primary, #2c3e50)',
 		BodyStyle: {}
 	},
 	'start':
@@ -33,11 +33,11 @@ const _DefaultNodeTypes =
 			{ Hash: null, Direction: 'output', Side: 'right', Label: 'Out' }
 		],
 		ColorRole: 'success',
-		TitleBarColor: '#27ae60',
+		TitleBarColor: 'var(--theme-color-status-success, #27ae60)',
 		BodyStyle:
 		{
-			'fill': '#eafaf1',
-			'stroke': '#27ae60'
+			'fill': 'var(--theme-color-background-hover, #eafaf1)',
+			'stroke': 'var(--theme-color-status-success, #27ae60)'
 		}
 	},
 	'end':
@@ -51,11 +51,11 @@ const _DefaultNodeTypes =
 			{ Hash: null, Direction: 'input', Side: 'left', Label: 'In' }
 		],
 		ColorRole: 'accent',
-		TitleBarColor: '#1abc9c',
+		TitleBarColor: 'var(--theme-color-brand-primary, #1abc9c)',
 		BodyStyle:
 		{
 			'fill': '#e8f8f5',
-			'stroke': '#1abc9c'
+			'stroke': 'var(--theme-color-brand-primary, #1abc9c)'
 		}
 	},
 	'halt':
@@ -69,11 +69,11 @@ const _DefaultNodeTypes =
 			{ Hash: null, Direction: 'input', Side: 'left', Label: 'In' }
 		],
 		ColorRole: 'error',
-		TitleBarColor: '#e74c3c',
+		TitleBarColor: 'var(--theme-color-status-error, #e74c3c)',
 		BodyStyle:
 		{
-			'fill': '#fdedec',
-			'stroke': '#e74c3c'
+			'fill': 'var(--theme-color-background-hover, #fdedec)',
+			'stroke': 'var(--theme-color-status-error, #e74c3c)'
 		}
 	},
 	'decision':