pict-section-flow 1.0.0 → 1.0.1

package/source/services/PictService-Flow-ConnectionRenderer.js

@@ -15,13 +15,13 @@ const _CHIP_PER_CHAR_PX  = 5;
 // badge borders so the hint bezier matches its port's affinity color.
 const PORT_TYPE_COLORS =
 {
-	'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)'
 };
-const PORT_TYPE_DEFAULT_COLOR = '#95a5a6';
+const PORT_TYPE_DEFAULT_COLOR = 'var(--theme-color-border-default, #95a5a6)';
 
 class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 {

package/source/services/PictService-Flow-PortRenderer.js

@@ -88,13 +88,13 @@ class PictServiceFlowPortRenderer extends libFableServiceProviderBase
 				{
 					let tmpPortTypeColorMap =
 					{
-						'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)'
 					};
-					let tmpBorderColor = tmpPort.PortType ? (tmpPortTypeColorMap[tmpPort.PortType] || '#95a5a6') : '#95a5a6';
+					let tmpBorderColor = tmpPort.PortType ? (tmpPortTypeColorMap[tmpPort.PortType] || 'var(--theme-color-border-default, #95a5a6)') : 'var(--theme-color-border-default, #95a5a6)';
 
 					let tmpBadgeHeight = 12;
 					let tmpBadgePadH = 5;

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

@@ -239,7 +239,7 @@ class PictViewFlowNode extends libPictView
 					tmpCodeText.setAttribute('class', 'pict-flow-node-card-code');
 					tmpCodeText.setAttribute('font-size', '10');
 					tmpCodeText.setAttribute('font-family', 'monospace');
-					tmpCodeText.setAttribute('fill', '#7f8c8d');
+					tmpCodeText.setAttribute('fill', 'var(--theme-color-text-secondary, #7f8c8d)');
 					tmpCodeText.setAttribute('text-anchor', 'middle');
 					tmpCodeText.setAttribute('dominant-baseline', 'central');
 					tmpCodeText.setAttribute('pointer-events', 'none');

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

@@ -547,7 +547,7 @@ class PictViewFlowPropertiesPanel extends libPictView
 
 		// Resolve default colors from the node type config or CSS token defaults
 		let tmpNodeTypeConfig = this._FlowView._NodeTypeProvider.getNodeType(tmpNodeData.Type);
-		let tmpDefaultTitleBarColor = '#2c3e50';
+		let tmpDefaultTitleBarColor = 'var(--theme-color-text-primary, #2c3e50)';
 		let tmpDefaultBodyFill = '#ffffff';
 		let tmpDefaultBodyStroke = '#d0d4d8';
 		if (tmpNodeTypeConfig)

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

@@ -1500,30 +1500,36 @@ class PictViewFlowToolbar extends libPictView
 	 */
 	_buildSettingsPopup(pContainer)
 	{
-		if (!this._FlowView || !this._FlowView._ThemeProvider) return;
+		if (!this._FlowView) return;
 
 		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
-		let tmpThemeProvider = this._FlowView._ThemeProvider;
-		let tmpThemeKeys = tmpThemeProvider.getThemeKeys();
-		let tmpActiveKey = tmpThemeProvider.getActiveThemeKey();
+		let tmpPresetsProvider = this._FlowView._StylePresetsProvider;
+		let tmpRendererProvider = this._FlowView._RendererProvider;
+		if (!tmpPresetsProvider || !tmpRendererProvider) return;
+
+		// The single "Style" picker surfaces curated presets — each one bundles
+		// a ColorTheme + Renderer + EdgeTheme. Per-axis overrides live behind
+		// future "Customize" UI; the toolbar shows the preset list only.
+		let tmpPresets = tmpPresetsProvider.listPresets();
+		let tmpActivePreset = tmpPresetsProvider.getActivePresetHash();
 
 		let tmpThemeOptions = [];
-		for (let i = 0; i < tmpThemeKeys.length; i++)
+		for (let i = 0; i < tmpPresets.length; i++)
 		{
-			let tmpTheme = tmpThemeProvider._Themes[tmpThemeKeys[i]];
+			let tmpPreset = tmpPresets[i];
 			tmpThemeOptions.push(
 			{
-				Value: tmpThemeKeys[i],
-				Label: tmpTheme.Label || tmpThemeKeys[i],
-				SelectedAttr: (tmpThemeKeys[i] === tmpActiveKey) ? ' selected="selected"' : ''
+				Value: tmpPreset.Hash,
+				Label: tmpPreset.Label || tmpPreset.Hash,
+				SelectedAttr: (tmpPreset.Hash === tmpActivePreset) ? ' selected="selected"' : ''
 			});
 		}
 
 		let tmpThemeOptionsHTML = this.pict.parseTemplateByHash('Flow-Layout-OptionList', { Options: tmpThemeOptions });
 
-		let tmpNoiseLevel = Math.round(tmpThemeProvider.getNoiseLevel() * 100);
-		let tmpActiveTheme = tmpThemeProvider.getActiveTheme();
-		let tmpNoiseEnabled = !!(tmpActiveTheme && tmpActiveTheme.NoiseConfig && tmpActiveTheme.NoiseConfig.Enabled);
+		let tmpNoiseLevel = Math.round(tmpRendererProvider.getNoiseLevel() * 100);
+		let tmpActiveRenderer = tmpRendererProvider.getActiveRenderer();
+		let tmpNoiseEnabled = !!(tmpActiveRenderer && tmpActiveRenderer.NoiseConfig && tmpActiveRenderer.NoiseConfig.Enabled);
 		let tmpNoiseDisplay = tmpNoiseEnabled ? '' : 'display:none;';
 
 		this.pict.ContentAssignment.assignContent(pContainer,
@@ -1585,16 +1591,18 @@ class PictViewFlowToolbar extends libPictView
 		let tmpNoiseSection = pContainer.querySelector('[data-settings-type="noise"]');
 		if (!tmpNoiseSection) return;
 
-		let tmpTheme = this._FlowView._ThemeProvider.getActiveTheme();
-		if (tmpTheme && tmpTheme.NoiseConfig && tmpTheme.NoiseConfig.Enabled)
+		let tmpRendererProvider = this._FlowView._RendererProvider;
+		if (!tmpRendererProvider) { tmpNoiseSection.style.display = 'none'; return; }
+		let tmpRenderer = tmpRendererProvider.getActiveRenderer();
+		if (tmpRenderer && tmpRenderer.NoiseConfig && tmpRenderer.NoiseConfig.Enabled)
 		{
 			tmpNoiseSection.style.display = '';
-			// Update slider value to reflect theme default
+			// Update slider value to reflect renderer default
 			let tmpSlider = tmpNoiseSection.querySelector('.pict-flow-popup-settings-slider');
 			let tmpValueLabel = tmpNoiseSection.querySelector('.pict-flow-popup-settings-slider-value');
 			if (tmpSlider)
 			{
-				let tmpLevel = Math.round(this._FlowView._ThemeProvider.getNoiseLevel() * 100);
+				let tmpLevel = Math.round(tmpRendererProvider.getNoiseLevel() * 100);
 				tmpSlider.value = String(tmpLevel);
 				if (tmpValueLabel) tmpValueLabel.textContent = tmpLevel + '%';
 			}

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');
@@ -165,6 +167,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 +262,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 +352,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 +928,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(); }

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');
+		});
+	});
+});