pict-section-flow 1.0.0 → 1.1.0

package/source/views/PictView-Flow.js

@@ -23,6 +23,8 @@ const libPictProviderFlowCSS = require('../providers/PictProvider-Flow-CSS.js');
 const libPictProviderFlowIcons = require('../providers/PictProvider-Flow-Icons.js');
 const libPictProviderFlowConnectorShapes = require('../providers/PictProvider-Flow-ConnectorShapes.js');
 const libPictProviderFlowTheme = require('../providers/PictProvider-Flow-Theme.js');
+const libPictProviderFlowRenderer = require('../providers/PictProvider-Flow-Renderer.js');
+const libPictProviderFlowStylePresets = require('../providers/PictProvider-Flow-StylePresets.js');
 const libPictProviderFlowNoise = require('../providers/PictProvider-Flow-Noise.js');
 
 const libPictViewFlowNode = require('./PictView-Flow-Node.js');
@@ -69,6 +71,11 @@ const _DefaultConfiguration =
 	DefaultNodeWidth: 180,
 	DefaultNodeHeight: 80,
 
+	// Properties panel for connections (edges). Connections are not typed, so one config serves
+	// them all: { PanelType, DefaultWidth, DefaultHeight, Title, Configuration }. When set, a
+	// double-click on a connection opens this panel; when false, double-click adds a bezier handle.
+	ConnectionPropertiesPanel: false,
+
 	// Layout-algorithm subsystem defaults
 	DefaultLayoutAlgorithm: 'Custom',
 	DefaultLayoutParameters: {},
@@ -165,6 +172,11 @@ class PictViewFlow extends libPictView
 			{ ServiceType: 'PictProviderFlowNoise',         Library: libPictProviderFlowNoise,         Property: '_NoiseProvider',        NoFlowView: true },
 
 			// Providers (need FlowView)
+			//   Renderer + StylePresets must be created before the legacy Theme
+			//   shim (which delegates to them) and before CSS PostInit so that
+			//   registerCSS() sees an initialized renderer.
+			{ ServiceType: 'PictProviderFlowRenderer',      Library: libPictProviderFlowRenderer,      Property: '_RendererProvider' },
+			{ ServiceType: 'PictProviderFlowStylePresets',  Library: libPictProviderFlowStylePresets,  Property: '_StylePresetsProvider' },
 			{ ServiceType: 'PictProviderFlowTheme',         Library: libPictProviderFlowTheme,         Property: '_ThemeProvider' },
 			{ ServiceType: 'PictProviderFlowCSS',           Library: libPictProviderFlowCSS,           Property: '_CSSProvider',          PostInit: 'registerCSS' },
 			{ ServiceType: 'PictProviderFlowIcons',         Library: libPictProviderFlowIcons,         Property: '_IconProvider',         PostInit: 'registerIconTemplates' },
@@ -255,6 +267,8 @@ class PictViewFlow extends libPictView
 		this._IconProvider = null;
 		this._ConnectorShapesProvider = null;
 		this._ThemeProvider = null;
+		this._RendererProvider = null;
+		this._StylePresetsProvider = null;
 		this._NoiseProvider = null;
 		this._SVGHelperProvider = null;
 		this._GeometryProvider = null;
