pict-section-flow 1.0.0 → 1.1.0

package/test/StylePresets_tests.js

@@ -0,0 +1,153 @@
+const libFable = require('fable');
+const libChai = require('chai');
+const libExpect = libChai.expect;
+
+const libRenderer = require('../source/providers/PictProvider-Flow-Renderer.js');
+const libStylePresets = require('../source/providers/PictProvider-Flow-StylePresets.js');
+
+// Minimal FlowView shim — captures the apply calls so we can verify each
+// preset axis fires. The real FlowView wires Renderer + setEdgeTheme; here
+// we substitute a fake whose setEdgeTheme just records its argument.
+function makeFakeFlowView(pFable)
+{
+	let tmpRenderer = new libRenderer(pFable, {}, 'Renderer-Test');
+	let tmpView =
+	{
+		_RendererProvider: tmpRenderer,
+		setEdgeThemeCalls: [],
+		setEdgeTheme: function (pName)
+		{
+			tmpView.setEdgeThemeCalls.push(pName);
+		}
+	};
+	tmpRenderer._FlowView = tmpView;
+	return tmpView;
+}
+
+// pict-provider-theme mock that records applyTheme calls.
+function attachFakeThemeProvider(pFable)
+{
+	pFable.providers = pFable.providers || {};
+	let tmpCalls = [];
+	pFable.providers.Theme =
+	{
+		applyTheme: function (pHash) { tmpCalls.push(pHash); }
+	};
+	return tmpCalls;
+}
+
+suite('PictProvider-Flow-StylePresets',
+function ()
+{
+	let _Fable;
+	let _FlowView;
+	let _ThemeCalls;
+	let _Presets;
+
+	setup(function ()
+	{
+		_Fable = new libFable({});
+		_FlowView = makeFakeFlowView(_Fable);
+		_ThemeCalls = attachFakeThemeProvider(_Fable);
+		_Presets = new libStylePresets(_Fable, { FlowView: _FlowView }, 'Presets-Test');
+	});
+
+	suite('Built-in preset registry', function ()
+	{
+		test('registers all 7 bundled presets', function ()
+		{
+			let tmpHashes = _Presets.getPresetHashes();
+			libExpect(tmpHashes).to.include('modern');
+			libExpect(tmpHashes).to.include('sketch');
+			libExpect(tmpHashes).to.include('blueprint');
+			libExpect(tmpHashes).to.include('mono');
+			libExpect(tmpHashes).to.include('retro-80s');
+			libExpect(tmpHashes).to.include('retro-90s');
+			libExpect(tmpHashes).to.include('whiteboard');
+		});
+
+		test('each bundled preset has ColorTheme + Renderer + EdgeTheme', function ()
+		{
+			let tmpHashes = _Presets.getPresetHashes();
+			for (let i = 0; i < tmpHashes.length; i++)
+			{
+				let tmpPreset = _Presets.getPreset(tmpHashes[i]);
+				libExpect(tmpPreset, `preset ${tmpHashes[i]}`).to.have.property('Hash', tmpHashes[i]);
+				libExpect(tmpPreset).to.have.property('ColorTheme');
+				libExpect(tmpPreset).to.have.property('Renderer');
+				libExpect(tmpPreset).to.have.property('EdgeTheme');
+			}
+		});
+	});
+
+	suite('applyPreset()', function ()
+	{
+		test('applies ColorTheme + Renderer + EdgeTheme + optional NoiseLevel', function ()
+		{
+			let tmpOk = _Presets.applyPreset('sketch');
+			libExpect(tmpOk).to.equal(true);
+			libExpect(_ThemeCalls).to.deep.equal(['flow-sketch']);
+			libExpect(_FlowView._RendererProvider.getActiveRendererKey()).to.equal('sketch');
+			libExpect(_FlowView.setEdgeThemeCalls).to.deep.equal(['bezier']);
+			libExpect(_FlowView._RendererProvider.getNoiseLevel()).to.equal(0.4);
+		});
+
+		test('blueprint applies bracket renderer + orthogonal edges', function ()
+		{
+			_Presets.applyPreset('blueprint');
+			libExpect(_ThemeCalls).to.deep.equal(['flow-blueprint']);
+			libExpect(_FlowView._RendererProvider.getActiveRendererKey()).to.equal('bracket');
+			libExpect(_FlowView.setEdgeThemeCalls).to.deep.equal(['orthogonal']);
+		});
+
+		test('returns false + leaves state unchanged for unknown preset hash', function ()
+		{
+			_Presets.applyPreset('sketch');
+			let tmpResult = _Presets.applyPreset('nonexistent');
+			libExpect(tmpResult).to.equal(false);
+			libExpect(_Presets.getActivePresetHash()).to.equal('sketch');
+		});
+
+		test('records active preset hash on success', function ()
+		{
+			libExpect(_Presets.getActivePresetHash()).to.equal(null);
+			_Presets.applyPreset('mono');
+			libExpect(_Presets.getActivePresetHash()).to.equal('mono');
+		});
+	});
+
+	suite('register() + custom presets', function ()
+	{
+		test('apps can register their own preset and apply it', function ()
+		{
+			_Presets.register({
+				Hash: 'corporate',
+				Label: 'Corporate',
+				ColorTheme: 'pict-default',
+				Renderer:   'clean',
+				EdgeTheme:  'orthogonal'
+			});
+			let tmpOk = _Presets.applyPreset('corporate');
+			libExpect(tmpOk).to.equal(true);
+			libExpect(_ThemeCalls).to.deep.equal(['pict-default']);
+			libExpect(_FlowView._RendererProvider.getActiveRendererKey()).to.equal('clean');
+		});
+
+		test('register() rejects payloads missing a Hash', function ()
+		{
+			let tmpOk = _Presets.register({ Label: 'Bad' });
+			libExpect(tmpOk).to.equal(false);
+		});
+	});
+
+	suite('markCustomized()', function ()
+	{
+		test('clears the active preset hash so consumers know we deviated', function ()
+		{
+			_Presets.applyPreset('sketch');
+			libExpect(_Presets.getActivePresetHash()).to.equal('sketch');
+			_Presets.markCustomized();
+			libExpect(_Presets.getActivePresetHash()).to.equal(null);
+		});
+	});
+});

