retold-facto 1.0.0 → 1.0.1

package/Dockerfile

@@ -1,5 +1,5 @@
 # Stage 1: Build
-FROM node:20-slim AS builder
+FROM node:22-slim AS builder
 WORKDIR /app
 COPY package*.json ./
 # `npm install`, not `npm ci` — package-lock.json is gitignored per
@@ -16,7 +16,7 @@ RUN npx quack build
 RUN cp node_modules/pict/dist/pict.min.js source/services/web-app/web/pict.min.js 2>/dev/null || true
 
 # Stage 2: Runtime
-FROM node:20-slim
+FROM node:22-slim
 WORKDIR /app
 COPY package*.json ./
 RUN npm install --omit=dev

package/docs/_brand.json

@@ -0,0 +1,18 @@
+{
+	"Hash": "retold-facto",
+	"Name": "Retold Facto",
+	"Tagline": "Data warehouse and knowledge graph storage for the Retold ecosystem.",
+	"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-retold-facto-filled-light\">\n\t\t\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\" fill=\"#2e8ab5\"/>\n\t\t<g clip-path=\"url(#frame-retold-facto-filled-light)\"><rect x=\"26\" y=\"14\" width=\"18\" height=\"68\" rx=\"4\" fill=\"rgba(255,255,255,0.18)\"/><rect x=\"52\" y=\"14\" width=\"18\" height=\"68\" rx=\"4\" fill=\"#da9859\"/></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=\"38\" font-weight=\"700\"\n\t\t\tfill=\"#ffffff\" letter-spacing=\"-1\">RF</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-retold-facto-light\">\n\t\t\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\" fill=\"#2e8ab5\"/>\n\t\t<g clip-path=\"url(#fav-retold-facto-light)\"><rect x=\"20\" y=\"14\" width=\"56\" height=\"68\" rx=\"4\" 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\">R</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-retold-facto-dark\">\n\t\t\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\" fill=\"#6cb2d3\"/>\n\t\t<g clip-path=\"url(#fav-retold-facto-dark)\"><rect x=\"20\" y=\"14\" width=\"56\" height=\"68\" rx=\"4\" 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\">R</text>\n\t</svg>",
+	"Colors": {
+		"Primary": "#2e8ab5",
+		"Secondary": "#da9859",
+		"PrimaryLight": "#2e8ab5",
+		"PrimaryDark": "#6cb2d3",
+		"SecondaryLight": "#da9859",
+		"SecondaryDark": "#e7c7a7"
+	}
+}

package/docs/index.html