@@ -343,23 +357,40 @@ class PictViewFlow extends libPictView
 	{
 		super.onBeforeInitialize();
 
-		// Theme + Noise must be created first (CSS PostInit depends on theme state)
-		this._ThemeProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowTheme', { FlowView: this });
-		this._NoiseProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowNoise');
-
-		// Apply initial theme from options
-		if (this.options.Theme)
+		// Noise + Renderer + StylePresets + Theme shim must be created before
+		// CSS PostInit so registerCSS() sees an initialized renderer + presets.
+		this._NoiseProvider          = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowNoise');
+		this._RendererProvider       = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowRenderer', { FlowView: this });
+		this._StylePresetsProvider   = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowStylePresets', { FlowView: this });
+		this._ThemeProvider          = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowTheme',     { FlowView: this });
+
+		// Apply initial style preset / per-axis overrides from options.
+		// `Theme` and `StylePreset` are aliases for the same preset-by-hash apply.
+		let tmpInitialPreset = this.options.StylePreset || this.options.Theme;
+		if (tmpInitialPreset)
+		{
+			this._StylePresetsProvider.applyPreset(tmpInitialPreset);
+		}
+		if (this.options.Renderer)
 		{
-			this._ThemeProvider.setTheme(this.options.Theme);
+			this._RendererProvider.setRenderer(this.options.Renderer);
+			this._StylePresetsProvider.markCustomized();
 		}
 		if (typeof this.options.NoiseLevel === 'number')
 		{
-			this._ThemeProvider.setNoiseLevel(this.options.NoiseLevel);
+			this._RendererProvider.setNoiseLevel(this.options.NoiseLevel);
 		}
 
-		// Instantiate all remaining services (skips Theme + Noise since already set)
+		// Instantiate all remaining services (skips Noise/Renderer/StylePresets/Theme
+		// since already set above)
 		this._instantiateServices();
 
+		// Now that CSSProvider exists, inject the active renderer's GeometryCSS.
+		if (this._CSSProvider && typeof this._CSSProvider.registerRendererCSS === 'function')
+		{
+			this._CSSProvider.registerRendererCSS(this._RendererProvider.getActiveRenderer());
+		}
+
 		// Subscribe to the host application's pict-provider-theme so the flow
 		// editor's marker arrowhead colors and shape overrides update when the
 		// host swaps light/dark or palette themes. CSS variables (--theme-*)
@@ -902,89 +933,188 @@ class PictViewFlow extends libPictView
 		return this._ViewportManager.exitFullscreen();
 	}
 
-	// ── Theme API ────────────────────────────────────────────────────────
+	// ── Theme / Renderer / Style-Preset API ─────────────────────────────
+	//
+	// Three axes you can drive independently:
+	//   - ColorTheme — delegates to pict-provider-theme (a pict-section-theme
+	//                  catalog hash like 'flow-sketch' or 'pict-default')
+	//   - Renderer   — delegates to PictProviderFlowRenderer (controls
+	//                  bracket/rect node body, jitter, shadows, fonts)
+	//   - EdgeTheme  — delegates to PictService-Flow-Layout (Bezier /
+	//                  Straight / Orthogonal / Perimeter / …; see
+	//                  PictView-Flow.setEdgeTheme below)
+	//
+	// Most users pick a curated combo via `setStylePreset()` — the preset
+	// applies all three axes in order. Per-axis overrides mark the active
+	// preset as 'customized' (getStylePreset returns null afterward).
+	//
+	// For backwards-compatibility, `setTheme()` / `getThemeKey()` continue
+	// to work as aliases for `setStylePreset()` / `getStylePreset()`.
 
 	/**
-	 * Switch the active theme and re-render.
-	 * @param {string} pThemeKey - Theme key (e.g. 'default', 'sketch', 'blueprint', 'mono', 'retro-80s', 'retro-90s')
+	 * Apply a named style preset — sets ColorTheme, Renderer, EdgeTheme
+	 * (and optional NoiseLevel) in one call.
+	 * @param {string} pPresetHash
 	 */
-	setTheme(pThemeKey)
+	setStylePreset(pPresetHash)
 	{
-		if (!this._ThemeProvider)
+		if (!this._StylePresetsProvider)
 		{
-			this.log.warn('PictSectionFlow setTheme: ThemeProvider not available');
+			this.log.warn('PictSectionFlow setStylePreset: StylePresets provider not available');
 			return;
 		}
+		let tmpApplied = this._StylePresetsProvider.applyPreset(pPresetHash);
+		if (!tmpApplied) { return; }
+		this._refreshAfterStyleChange();
+		if (this._EventHandlerProvider)
+		{
+			this._EventHandlerProvider.fireEvent('onStylePresetChanged', pPresetHash);
+			// Back-compat — old code listens for 'onThemeChanged'
+			this._EventHandlerProvider.fireEvent('onThemeChanged', pPresetHash);
+		}
+	}
 
-		let tmpApplied = this._ThemeProvider.setTheme(pThemeKey);
-		if (!tmpApplied) return;
+	/**
+	 * Hash of the active style preset, or null when in customized state.
+	 * @returns {string|null}
+	 */
+	getStylePreset()
+	{
+		return this._StylePresetsProvider ? this._StylePresetsProvider.getActivePresetHash() : null;
+	}
 