package/docs/css/docuserve.css

@@ -1,327 +0,0 @@
-/* ============================================================================
-   Pict Docuserve - Base Styles & Theme Variables
-   ============================================================================ */
-
-/* ----------------------------------------------------------------------------
-   Theme variables — light defaults on :root.
-   Dark mode applies when either:
-     (a) the user explicitly selected dark via <html data-theme="dark">
-     (b) the user hasn't chosen anything AND the system prefers dark
-   An explicit <html data-theme="light"> pins the light palette regardless.
-   ---------------------------------------------------------------------------- */
-
-:root
-{
-	/* Surfaces */
-	--docuserve-bg: #FDFBF7;
-	--docuserve-bg-elevated: #FFFFFF;
-	--docuserve-border: #DDD6CA;
-	--docuserve-border-soft: #EAE3D8;
-
-	/* Text */
-	--docuserve-text: #2A241E;
-	--docuserve-text-strong: #3D3229;
-	--docuserve-text-muted: #5E5549;
-	--docuserve-text-dim: #8A7F72;
-
-	/* Accent / links */
-	--docuserve-accent: #2E7D74;
-	--docuserve-accent-hover: #236660;
-
-	/* Top bar */
-	--docuserve-topbar-bg: #3D3229;
-	--docuserve-topbar-text: #E8E0D4;
-	--docuserve-topbar-text-muted: #B5AA9A;
-	--docuserve-topbar-text-dim: #8A7F72;
-	--docuserve-topbar-hover-bg: #524438;
-	--docuserve-topbar-version-bg: rgba(255, 255, 255, 0.06);
-	--docuserve-topbar-version-border: rgba(255, 255, 255, 0.08);
-	--docuserve-topbar-version-text: #B5AA9A;
-
-	/* Sidebar */
-	--docuserve-sidebar-bg: #FAF7F1;
-	--docuserve-sidebar-border: #DDD6CA;
-	--docuserve-sidebar-border-soft: #E5DED1;
-	--docuserve-sidebar-text: #423D37;
-	--docuserve-sidebar-group-title: #3D3229;
-	--docuserve-sidebar-module-text: #5E5549;
-	--docuserve-sidebar-hover-bg: #EAE3D8;
-	--docuserve-sidebar-hover-text: #2E7D74;
-	--docuserve-sidebar-active-bg: #E5DED1;
-	--docuserve-sidebar-active-text: #2E7D74;
-	--docuserve-sidebar-search-bg: #FFFFFF;
-	--docuserve-sidebar-search-border: #DDD6CA;
-
-	/* Inline code */
-	--docuserve-inline-code-bg: #F0ECE4;
-	--docuserve-inline-code-text: #9E3A50;
-
-	/* Code block panel */
-	--docuserve-code-bg: #F6F3EE;
-	--docuserve-code-border: #E5DED1;
-	--docuserve-code-gutter-bg: #EFEAE0;
-	--docuserve-code-gutter-border: #DDD6CA;
-	--docuserve-code-gutter-text: #A59986;
-	--docuserve-code-text: #2A241E;
-
-	/* Syntax tokens — low-chroma dark-on-light palette */
-	--docuserve-tok-keyword: #A03472;
-	--docuserve-tok-string: #1A6640;
-	--docuserve-tok-number: #B25A00;
-	--docuserve-tok-comment: #8A7F72;
-	--docuserve-tok-operator: #2E7D74;
-	--docuserve-tok-punctuation: #2A241E;
-	--docuserve-tok-function: #2A5DB0;
-	--docuserve-tok-property: #9E3A50;
-	--docuserve-tok-tag: #9E3A50;
-	--docuserve-tok-attr-name: #B25A00;
-	--docuserve-tok-attr-value: #1A6640;
-
-	/* Tables, blockquotes, mermaid */
-	--docuserve-table-header-bg: #F5F0E8;
-	--docuserve-table-row-alt-bg: #F9F6F0;
-	--docuserve-blockquote-bg: #F7F5F0;
-	--docuserve-blockquote-border: #2E7D74;
-	--docuserve-blockquote-text: #5E5549;
-	--docuserve-mermaid-bg: #FFFFFF;
-
-	/* Scrollbars */
-	--docuserve-scrollbar-track: #F5F0E8;
-	--docuserve-scrollbar-thumb: #D4CCBE;
-	--docuserve-scrollbar-thumb-hover: #B5AA9A;
-}
-
-@media (prefers-color-scheme: dark)
-{
-	:root:not([data-theme="light"])
-	{
-		--docuserve-bg: #15120F;
-		--docuserve-bg-elevated: #1B1814;
-		--docuserve-border: #2F2823;
-		--docuserve-border-soft: #26211C;
-
-		--docuserve-text: #E8E0D4;
-		--docuserve-text-strong: #F2ECE0;
-		--docuserve-text-muted: #B5AA9A;
-		--docuserve-text-dim: #7A6F62;
-
-		--docuserve-accent: #5DB8A8;
-		--docuserve-accent-hover: #7FCCB8;
-
-		--docuserve-topbar-bg: #1A1612;
-		--docuserve-topbar-text: #E8E0D4;
-		--docuserve-topbar-text-muted: #B5AA9A;
-		--docuserve-topbar-text-dim: #7A6F62;
-		--docuserve-topbar-hover-bg: #2A241E;
-		--docuserve-topbar-version-bg: rgba(255, 255, 255, 0.05);
-		--docuserve-topbar-version-border: rgba(255, 255, 255, 0.09);
-		--docuserve-topbar-version-text: #B5AA9A;
-
-		--docuserve-sidebar-bg: #1B1814;
-		--docuserve-sidebar-border: #2F2823;
-		--docuserve-sidebar-border-soft: #26211C;
-		--docuserve-sidebar-text: #C9C0B3;
-		--docuserve-sidebar-group-title: #F2ECE0;
-		--docuserve-sidebar-module-text: #B5AA9A;
-		--docuserve-sidebar-hover-bg: #2A241E;
-		--docuserve-sidebar-hover-text: #7FCCB8;
-		--docuserve-sidebar-active-bg: #2F2823;
-		--docuserve-sidebar-active-text: #7FCCB8;
-		--docuserve-sidebar-search-bg: #26211C;
-		--docuserve-sidebar-search-border: #2F2823;
-
-		--docuserve-inline-code-bg: #2A241E;
-		--docuserve-inline-code-text: #E8B07A;
-
-		--docuserve-code-bg: #1E1A17;
-		--docuserve-code-border: #2F2823;
-		--docuserve-code-gutter-bg: #17130F;
-		--docuserve-code-gutter-border: #2F2823;
-		--docuserve-code-gutter-text: #6A6052;
-		--docuserve-code-text: #E8E0D4;
-
-		--docuserve-tok-keyword: #C678DD;
-		--docuserve-tok-string: #98C379;
-		--docuserve-tok-number: #D19A66;
-		--docuserve-tok-comment: #7F848E;
-		--docuserve-tok-operator: #56B6C2;
-		--docuserve-tok-punctuation: #E8E0D4;
-		--docuserve-tok-function: #61AFEF;
-		--docuserve-tok-property: #E06C75;
-		--docuserve-tok-tag: #E06C75;
-		--docuserve-tok-attr-name: #D19A66;
-		--docuserve-tok-attr-value: #98C379;
-
-		--docuserve-table-header-bg: #26211C;
-		--docuserve-table-row-alt-bg: #1F1B17;
-		--docuserve-blockquote-bg: #1F1B17;
-		--docuserve-blockquote-border: #5DB8A8;
-		--docuserve-blockquote-text: #C9C0B3;
-		--docuserve-mermaid-bg: #E8E0D4;
-
-		--docuserve-scrollbar-track: #1B1814;
-		--docuserve-scrollbar-thumb: #3A322B;
-		--docuserve-scrollbar-thumb-hover: #524438;
-	}
-}
-
-:root[data-theme="dark"]
-{
-	--docuserve-bg: #15120F;
-	--docuserve-bg-elevated: #1B1814;
-	--docuserve-border: #2F2823;
-	--docuserve-border-soft: #26211C;
-
-	--docuserve-text: #E8E0D4;
-	--docuserve-text-strong: #F2ECE0;
-	--docuserve-text-muted: #B5AA9A;
-	--docuserve-text-dim: #7A6F62;
-
-	--docuserve-accent: #5DB8A8;
-	--docuserve-accent-hover: #7FCCB8;
-
-	--docuserve-topbar-bg: #1A1612;
-	--docuserve-topbar-text: #E8E0D4;
-	--docuserve-topbar-text-muted: #B5AA9A;
-	--docuserve-topbar-text-dim: #7A6F62;
-	--docuserve-topbar-hover-bg: #2A241E;
-	--docuserve-topbar-version-bg: rgba(255, 255, 255, 0.05);
-	--docuserve-topbar-version-border: rgba(255, 255, 255, 0.09);
-	--docuserve-topbar-version-text: #B5AA9A;
-
-	--docuserve-sidebar-bg: #1B1814;
-	--docuserve-sidebar-border: #2F2823;
-	--docuserve-sidebar-border-soft: #26211C;
-	--docuserve-sidebar-text: #C9C0B3;
-	--docuserve-sidebar-group-title: #F2ECE0;
-	--docuserve-sidebar-module-text: #B5AA9A;
-	--docuserve-sidebar-hover-bg: #2A241E;
-	--docuserve-sidebar-hover-text: #7FCCB8;
-	--docuserve-sidebar-active-bg: #2F2823;
-	--docuserve-sidebar-active-text: #7FCCB8;
-	--docuserve-sidebar-search-bg: #26211C;
-	--docuserve-sidebar-search-border: #2F2823;
-
-	--docuserve-inline-code-bg: #2A241E;
-	--docuserve-inline-code-text: #E8B07A;
-
-	--docuserve-code-bg: #1E1A17;
-	--docuserve-code-border: #2F2823;
-	--docuserve-code-gutter-bg: #17130F;
-	--docuserve-code-gutter-border: #2F2823;
-	--docuserve-code-gutter-text: #6A6052;
-	--docuserve-code-text: #E8E0D4;
-
-	--docuserve-tok-keyword: #C678DD;
-	--docuserve-tok-string: #98C379;
-	--docuserve-tok-number: #D19A66;
-	--docuserve-tok-comment: #7F848E;
-	--docuserve-tok-operator: #56B6C2;
-	--docuserve-tok-punctuation: #E8E0D4;
-	--docuserve-tok-function: #61AFEF;
-	--docuserve-tok-property: #E06C75;
-	--docuserve-tok-tag: #E06C75;
-	--docuserve-tok-attr-name: #D19A66;
-	--docuserve-tok-attr-value: #98C379;
-
-	--docuserve-table-header-bg: #26211C;
-	--docuserve-table-row-alt-bg: #1F1B17;
-	--docuserve-blockquote-bg: #1F1B17;
-	--docuserve-blockquote-border: #5DB8A8;
-	--docuserve-blockquote-text: #C9C0B3;
-	--docuserve-mermaid-bg: #E8E0D4;
-
-	--docuserve-scrollbar-track: #1B1814;
-	--docuserve-scrollbar-thumb: #3A322B;
-	--docuserve-scrollbar-thumb-hover: #524438;
-}
-
-/* ----------------------------------------------------------------------------
-   Reset and base
-   ---------------------------------------------------------------------------- */
-
-*, *::before, *::after
-{
-	box-sizing: border-box;
-}
-
-html, body
-{
-	margin: 0;
-	padding: 0;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-	font-size: 16px;
-	line-height: 1.5;
-	color: var(--docuserve-text);
-	background-color: var(--docuserve-bg);
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	transition: background-color 0.15s ease, color 0.15s ease;
-}
-
-/* Typography */
-h1, h2, h3, h4, h5, h6
-{
-	margin-top: 0;
-	line-height: 1.3;
-	color: var(--docuserve-text-strong);
-}
-
-a
-{
-	color: var(--docuserve-accent);
-	text-decoration: none;
-}
-
-a:hover
-{
-	color: var(--docuserve-accent-hover);
-}
-
-/* Application container */
-#Docuserve-Application-Container
-{
-	min-height: 100vh;
-}
-
-/* Utility: scrollbar styling */
-::-webkit-scrollbar
-{
-	width: 8px;
-	height: 8px;
-}
-
-::-webkit-scrollbar-track
-{
-	background: var(--docuserve-scrollbar-track);
-}
-
-::-webkit-scrollbar-thumb
-{
-	background: var(--docuserve-scrollbar-thumb);
-	border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover
-{
-	background: var(--docuserve-scrollbar-thumb-hover);
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px)
-{
-	html
-	{
-		font-size: 14px;
-	}
-
-	#Docuserve-Sidebar-Container
-	{
-		display: none;
-	}
-
-	.docuserve-body
-	{
-		flex-direction: column;
-	}
-}