@@ -8,8 +8,6 @@
 
 		<title>Retold Facto v0.1.0 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": "retold-facto",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"description": "Data warehouse and knowledge graph storage for the Retold ecosystem.",
 	"main": "source/Retold-Facto.js",
 	"bin": {
@@ -11,6 +11,8 @@
 		"coverage": "npx quack coverage",
 		"test": "npx quack test",
 		"test-browser": "npx mocha test/Facto_Browser_Integration_tests.js -u tdd --exit --timeout 120000",
+		"brand": "node node_modules/pict-section-theme/bin/pict-section-theme-brand.js --manifest ../../../Retold-Modules-Manifest.json --module retold-facto --favicons source/services/web-app/web/favicons",
+		"prebuild": "npm run brand",
 		"build": "npx quack build",
 		"build-codemirror": "npx esbuild source/services/web-app/codemirror-entry.js --bundle --outfile=source/services/web-app/web/codemirror-bundle.js --format=iife --global-name=CodeMirrorModules --platform=browser --target=es2018",
 		"build-test-model": "cd test && npx stricture -i model/ddl/Facto.ddl",
@@ -28,7 +30,10 @@
 		"release:major:image": "npx quack release major --image"
 	},
 	"mocha": {
-		"spec": "test/RetoldFacto_tests.js",
+		"spec": [
+			"test/RetoldFacto_tests.js",
+			"test/Facto_Smoke_tests.js"
+		],
 		"diff": true,
 		"extension": [
 			"js"
@@ -103,40 +108,65 @@
 	},
 	"homepage": "https://github.com/stevenvelozo/retold-facto",
 	"devDependencies": {
-		"chai": "^6.2.2",
-		"pict-docuserve": "^0.1.5",
+		"chai": "^4.5.0",
+		"jsdom": "^25.0.1",
+		"mocha": "^11.0.1",
+		"pict-docuserve": "^1.3.2",
 		"puppeteer": "^24.40.0",
-		"quackage": "^1.2.0",
-		"stricture": "^4.0.2",
+		"quackage": "^1.2.3",
+		"retold-sharp": "^1.0.0",
+		"stricture": "^4.0.3",
 		"supertest": "^7.2.2"
 	},
 	"dependencies": {
 		"@codemirror/lang-markdown": "^6.5.0",
 		"@codemirror/state": "^6.6.0",
-		"meadow-connection-sqlite": "^1.0.19",
 		"@codemirror/view": "^6.41.0",
-		"bibliograph": "^0.1.6",
+		"bibliograph": "^1.0.0",
 		"codemirror": "^6.0.2",
-		"fable": "^3.1.71",
+		"fable": "^3.1.73",
 		"fable-serviceproviderbase": "^3.0.19",
 		"fast-xml-parser": "^5.5.10",
-		"meadow": "^2.0.37",
-		"meadow-connection-manager": "^1.1.0",
-		"meadow-connection-mysql": "^1.0.18",
-		"meadow-endpoints": "^4.0.17",
-		"meadow-integration": "^1.0.38",
-		"orator": "^6.1.1",
-		"orator-serviceserver-restify": "^2.0.10",
-		"orator-static-server": "^2.1.3",
-		"pict": "^1.0.365",
-		"pict-router": "^1.0.9",
-		"pict-section-connection-form": "^0.0.2",
-		"pict-section-flow": "^0.0.17",
-		"pict-section-histogram": "^1.0.0",
-		"pict-section-markdowneditor": "^1.0.10",
-		"pict-section-modal": "^0.0.5",
-		"pict-section-objecteditor": "^1.0.1",
-		"stricture": "^4.0.2",
+		"meadow": "^2.0.39",
+		"meadow-connection-manager": "^1.1.2",
+		"meadow-connection-mysql": "^1.0.19",
+		"meadow-connection-sqlite": "^1.0.20",
+		"meadow-endpoints": "^4.0.21",
+		"meadow-integration": "^1.0.40",
+		"orator": "^6.1.2",
+		"orator-serviceserver-restify": "^2.0.11",
+		"orator-static-server": "^2.1.4",
+		"pict": "^1.0.369",
+		"pict-provider-theme": "^1.0.1",
+		"pict-router": "^1.0.10",
+		"pict-section-connection-form": "^1.0.0",
+		"pict-section-flow": "^1.0.1",
+		"pict-section-histogram": "^1.0.1",
+		"pict-section-markdowneditor": "^1.0.15",
+		"pict-section-modal": "^1.1.1",
+		"pict-section-objecteditor": "^1.0.3",
+		"pict-section-theme": "^1.0.5",
+		"stricture": "^4.0.3",
 		"xlsx": "^0.18.5"
+	},
+	"retold": {
+		"brand": {
+			"Hash": "retold-facto",
+			"Name": "Retold Facto",
+			"Tagline": "Data warehouse and knowledge graph storage",
+			"Palette": "forest",
+			"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-retold-facto-filled-light\">\n\t\t\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\" fill=\"#419638\"/>\n\t\t<g clip-path=\"url(#frame-retold-facto-filled-light)\"><rect x=\"26\" y=\"14\" width=\"18\" height=\"68\" rx=\"4\" fill=\"rgba(255,255,255,0.18)\"/><rect x=\"52\" y=\"14\" width=\"18\" height=\"68\" rx=\"4\" fill=\"#c8bd52\"/></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=\"38\" font-weight=\"700\"\n\t\t\tfill=\"#ffffff\" letter-spacing=\"-1\">RF</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-retold-facto-light\">\n\t\t\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\" fill=\"#419638\"/>\n\t\t<g clip-path=\"url(#fav-retold-facto-light)\"><rect x=\"20\" y=\"14\" width=\"56\" height=\"68\" rx=\"4\" 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\">R</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-retold-facto-dark\">\n\t\t\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\" fill=\"#73bf6b\"/>\n\t\t<g clip-path=\"url(#fav-retold-facto-dark)\"><rect x=\"20\" y=\"14\" width=\"56\" height=\"68\" rx=\"4\" 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\">R</text>\n\t</svg>",
+			"Colors": {
+				"Primary": "#419638",
+				"Secondary": "#c8bd52",
+				"PrimaryLight": "#419638",
+				"PrimaryDark": "#73bf6b",
+				"SecondaryLight": "#c8bd52",
+				"SecondaryDark": "#dad49c"
+			}
+		}
 	}
 }

package/source/services/web-app/Facto-Brand.js

@@ -0,0 +1,18 @@
+'use strict';
+
+// Brand wrapper — deterministic brand block emitted by `npm run brand`
+// (which calls pict-section-theme-brand with the Branding entry from
+// Retold-Modules-Manifest.json). Passed to Theme-Section as the `Brand`
+// option so the BrandMark wordmark + --brand-color-* variables are
+// wired into every themed surface.
+
+// services/web-app/Facto-Brand.js  →  three levels up to the package.json
+const tmpPackage = require('../../../package.json');
+
+if (!tmpPackage.retold || !tmpPackage.retold.brand)
+{
+	throw new Error('retold-facto: package.json is missing retold.brand — '
+		+ 'run `npm run brand` (which calls pict-section-theme-brand) before building');
+}
+
+module.exports = tmpPackage.retold.brand;

package/source/services/web-app/pict-app/views/PictView-Facto-Catalog.js

@@ -29,7 +29,7 @@ class FactoCatalogView extends libPictView
 		let tmpEntries = this.pict.AppData.Facto.CatalogEntries;
 		if (!tmpEntries || tmpEntries.length === 0)
 		{
-			tmpContainer.innerHTML = '<p style="color:#888; font-style:italic;">No catalog entries yet. Add sources to your research catalog.</p>';
+			tmpContainer.innerHTML = '<p style="color:var(--theme-color-text-muted, #888); font-style:italic;">No catalog entries yet. Add sources to your research catalog.</p>';
 			return;
 		}
 