-		// Re-register CSS with the new theme overrides
-		if (this._CSSProvider)
+	/**
+	 * Override just the color theme — delegates to pict-provider-theme.
+	 * @param {string} pThemeHash - a pict-section-theme catalog hash
+	 */
+	setColorTheme(pThemeHash)
+	{
+		if (this.fable.providers && this.fable.providers.Theme)
 		{
-			this._CSSProvider.registerCSS();
+			try { this.fable.providers.Theme.applyTheme(pThemeHash); }
+			catch (pErr) { this.log.warn(`PictSectionFlow setColorTheme: applyTheme failed — ${pErr.message}`); return; }
 		}
+		else
+		{
+			this.log.warn('PictSectionFlow setColorTheme: pict-provider-theme not available in host');
+			return;
+		}
+		if (this._StylePresetsProvider) { this._StylePresetsProvider.markCustomized(); }
+		this._refreshAfterStyleChange();
+		if (this._EventHandlerProvider)
+		{
+			this._EventHandlerProvider.fireEvent('onColorThemeChanged', pThemeHash);
+		}
+	}
 
-		// Re-inject marker defs (arrowhead colors may have changed)
-		this._reinjectMarkerDefs();
-
-		// Full re-render
-		if (this.initialRenderComplete)
+	/**
+	 * The active color theme hash (from pict-provider-theme).
+	 * @returns {string|null}
+	 */
+	getColorThemeKey()
+	{
+		if (this.fable.providers && this.fable.providers.Theme && typeof this.fable.providers.Theme.getActiveTheme === 'function')
 		{
-			this.renderFlow();
+			let tmpActive = this.fable.providers.Theme.getActiveTheme();
+			if (tmpActive && tmpActive.Hash) { return tmpActive.Hash; }
 		}
+		return null;
+	}
 
+	/**
+	 * Override just the renderer — controls node body shape, jitter, shadows.
+	 * @param {string} pRendererKey
+	 */
+	setRenderer(pRendererKey)
+	{
+		if (!this._RendererProvider)
+		{
+			this.log.warn('PictSectionFlow setRenderer: Renderer provider not available');
+			return;
+		}
+		let tmpApplied = this._RendererProvider.setRenderer(pRendererKey);
+		if (!tmpApplied) { return; }
+		if (this._StylePresetsProvider) { this._StylePresetsProvider.markCustomized(); }
+		this._refreshAfterStyleChange();
 		if (this._EventHandlerProvider)
 		{
-			this._EventHandlerProvider.fireEvent('onThemeChanged', pThemeKey);
+			this._EventHandlerProvider.fireEvent('onRendererChanged', pRendererKey);
 		}
 	}
 
 	/**
-	 * Set the noise level (0 to 1) and re-render.
+	 * The active renderer key.
+	 * @returns {string}
+	 */
+	getRendererKey()
+	{
+		return this._RendererProvider ? this._RendererProvider.getActiveRendererKey() : 'clean';
+	}
+
+	/**
+	 * Set the noise level (0 to 1) and re-render. Noise applies only when
+	 * the active renderer enables it (see Renderer.NoiseConfig).
 	 * @param {number} pLevel - 0 = precise, 1 = maximum wobble
 	 */
 	setNoiseLevel(pLevel)
 	{
-		if (!this._ThemeProvider)
+		if (this._RendererProvider)
 		{
-			this.log.warn('PictSectionFlow setNoiseLevel: ThemeProvider not available');
-			return;
+			this._RendererProvider.setNoiseLevel(pLevel);
 		}
-
-		this._ThemeProvider.setNoiseLevel(pLevel);
-
-		// Full re-render to apply new noise
-		if (this.initialRenderComplete)
+		else if (this._ThemeProvider)
 		{
-			this.renderFlow();
+			this._ThemeProvider.setNoiseLevel(pLevel);
 		}
+		if (this.initialRenderComplete) { this.renderFlow(); }
 	}
 
 	/**
-	 * Get the current noise level (0 to 1).
+	 * Current noise level (0 to 1).
 	 * @returns {number}
 	 */
 	getNoiseLevel()
 	{
-		if (this._ThemeProvider)
-		{
-			return this._ThemeProvider.getNoiseLevel();
-		}
+		if (this._RendererProvider) { return this._RendererProvider.getNoiseLevel(); }
+		if (this._ThemeProvider)    { return this._ThemeProvider.getNoiseLevel(); }
 		return 0;
 	}
 
 	/**
-	 * Get the active theme key.
-	 * @returns {string}
+	 * @deprecated since the 3-axis refactor — use setStylePreset() instead.
+	 * Kept as an alias for back-compat with existing host apps and views.
+	 * @param {string} pPresetHash
+	 */
+	setTheme(pPresetHash)
+	{
+		this.setStylePreset(pPresetHash);
+	}
+
+	/**
+	 * @deprecated since the 3-axis refactor — use getStylePreset() instead.
+	 * Returns the active preset hash (or null if customized).
+	 * @returns {string|null}
 	 */
 	getThemeKey()
 	{
-		if (this._ThemeProvider)
+		return this.getStylePreset();
+	}
+
+	/**
+	 * Common refresh path used by all axis-change methods.
+	 * Re-registers the renderer CSS, re-injects marker defs (arrowhead colors
+	 * may have shifted with the new theme), and full-renders the flow.
+	 * @private
+	 */
+	_refreshAfterStyleChange()
+	{
+		if (this._CSSProvider && typeof this._CSSProvider.registerRendererCSS === 'function' && this._RendererProvider)
 		{
-			return this._ThemeProvider.getActiveThemeKey();
+			this._CSSProvider.registerRendererCSS(this._RendererProvider.getActiveRenderer());
 		}
-		return 'default';
+		if (this._CSSProvider) { this._CSSProvider.registerCSS(); }
+		this._reinjectMarkerDefs();
+		if (this.initialRenderComplete) { this.renderFlow(); }
 	}
 
 	_reinjectMarkerDefs() { return this._RenderManager.reinjectMarkerDefs(); }