@@ -37,7 +37,7 @@ class FactoCatalogView extends libPictView
 		for (let i = 0; i < tmpEntries.length; i++)
 		{
 			let tmpEntry = tmpEntries[i];
-			let tmpVerified = tmpEntry.Verified ? '<span style="color:#28a745;">&#10003;</span>' : '<span style="color:#ccc;">&#10007;</span>';
+			let tmpVerified = tmpEntry.Verified ? '<span style="color:var(--theme-color-status-success, #28a745);">&#10003;</span>' : '<span style="color:var(--theme-color-border-default, #ccc);">&#10007;</span>';
 			tmpHtml += '<tr>';
 			tmpHtml += '<td>' + (tmpEntry.IDSourceCatalogEntry || '') + '</td>';
 			tmpHtml += '<td>' + (tmpEntry.Agency || '') + '</td>';
@@ -171,11 +171,11 @@ class FactoCatalogView extends libPictView
 			(pResponse) =>
 			{
 				let tmpDatasets = (pResponse && pResponse.Datasets) ? pResponse.Datasets : [];
-				let tmpHtml = '<h3 style="margin-bottom:8px; font-size:1em; color:#444;">Dataset Definitions for Entry #' + pIDEntry + '</h3>';
+				let tmpHtml = '<h3 style="margin-bottom:8px; font-size:1em; color:var(--theme-color-text-secondary, #444);">Dataset Definitions for Entry #' + pIDEntry + '</h3>';
 
 				if (tmpDatasets.length === 0)
 				{
-					tmpHtml += '<p style="color:#888; font-style:italic; margin-bottom:8px;">No dataset definitions yet.</p>';
+					tmpHtml += '<p style="color:var(--theme-color-text-muted, #888); font-style:italic; margin-bottom:8px;">No dataset definitions yet.</p>';
 				}
 				else
 				{
@@ -184,8 +184,8 @@ class FactoCatalogView extends libPictView
 					{
 						let tmpDS = tmpDatasets[i];
 						let tmpStatusLabel = tmpDS.Provisioned
-							? '<span style="color:#28a745;">Provisioned (Source #' + tmpDS.IDSource + ', Dataset #' + tmpDS.IDDataset + ')</span>'
-							: '<span style="color:#888;">Not provisioned</span>';
+							? '<span style="color:var(--theme-color-status-success, #28a745);">Provisioned (Source #' + tmpDS.IDSource + ', Dataset #' + tmpDS.IDDataset + ')</span>'
+							: '<span style="color:var(--theme-color-text-muted, #888);">Not provisioned</span>';
 						let tmpActionBtn = '';
 						if (tmpDS.Provisioned)
 						{
@@ -209,7 +209,7 @@ class FactoCatalogView extends libPictView
 				}
 
 				// Add dataset definition form
-				tmpHtml += '<h4 style="margin-top:12px; margin-bottom:8px; font-size:0.95em; color:#555;">Add Dataset Definition</h4>';
+				tmpHtml += '<h4 style="margin-top:12px; margin-bottom:8px; font-size:0.95em; color:var(--theme-color-text-secondary, #555);">Add Dataset Definition</h4>';
 				tmpHtml += '<div class="inline-group">';
 				tmpHtml += '<div><label for="facto-catds-name">Name</label><input type="text" id="facto-catds-name" placeholder="e.g. Monthly Earthquake Feed"></div>';
 				tmpHtml += '<div><label for="facto-catds-format">Format</label>';
@@ -418,7 +418,7 @@ module.exports.default_configuration =
 			<span class="accordion-toggle">&#9660;</span>
 		</div>
 		<div class="accordion-body">
-			<p style="margin-bottom:12px; color:#666; font-size:0.9em;">Research and catalog potential data sources before provisioning them as runtime Sources and Datasets.</p>
+			<p style="margin-bottom:12px; color:var(--theme-color-text-secondary, #666); font-size:0.9em;">Research and catalog potential data sources before provisioning them as runtime Sources and Datasets.</p>
 
 			<!-- Search -->
 			<div class="inline-group" style="margin-bottom:12px;">
@@ -437,7 +437,7 @@ module.exports.default_configuration =
 			<div id="facto-catalog-detail" style="margin-top:12px;"></div>
 
 			<!-- Add entry form -->
-			<h3 style="margin-top:16px; margin-bottom:8px; font-size:1em; color:#444;">Add Catalog Entry</h3>
+			<h3 style="margin-top:16px; margin-bottom:8px; font-size:1em; color:var(--theme-color-text-secondary, #444);">Add Catalog Entry</h3>
 			<div class="inline-group">
 				<div>
 					<label for="facto-catalog-agency">Agency / Organization</label>
@@ -504,8 +504,8 @@ module.exports.default_configuration =
 			<button class="primary" onclick="pict.views['Facto-Catalog'].addEntry()">Add Catalog Entry</button>
 
 			<!-- Import / Export -->
-			<h3 style="margin-top:16px; margin-bottom:8px; font-size:1em; color:#444;">Import / Export</h3>
-			<textarea id="facto-catalog-import-json" rows="4" style="width:100%; font-family:monospace; font-size:0.85em; padding:8px; border:1px solid #ccc; border-radius:4px; margin-bottom:8px;" placeholder="Paste JSON array of catalog entries here..."></textarea>
+			<h3 style="margin-top:16px; margin-bottom:8px; font-size:1em; color:var(--theme-color-text-secondary, #444);">Import / Export</h3>
+			<textarea id="facto-catalog-import-json" rows="4" style="width:100%; font-family:monospace; font-size:0.85em; padding:8px; border:1px solid var(--theme-color-border-default, #ccc); border-radius:4px; margin-bottom:8px;" placeholder="Paste JSON array of catalog entries here..."></textarea>
 			<button class="primary" onclick="pict.views['Facto-Catalog'].importCatalog()">Import JSON</button>
 			<button class="secondary" onclick="pict.views['Facto-Catalog'].exportCatalog()">Export Catalog</button>
 

package/source/services/web-app/pict-app/views/PictView-Facto-Datasets.js

@@ -28,7 +28,7 @@ class FactoDatasetsView extends libPictView
 		let tmpDatasets = this.pict.AppData.Facto.Datasets;
 		if (!tmpDatasets || tmpDatasets.length === 0)
 		{
-			tmpContainer.innerHTML = '<p style="color:#888; font-style:italic;">No datasets created yet.</p>';
+			tmpContainer.innerHTML = '<p style="color:var(--theme-color-text-muted, #888); font-style:italic;">No datasets created yet.</p>';
 			return;
 		}
 
@@ -131,10 +131,10 @@ module.exports.default_configuration =
 			<span class="accordion-toggle">&#9660;</span>
 		</div>
 		<div class="accordion-body">
-			<p style="margin-bottom:12px; color:#666; font-size:0.9em;">Datasets are named collections of records. Types: Raw (ingested), Compositional (merged), Projection (flattened), Derived (computed).</p>
+			<p style="margin-bottom:12px; color:var(--theme-color-text-secondary, #666); font-size:0.9em;">Datasets are named collections of records. Types: Raw (ingested), Compositional (merged), Projection (flattened), Derived (computed).</p>
 			<div id="facto-datasets-list"></div>
 
-			<h3 style="margin-top:16px; margin-bottom:8px; font-size:1em; color:#444;">Create Dataset</h3>
+			<h3 style="margin-top:16px; margin-bottom:8px; font-size:1em; color:var(--theme-color-text-secondary, #444);">Create Dataset</h3>
 			<div class="inline-group">
 				<div>
 					<label for="facto-dataset-name">Name</label>

package/source/services/web-app/pict-app/views/PictView-Facto-Ingest.js

@@ -28,7 +28,7 @@ class FactoIngestView extends libPictView
 		let tmpJobs = this.pict.AppData.Facto.IngestJobs;
 		if (!tmpJobs || tmpJobs.length === 0)
 		{
-			tmpContainer.innerHTML = '<p style="color:#888; font-style:italic;">No ingest jobs yet.</p>';
+			tmpContainer.innerHTML = '<p style="color:var(--theme-color-text-muted, #888); font-style:italic;">No ingest jobs yet.</p>';
 			return;
 		}
 
@@ -197,10 +197,10 @@ module.exports.default_configuration =
 			<span class="accordion-toggle">&#9660;</span>
 		</div>
 		<div class="accordion-body">
-			<p style="margin-bottom:12px; color:#666; font-size:0.9em;">Track data ingest operations from configured sources into datasets.</p>
+			<p style="margin-bottom:12px; color:var(--theme-color-text-secondary, #666); font-size:0.9em;">Track data ingest operations from configured sources into datasets.</p>
 			<div id="facto-ingest-list"></div>
 
-			<h3 style="margin-top:16px; margin-bottom:8px; font-size:1em; color:#444;">Create Ingest Job</h3>
+			<h3 style="margin-top:16px; margin-bottom:8px; font-size:1em; color:var(--theme-color-text-secondary, #444);">Create Ingest Job</h3>
 			<div class="inline-group">
 				<div>
 					<label for="facto-ingest-source">Source ID</label>
@@ -215,8 +215,8 @@ module.exports.default_configuration =
 
 			<pre id="facto-ingest-log" style="display:none; margin-top:12px; padding:12px; background:#f8f9fa; border:1px solid #e9ecef; border-radius:4px; font-size:0.85em; max-height:200px; overflow:auto; white-space:pre-wrap;"></pre>
 
-			<h3 style="margin-top:20px; margin-bottom:8px; font-size:1em; color:#444;">Paste &amp; Ingest</h3>
-			<p style="margin-bottom:8px; color:#666; font-size:0.85em;">Paste CSV or JSON content directly to ingest records.</p>
+			<h3 style="margin-top:20px; margin-bottom:8px; font-size:1em; color:var(--theme-color-text-secondary, #444);">Paste &amp; Ingest</h3>
+			<p style="margin-bottom:8px; color:var(--theme-color-text-secondary, #666); font-size:0.85em;">Paste CSV or JSON content directly to ingest records.</p>
 			<div class="inline-group">
 				<div>
 					<label for="facto-ingest-paste-dataset">Dataset ID</label>
@@ -239,7 +239,7 @@ module.exports.default_configuration =
 					<input type="text" id="facto-ingest-paste-type" placeholder="data">
 				</div>
 			</div>
-			<textarea id="facto-ingest-paste-content" rows="6" style="width:100%; padding:8px 12px; border:1px solid #ccc; border-radius:4px; font-size:0.9em; font-family:monospace; margin-bottom:10px;" placeholder="Paste CSV or JSON data here..."></textarea>
+			<textarea id="facto-ingest-paste-content" rows="6" style="width:100%; padding:8px 12px; border:1px solid var(--theme-color-border-default, #ccc); border-radius:4px; font-size:0.9em; font-family:monospace; margin-bottom:10px;" placeholder="Paste CSV or JSON data here..."></textarea>
 			<button class="primary" onclick="pict.views['Facto-Ingest'].ingestPastedContent()">Ingest</button>
 
 		</div>

package/source/services/web-app/pict-app/views/PictView-Facto-Layout.js

@@ -57,11 +57,11 @@ module.exports.default_configuration =
 	DefaultDestinationAddress: '#Facto-Application-Container',
 	CSS: /*css*/`
 * { box-sizing: border-box; margin: 0; padding: 0; }
-body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; color: #333; padding: 20px; }
-h1 { margin-bottom: 20px; color: #1a1a1a; }
-h2 { margin-bottom: 12px; color: #444; font-size: 1.2em; border-bottom: 2px solid #ddd; padding-bottom: 6px; }
+body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--theme-color-background-secondary, #f5f5f5); color: var(--theme-color-text-primary, #333); padding: 20px; }
+h1 { margin-bottom: 20px; color: var(--theme-color-text-primary, #1a1a1a); }
+h2 { margin-bottom: 12px; color: var(--theme-color-text-secondary, #444); font-size: 1.2em; border-bottom: 2px solid var(--theme-color-border-default, #ddd); padding-bottom: 6px; }
 
-.section { background: #fff; border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+.section { background: var(--theme-color-background-panel, #fff); border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
 
 /* Accordion layout */
 .accordion-row { display: flex; gap: 0; margin-bottom: 16px; align-items: stretch; }
@@ -71,25 +71,25 @@ h2 { margin-bottom: 12px; color: #444; font-size: 1.2em; border-bottom: 2px soli
 	user-select: none;
 }
 .accordion-card {
-	flex: 1; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+	flex: 1; background: var(--theme-color-background-panel, #fff); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 	overflow: hidden; min-width: 0;
 }
 .accordion-header {
 	display: flex; align-items: center; padding: 14px 20px; cursor: pointer;
 	user-select: none; gap: 12px; transition: background 0.15s; line-height: 1.4;
 }
-.accordion-header:hover { background: #fafafa; }
-.accordion-title { font-weight: 600; color: #333; font-size: 1.05em; white-space: nowrap; }
-.accordion-preview { flex: 1; font-style: italic; color: #888; font-size: 0.9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.accordion-header:hover { background: var(--theme-color-background-secondary, #fafafa); }
+.accordion-title { font-weight: 600; color: var(--theme-color-text-primary, #333); font-size: 1.05em; white-space: nowrap; }
+.accordion-preview { flex: 1; font-style: italic; color: var(--theme-color-text-muted, #888); font-size: 0.9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
 .accordion-toggle {
 	flex: 0 0 20px; display: flex; align-items: center; justify-content: center;
-	border-radius: 4px; transition: background 0.15s, transform 0.25s; font-size: 0.7em; color: #888;
+	border-radius: 4px; transition: background 0.15s, transform 0.25s; font-size: 0.7em; color: var(--theme-color-text-muted, #888);
 }
-.accordion-header:hover .accordion-toggle { background: #eee; color: #555; }
+.accordion-header:hover .accordion-toggle { background: var(--theme-color-border-light, #eee); color: var(--theme-color-text-secondary, #555); }
 .accordion-card.open .accordion-toggle { transform: rotate(180deg); }
 .accordion-body { padding: 0 20px 20px; display: none; }
 .accordion-card.open .accordion-body { display: block; }
-.accordion-card.open .accordion-header { border-bottom: 1px solid #eee; }
+.accordion-card.open .accordion-header { border-bottom: 1px solid var(--theme-color-border-light, #eee); }
 .accordion-card.open .accordion-preview { display: none; }
 
 .accordion-controls {
@@ -97,13 +97,13 @@ h2 { margin-bottom: 12px; color: #444; font-size: 1.2em; border-bottom: 2px soli
 }
 .accordion-controls button {
 	padding: 4px 10px; font-size: 0.82em; font-weight: 500; background: none;
-	border: 1px solid #ccc; border-radius: 4px; color: #666; cursor: pointer; margin: 0;
+	border: 1px solid var(--theme-color-border-default, #ccc); border-radius: 4px; color: var(--theme-color-text-secondary, #666); cursor: pointer; margin: 0;
 }
-.accordion-controls button:hover { background: #f0f0f0; border-color: #aaa; color: #333; }
+.accordion-controls button:hover { background: var(--theme-color-background-tertiary, #f0f0f0); border-color: var(--theme-color-text-muted, #aaa); color: var(--theme-color-text-primary, #333); }
 
 label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 0.9em; }
 input[type="text"], input[type="password"], input[type="number"] {
-	width: 100%; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px;
+	width: 100%; padding: 8px 12px; border: 1px solid var(--theme-color-border-default, #ccc); border-radius: 4px;
 	font-size: 0.95em; margin-bottom: 10px;
 }
 input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus {
@@ -114,13 +114,13 @@ button {
 	padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;
 	font-size: 0.9em; font-weight: 600; margin-right: 8px; margin-bottom: 8px;
 }
-button.primary { background: #4a90d9; color: #fff; }
+button.primary { background: #4a90d9; color: var(--theme-color-background-panel, #fff); }
 button.primary:hover { background: #357abd; }
-button.secondary { background: #6c757d; color: #fff; }
+button.secondary { background: #6c757d; color: var(--theme-color-background-panel, #fff); }
 button.secondary:hover { background: #5a6268; }
-button.danger { background: #dc3545; color: #fff; }
+button.danger { background: #dc3545; color: var(--theme-color-background-panel, #fff); }
 button.danger:hover { background: #c82333; }
-button.success { background: #28a745; color: #fff; }
+button.success { background: var(--theme-color-status-success, #28a745); color: var(--theme-color-background-panel, #fff); }
 button.success:hover { background: #218838; }
 button:disabled { opacity: 0.5; cursor: not-allowed; }
 
@@ -135,12 +135,12 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 
 a { color: #4a90d9; }
 
-select { background: #fff; width: 100%; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 0.95em; margin-bottom: 10px; }
+select { background: var(--theme-color-background-panel, #fff); width: 100%; padding: 8px 12px; border: 1px solid var(--theme-color-border-default, #ccc); border-radius: 4px; font-size: 0.95em; margin-bottom: 10px; }
 
 table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
-th { text-align: left; font-weight: 600; padding: 8px; border-bottom: 2px solid #ddd; color: #555; }
-td { padding: 8px; border-bottom: 1px solid #eee; }
-tr:hover { background: #fafafa; }
+th { text-align: left; font-weight: 600; padding: 8px; border-bottom: 2px solid var(--theme-color-border-default, #ddd); color: var(--theme-color-text-secondary, #555); }
+td { padding: 8px; border-bottom: 1px solid var(--theme-color-border-light, #eee); }
+tr:hover { background: var(--theme-color-background-secondary, #fafafa); }
 
 .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.8em; font-weight: 600; }
 .badge-raw { background: #d1ecf1; color: #0c5460; }
@@ -152,7 +152,7 @@ tr:hover { background: #fafafa; }
 .certainty-fill { height: 100%; border-radius: 4px; }
 .certainty-low { background: #dc3545; }
 .certainty-mid { background: #ffc107; }
-.certainty-high { background: #28a745; }
+.certainty-high { background: var(--theme-color-status-success, #28a745); }
 `,
 	Templates:
 	[
@@ -160,7 +160,7 @@ tr:hover { background: #fafafa; }
 			Hash: 'Facto-Layout',
 			Template: /*html*/`
 <h1>Retold Facto</h1>
-<p style="color:#666; margin-bottom:20px; font-size:0.95em;">Data Warehouse &amp; Knowledge Graph Storage</p>
+<p style="color:var(--theme-color-text-secondary, #666); margin-bottom:20px; font-size:0.95em;">Data Warehouse &amp; Knowledge Graph Storage</p>
 
 <!-- Expand / Collapse All -->
 <div class="accordion-controls">

package/source/services/web-app/pict-app/views/PictView-Facto-Projections.js

@@ -30,7 +30,7 @@ class FactoProjectionsView extends libPictView
 
 				if (pResponse.DatasetsByType)
 				{
-					tmpHtml += '<tr><td colspan="4" style="padding-top:12px; font-weight:600; border-bottom:2px solid #ddd;">Datasets by Type</td></tr>';
+					tmpHtml += '<tr><td colspan="4" style="padding-top:12px; font-weight:600; border-bottom:2px solid var(--theme-color-border-default, #ddd);">Datasets by Type</td></tr>';
 					tmpHtml += '<tr>';
 					tmpHtml += '<td><span class="badge badge-raw">Raw</span></td><td>' + (pResponse.DatasetsByType.Raw || 0) + '</td>';
 					tmpHtml += '<td><span class="badge badge-compositional">Compositional</span></td><td>' + (pResponse.DatasetsByType.Compositional || 0) + '</td>';
@@ -132,7 +132,7 @@ class FactoProjectionsView extends libPictView
 
 		if (!pResponse || !pResponse.Records || pResponse.Records.length === 0)
 		{
-			tmpContainer.innerHTML = '<p style="color:#888; font-style:italic;">No records match the query.</p>';
+			tmpContainer.innerHTML = '<p style="color:var(--theme-color-text-muted, #888); font-style:italic;">No records match the query.</p>';
 			return;
 		}
 
@@ -179,12 +179,12 @@ module.exports.default_configuration =
 			<span class="accordion-toggle">&#9660;</span>
 		</div>
 		<div class="accordion-body">
-			<p style="margin-bottom:12px; color:#666; font-size:0.9em;">Query across datasets, compare data, and view warehouse-wide statistics.</p>
+			<p style="margin-bottom:12px; color:var(--theme-color-text-secondary, #666); font-size:0.9em;">Query across datasets, compare data, and view warehouse-wide statistics.</p>
 
-			<h3 style="margin-bottom:8px; font-size:1em; color:#444;">Warehouse Summary</h3>
-			<div id="facto-projections-summary" style="margin-bottom:16px;"><p style="color:#888; font-style:italic;">Loading...</p></div>
+			<h3 style="margin-bottom:8px; font-size:1em; color:var(--theme-color-text-secondary, #444);">Warehouse Summary</h3>
+			<div id="facto-projections-summary" style="margin-bottom:16px;"><p style="color:var(--theme-color-text-muted, #888); font-style:italic;">Loading...</p></div>
 
-			<h3 style="margin-top:16px; margin-bottom:8px; font-size:1em; color:#444;">Cross-Dataset Query</h3>
+			<h3 style="margin-top:16px; margin-bottom:8px; font-size:1em; color:var(--theme-color-text-secondary, #444);">Cross-Dataset Query</h3>
 			<div class="inline-group">
 				<div>
 					<label for="facto-proj-dataset-ids">Dataset IDs (comma-separated)</label>

package/source/services/web-app/pict-app/views/PictView-Facto-Records.js

@@ -28,7 +28,7 @@ class FactoRecordsView extends libPictView
 		let tmpRecords = this.pict.AppData.Facto.Records;
 		if (!tmpRecords || tmpRecords.length === 0)
 		{
-			tmpContainer.innerHTML = '<p style="color:#888; font-style:italic;">No records ingested yet.</p>';
+			tmpContainer.innerHTML = '<p style="color:var(--theme-color-text-muted, #888); font-style:italic;">No records ingested yet.</p>';
 			return;
 		}
 
@@ -58,7 +58,7 @@ class FactoRecordsView extends libPictView
 		{
 			tmpHtml += '<button class="secondary" style="padding:4px 12px; font-size:0.85em;" onclick="pict.views[\'Facto-Records\'].changePage(' + (tmpPage - 1) + ')">&#9664; Previous</button>';
 		}
-		tmpHtml += '<span style="color:#888; font-size:0.85em;">Page ' + (tmpPage + 1) + '</span>';
+		tmpHtml += '<span style="color:var(--theme-color-text-muted, #888); font-size:0.85em;">Page ' + (tmpPage + 1) + '</span>';
 		if (tmpRecords.length >= this.pict.AppData.Facto.RecordPageSize)
 		{
 			tmpHtml += '<button class="secondary" style="padding:4px 12px; font-size:0.85em;" onclick="pict.views[\'Facto-Records\'].changePage(' + (tmpPage + 1) + ')">Next &#9654;</button>';
@@ -307,7 +307,7 @@ module.exports.default_configuration =
 			<span class="accordion-toggle">&#9660;</span>
 		</div>
 		<div class="accordion-body">
-			<p style="margin-bottom:12px; color:#666; font-size:0.9em;">Individual data records with versioning, certainty indices, and temporal metadata.</p>
+			<p style="margin-bottom:12px; color:var(--theme-color-text-secondary, #666); font-size:0.9em;">Individual data records with versioning, certainty indices, and temporal metadata.</p>
 			<div id="facto-records-list"></div>
 		</div>
 	</div>

package/source/services/web-app/pict-app/views/PictView-Facto-Scanner.js

@@ -40,7 +40,7 @@ class FactoScannerView extends libPictView
 
 		if (tmpPaths.length === 0)
 		{
-			tmpContainer.innerHTML = '<p style="color:#888; font-style:italic;">No scan paths configured. Add a folder path to discover datasets.</p>';
+			tmpContainer.innerHTML = '<p style="color:var(--theme-color-text-muted, #888); font-style:italic;">No scan paths configured. Add a folder path to discover datasets.</p>';
 			return;
 		}
 
@@ -71,7 +71,7 @@ class FactoScannerView extends libPictView
 
 		if (tmpDatasets.length === 0)
 		{
-			tmpContainer.innerHTML = '<p style="color:#888; font-style:italic;">No datasets discovered yet. Add a scan path containing dataset folders with README.md files.</p>';
+			tmpContainer.innerHTML = '<p style="color:var(--theme-color-text-muted, #888); font-style:italic;">No datasets discovered yet. Add a scan path containing dataset folders with README.md files.</p>';
 			this.updateSummary(0, 0, 0, 0);
 			return;
 		}
@@ -154,7 +154,7 @@ class FactoScannerView extends libPictView
 			tmpHtml += '</tr>';
 		}
 		tmpHtml += '</tbody></table>';
-		tmpHtml += '<p style="color:#888; font-size:0.85em; margin-top:8px;">Showing ' + tmpFiltered.length + ' of ' + tmpDatasets.length + ' dataset(s)</p>';
+		tmpHtml += '<p style="color:var(--theme-color-text-muted, #888); font-size:0.85em; margin-top:8px;">Showing ' + tmpFiltered.length + ' of ' + tmpDatasets.length + ' dataset(s)</p>';
 
 		tmpContainer.innerHTML = tmpHtml;
 	}
@@ -423,7 +423,7 @@ class FactoScannerView extends libPictView
 		let tmpContainer = document.getElementById('facto-scanner-detail');
 		if (!tmpContainer) return;
 
-		tmpContainer.innerHTML = '<p style="color:#888;">Loading details for ' + this.escapeHtml(pFolderName) + '...</p>';
+		tmpContainer.innerHTML = '<p style="color:var(--theme-color-text-muted, #888);">Loading details for ' + this.escapeHtml(pFolderName) + '...</p>';
 
 		this.pict.providers.Facto.loadScannerDatasetDetail(pFolderName).then(
 			(pDS) =>
@@ -434,9 +434,9 @@ class FactoScannerView extends libPictView
 					return;
 				}
 
-				let tmpHtml = '<div style="border:1px solid #ddd; border-radius:6px; padding:16px; background:#fafafa;">';
+				let tmpHtml = '<div style="border:1px solid var(--theme-color-border-default, #ddd); border-radius:6px; padding:16px; background:var(--theme-color-background-secondary, #fafafa);">';
 				tmpHtml += '<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">';
-				tmpHtml += '<h3 style="margin:0; font-size:1.1em; color:#333;">' + this.escapeHtml(pDS.Title || pDS.FolderName) + '</h3>';
+				tmpHtml += '<h3 style="margin:0; font-size:1.1em; color:var(--theme-color-text-primary, #333);">' + this.escapeHtml(pDS.Title || pDS.FolderName) + '</h3>';
 				tmpHtml += '<button class="secondary" style="padding:4px 10px; font-size:0.82em;" onclick="document.getElementById(\'facto-scanner-detail\').innerHTML=\'\';">Close</button>';
 				tmpHtml += '</div>';
 
@@ -471,7 +471,7 @@ class FactoScannerView extends libPictView
 				// Description
 				if (pDS.Description)
 				{
-					tmpHtml += '<div style="margin-bottom:12px;"><strong>Description:</strong><div style="color:#555; font-size:0.9em; margin-top:4px; max-height:100px; overflow-y:auto; white-space:pre-wrap;">' + this.escapeHtml(pDS.Description.substring(0, 500)) + '</div></div>';
+					tmpHtml += '<div style="margin-bottom:12px;"><strong>Description:</strong><div style="color:var(--theme-color-text-secondary, #555); font-size:0.9em; margin-top:4px; max-height:100px; overflow-y:auto; white-space:pre-wrap;">' + this.escapeHtml(pDS.Description.substring(0, 500)) + '</div></div>';
 				}
 
 				// Data files
@@ -492,7 +492,7 @@ class FactoScannerView extends libPictView
 					}
 					if (pDS.DataFiles.length > 20)
 					{
-						tmpHtml += '<tr><td colspan="4" style="color:#888;">...and ' + (pDS.DataFiles.length - 20) + ' more file(s)</td></tr>';
+						tmpHtml += '<tr><td colspan="4" style="color:var(--theme-color-text-muted, #888);">...and ' + (pDS.DataFiles.length - 20) + ' more file(s)</td></tr>';
 					}
 					tmpHtml += '</tbody></table></div>';
 				}
@@ -561,10 +561,10 @@ module.exports.default_configuration =
 			<span class="accordion-toggle">&#9660;</span>
 		</div>
 		<div class="accordion-body">
-			<p style="margin-bottom:12px; color:#666; font-size:0.9em;">Point the scanner at folder trees containing dataset research (README.md + data/). Discovered datasets can be provisioned into the database individually or in bulk.</p>
+			<p style="margin-bottom:12px; color:var(--theme-color-text-secondary, #666); font-size:0.9em;">Point the scanner at folder trees containing dataset research (README.md + data/). Discovered datasets can be provisioned into the database individually or in bulk.</p>
 
 			<!-- Summary -->
-			<div id="facto-scanner-summary" style="margin-bottom:12px; padding:8px 12px; background:#e9ecef; border-radius:4px; font-size:0.9em; color:#555;">
+			<div id="facto-scanner-summary" style="margin-bottom:12px; padding:8px 12px; background:#e9ecef; border-radius:4px; font-size:0.9em; color:var(--theme-color-text-secondary, #555);">
 				No datasets loaded
 			</div>