@@ -1203,6 +1333,54 @@ class PictViewFlow extends libPictView
 		return this._PanelManager.togglePanel(pNodeHash);
 	}
 
+	/**
+	 * Open a properties panel for a connection (edge). Requires the ConnectionPropertiesPanel
+	 * option; returns false otherwise.
+	 * @param {string} pConnectionHash
+	 * @returns {Object|false}
+	 */
+	openConnectionPanel(pConnectionHash)
+	{
+		return this._PanelManager.openConnectionPanel(pConnectionHash);
+	}
+
+	/**
+	 * Toggle a properties panel for a connection.
+	 * @param {string} pConnectionHash
+	 * @returns {Object|false}
+	 */
+	toggleConnectionPanel(pConnectionHash)
+	{
+		return this._PanelManager.toggleConnectionPanel(pConnectionHash);
+	}
+
+	/**
+	 * Close all panels for a given connection.
+	 * @param {string} pConnectionHash
+	 * @returns {boolean}
+	 */
+	closePanelForConnection(pConnectionHash)
+	{
+		return this._PanelManager.closePanelForConnection(pConnectionHash);
+	}
+
+	/**
+	 * The midpoint of a connection in SVG coordinates, averaged from its two endpoint ports. Used
+	 * to place and tether a connection's properties panel. Returns null if the connection or
+	 * either port can not be resolved.
+	 * @param {string} pConnectionHash
+	 * @returns {{x: number, y: number}|null}
+	 */
+	getConnectionMidpoint(pConnectionHash)
+	{
+		let tmpConnection = this.getConnection(pConnectionHash);
+		if (!tmpConnection) return null;
+		let tmpSource = this.getPortPosition(tmpConnection.SourceNodeHash, tmpConnection.SourcePortHash);
+		let tmpTarget = this.getPortPosition(tmpConnection.TargetNodeHash, tmpConnection.TargetPortHash);
+		if (!tmpSource || !tmpTarget) return null;
+		return { x: (tmpSource.x + tmpTarget.x) / 2, y: (tmpSource.y + tmpTarget.y) / 2 };
+	}
+
 	/**
 	 * Update a panel's position (for drag).
 	 * @param {string} pPanelHash

package/test/PanelManager_tests.js

@@ -0,0 +1,172 @@
+const libFable = require('fable');
+const libChai = require('chai');
+const libExpect = libChai.expect;
+
+const libPanelManager = require('../source/services/PictService-Flow-PanelManager.js');
+
+/**
+ * Connection (edge) properties panels. The node-panel path is well covered through the view; these
+ * focus on the connection additions: gating on ConnectionPropertiesPanel, placement near the edge
+ * midpoint, the open/toggle/close lifecycle, and that node panels are not disturbed.
+ */
+suite
+(
+	'PictService-Flow-PanelManager (connection panels)',
+	function ()
+	{
+		let _Fable;
+		let _PanelManager;
+		let _MockFlowView;
+
+		setup
+		(
+			function ()
+			{
+				_Fable = new libFable({});
+
+				_MockFlowView =
+				{
+					fable: _Fable,
+					log: _Fable.log,
+					options:
+					{
+						ViewIdentifier: 'Test-Flow',
+						ConnectionPropertiesPanel: false
+					},
+					_FlowData:
+					{
+						Nodes:
+						[
+							{ Hash: 'n1', Type: 'state', X: 0, Y: 0, Width: 100, Height: 60, Ports: [ { Hash: 'n1-out', Direction: 'output' } ] },
+							{ Hash: 'n2', Type: 'state', X: 300, Y: 0, Width: 100, Height: 60, Ports: [ { Hash: 'n2-in', Direction: 'input' } ] }
+						],
+						Connections:
+						[
+							{ Hash: 'c1', SourceNodeHash: 'n1', SourcePortHash: 'n1-out', TargetNodeHash: 'n2', TargetPortHash: 'n2-in', Data: {} }
+						],
+						OpenPanels: [],
+						ViewState: { SelectedTetherHash: null }
+					},
+					getConnection: function (pHash) { return this._FlowData.Connections.find((pConn) => pConn.Hash === pHash) || null; },
+					getNode: function (pHash) { return this._FlowData.Nodes.find((pNode) => pNode.Hash === pHash) || null; },
+					getConnectionMidpoint: function (pHash) { return this.getConnection(pHash) ? { x: 200, y: 30 } : null; },
+					_NodeTypeProvider:
+					{
+						getNodeType: function () { return { Label: 'State', PropertiesPanel: { PanelType: 'Form', DefaultWidth: 300, DefaultHeight: 220, Title: 'State' } }; }
+					},
+					renderFlow: function () {},
+					marshalFromView: function () {},
+					_PropertiesPanelView: { destroyPanel: function () {} },
+					_EventHandlerProvider: { fireEvent: function () {} }
+				};
+
+				_PanelManager = new libPanelManager(_Fable, { FlowView: _MockFlowView }, 'PM-Test');
+			}
+		);
+
+		test
+		(
+			'openConnectionPanel returns false when no ConnectionPropertiesPanel is configured',
+			function ()
+			{
+				let tmpResult = _PanelManager.openConnectionPanel('c1');
+				libExpect(tmpResult).to.equal(false);
+				libExpect(_MockFlowView._FlowData.OpenPanels.length).to.equal(0);
+			}
+		);
+
+		test
+		(
+			'openConnectionPanel returns false for an unknown connection',
+			function ()
+			{
+				_MockFlowView.options.ConnectionPropertiesPanel = { PanelType: 'Form' };
+				let tmpResult = _PanelManager.openConnectionPanel('no-such-connection');
+				libExpect(tmpResult).to.equal(false);
+			}
+		);
+
+		test
+		(
+			'openConnectionPanel opens a panel carrying the ConnectionHash, placed near the midpoint',
+			function ()
+			{
+				_MockFlowView.options.ConnectionPropertiesPanel = { PanelType: 'Form', DefaultWidth: 320, DefaultHeight: 240, Title: 'Transition' };
+				let tmpPanel = _PanelManager.openConnectionPanel('c1');
+
+				libExpect(tmpPanel).to.be.an('object');
+				libExpect(tmpPanel.ConnectionHash).to.equal('c1');
+				libExpect(tmpPanel.NodeHash).to.equal(null);
+				libExpect(tmpPanel.Title).to.equal('Transition');
+				libExpect(tmpPanel.Width).to.equal(320);
+				libExpect(tmpPanel.Height).to.equal(240);
+				// Midpoint is (200, 30); the panel is offset from it.
+				libExpect(tmpPanel.X).to.equal(240);
+				libExpect(tmpPanel.Y).to.equal(50);
+				libExpect(_MockFlowView._FlowData.OpenPanels.length).to.equal(1);
+			}
+		);
+
+		test
+		(
+			'openConnectionPanel is idempotent: a second open returns the same panel',
+			function ()
+			{
+				_MockFlowView.options.ConnectionPropertiesPanel = { PanelType: 'Form' };
+				let tmpFirst = _PanelManager.openConnectionPanel('c1');
+				let tmpSecond = _PanelManager.openConnectionPanel('c1');
+				libExpect(tmpSecond.Hash).to.equal(tmpFirst.Hash);
+				libExpect(_MockFlowView._FlowData.OpenPanels.length).to.equal(1);
+			}
+		);
+
+		test
+		(
+			'toggleConnectionPanel opens then closes',
+			function ()
+			{
+				_MockFlowView.options.ConnectionPropertiesPanel = { PanelType: 'Form' };
+				let tmpOpened = _PanelManager.toggleConnectionPanel('c1');
+				libExpect(tmpOpened).to.be.an('object');
+				libExpect(_MockFlowView._FlowData.OpenPanels.length).to.equal(1);
+
+				let tmpClosed = _PanelManager.toggleConnectionPanel('c1');
+				libExpect(tmpClosed).to.equal(false);
+				libExpect(_MockFlowView._FlowData.OpenPanels.length).to.equal(0);
+			}
+		);
+
+		test
+		(
+			'closePanelForConnection removes the connection panel',
+			function ()
+			{
+				_MockFlowView.options.ConnectionPropertiesPanel = { PanelType: 'Form' };
+				_PanelManager.openConnectionPanel('c1');
+				let tmpRemoved = _PanelManager.closePanelForConnection('c1');
+				libExpect(tmpRemoved).to.equal(true);
+				libExpect(_MockFlowView._FlowData.OpenPanels.length).to.equal(0);
+			}
+		);
+
+		test
+		(
+			'node panels still open alongside connection panels, keyed separately',
+			function ()
+			{
+				_MockFlowView.options.ConnectionPropertiesPanel = { PanelType: 'Form' };
+				let tmpNodePanel = _PanelManager.openPanel('n1');
+				let tmpConnPanel = _PanelManager.openConnectionPanel('c1');
+
+				libExpect(tmpNodePanel.NodeHash).to.equal('n1');
+				libExpect(tmpConnPanel.ConnectionHash).to.equal('c1');
+				libExpect(_MockFlowView._FlowData.OpenPanels.length).to.equal(2);
+
+				// Closing the connection panel leaves the node panel intact.
+				_PanelManager.closePanelForConnection('c1');
+				libExpect(_MockFlowView._FlowData.OpenPanels.length).to.equal(1);
+				libExpect(_MockFlowView._FlowData.OpenPanels[0].NodeHash).to.equal('n1');
+			}
+		);
+	}
+);

package/test/Renderer_tests.js

@@ -0,0 +1,133 @@
+const libFable = require('fable');
+const libChai = require('chai');
+const libExpect = libChai.expect;
+
+const libRenderer = require('../source/providers/PictProvider-Flow-Renderer.js');
+
+suite('PictProvider-Flow-Renderer',
+function ()
+{
+	let _Fable;
+	let _Renderer;
+
+	setup(function ()
+	{
+		_Fable = new libFable({});
+		_Renderer = new libRenderer(_Fable, {}, 'Renderer-Test');
+	});
+
+	suite('Built-in renderer registry', function ()
+	{
+		test('registers clean, bracket, sketch, crt, workstation by default', function ()
+		{
+			let tmpKeys = _Renderer.getRendererKeys();
+			libExpect(tmpKeys).to.include('clean');
+			libExpect(tmpKeys).to.include('bracket');
+			libExpect(tmpKeys).to.include('sketch');
+			libExpect(tmpKeys).to.include('crt');
+			libExpect(tmpKeys).to.include('workstation');
+		});
+
+		test('clean is the default active renderer', function ()
+		{
+			libExpect(_Renderer.getActiveRendererKey()).to.equal('clean');
+		});
+
+		test('each built-in renderer has the required shape', function ()
+		{
+			let tmpKeys = _Renderer.getRendererKeys();
+			for (let i = 0; i < tmpKeys.length; i++)
+			{
+				let tmpR = _Renderer.getActiveRenderer.call(
+					{ _Renderers: _Renderer._Renderers, _ActiveRendererKey: tmpKeys[i] });
+				libExpect(tmpR, `renderer ${tmpKeys[i]}`).to.have.property('Key', tmpKeys[i]);
+				libExpect(tmpR).to.have.property('NodeBodyMode');
+				libExpect(tmpR).to.have.property('NoiseConfig');
+				libExpect(tmpR).to.have.property('ConnectionConfig');
+				libExpect(tmpR).to.have.property('GeometryCSS');
+			}
+		});
+	});
+
+	suite('setRenderer()', function ()
+	{
+		test('switches the active renderer + updates noise default', function ()
+		{
+			_Renderer.setRenderer('sketch');
+			libExpect(_Renderer.getActiveRendererKey()).to.equal('sketch');
+			let tmpActive = _Renderer.getActiveRenderer();
+			libExpect(tmpActive.NodeBodyMode).to.equal('bracket');
+			libExpect(_Renderer.getNoiseLevel()).to.equal(0.4);
+		});
+
+		test('returns false for unknown renderer + leaves state unchanged', function ()
+		{
+			_Renderer.setRenderer('sketch');
+			let tmpResult = _Renderer.setRenderer('nonexistent');
+			libExpect(tmpResult).to.equal(false);
+			libExpect(_Renderer.getActiveRendererKey()).to.equal('sketch');
+		});
+
+		test('switching to a renderer with noise disabled resets noise to 0', function ()
+		{
+			_Renderer.setRenderer('sketch');   // 0.4
+			_Renderer.setRenderer('clean');    // 0
+			libExpect(_Renderer.getNoiseLevel()).to.equal(0);
+		});
+	});
+
+	suite('register()', function ()
+	{
+		test('registers a custom renderer + reads back through getActiveRenderer', function ()
+		{
+			_Renderer.register('custom', {
+				Label: 'Custom',
+				NodeBodyMode: 'rect',
+				NoiseConfig: { Enabled: false, DefaultLevel: 0, MaxJitterPx: 0, AffectsNodes: false, AffectsConnections: false },
+				ConnectionConfig: { StrokeWidth: 3, ArrowheadStyle: 'triangle' },
+				GeometryCSS: '',
+				AdditionalCSS: ''
+			});
+			let tmpResult = _Renderer.setRenderer('custom');
+			libExpect(tmpResult).to.equal(true);
+			let tmpActive = _Renderer.getActiveRenderer();
+			libExpect(tmpActive.Key).to.equal('custom');
+			libExpect(tmpActive.Label).to.equal('Custom');
+		});
+	});
+
+	suite('Noise APIs', function ()
+	{
+		test('setNoiseLevel clamps to [0,1]', function ()
+		{
+			_Renderer.setNoiseLevel(-1);
+			libExpect(_Renderer.getNoiseLevel()).to.equal(0);
+			_Renderer.setNoiseLevel(2);
+			libExpect(_Renderer.getNoiseLevel()).to.equal(1);
+			_Renderer.setNoiseLevel(0.5);
+			libExpect(_Renderer.getNoiseLevel()).to.equal(0.5);
+		});
+
+		test('getNodeNoiseAmplitude is 0 when active renderer disables noise', function ()
+		{
+			_Renderer.setRenderer('clean');
+			_Renderer.setNoiseLevel(1);
+			libExpect(_Renderer.getNodeNoiseAmplitude()).to.equal(0);
+		});
+
+		test('getNodeNoiseAmplitude scales with noise level when sketch is active', function ()
+		{
+			_Renderer.setRenderer('sketch');
+			_Renderer.setNoiseLevel(0.5);
+			// sketch.MaxJitterPx is 4 — 0.5 * 4 = 2
+			libExpect(_Renderer.getNodeNoiseAmplitude()).to.equal(2);
+		});
+
+		test('processPathString is a no-op when noise is disabled', function ()
+		{
+			_Renderer.setRenderer('clean');
+			let tmpResult = _Renderer.processPathString('M 0 0 L 10 10', 'seed');
+			libExpect(tmpResult).to.equal('M 0 0 L 10 10');
+		});
+	});
+});