meadow-integration 1.0.40 → 1.0.41

package/example-applications/mapping-demo/package.json

@@ -5,10 +5,34 @@
 	"main": "server.js",
 	"scripts": {
 		"start": "node server.js",
+		"brand": "node ../../node_modules/pict-section-theme/bin/pict-section-theme-brand.js --palette forest --display-name \"Mapping Demo\" --tagline \"Meadow-Integration mapping editor showcase\" --favicons web/favicons",
+		"prebuild": "npm run brand",
 		"build": "node generate-build-config.js && ../../node_modules/.bin/quack build",
 		"demo": "npm run build && node server.js"
 	},
 	"author": "steven velozo <steven@velozo.com>",
 	"license": "MIT",
-	"dependencies": {}
+	"retold": {
+		"brand": {
+			"Hash": "mapping-demo",
+			"Name": "Mapping Demo",
+			"Tagline": "Meadow-Integration mapping editor showcase",
+			"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-mapping-demo-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=\"#55af3b\"/>\n\t\t<g clip-path=\"url(#frame-mapping-demo-filled-light)\"><circle cx=\"37.5\" cy=\"48\" r=\"30\" fill=\"#ddc536\" opacity=\"0.85\"/>\n\t\t\t\t\t<circle cx=\"58.5\" cy=\"48\" r=\"30\" fill=\"rgba(255,255,255,0.32)\" opacity=\"0.95\"/></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=\"600\"\n\t\t\tfill=\"#ffffff\" letter-spacing=\"-1\">MD</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-mapping-demo-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=\"#55af3b\"/>\n\t\t<g clip-path=\"url(#fav-mapping-demo-light)\"><circle cx=\"37.5\" cy=\"48\" r=\"34\" fill=\"#ddc536\"/>\n\t\t\t\t\t<circle cx=\"58.5\" cy=\"48\" r=\"34\" 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\">M</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-mapping-demo-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=\"#8dcb7b\"/>\n\t\t<g clip-path=\"url(#fav-mapping-demo-dark)\"><circle cx=\"37.5\" cy=\"48\" r=\"34\" fill=\"#e6d989\"/>\n\t\t\t\t\t<circle cx=\"58.5\" cy=\"48\" r=\"34\" 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\">M</text>\n\t</svg>",
+			"Colors": {
+				"Primary": "#55af3b",
+				"Secondary": "#ddc536",
+				"PrimaryLight": "#55af3b",
+				"PrimaryDark": "#8dcb7b",
+				"SecondaryLight": "#ddc536",
+				"SecondaryDark": "#e6d989"
+			}
+		}
+	},
+	"devDependencies": {
+		"retold-sharp": "^1.0.0"
+	}
 }

package/example-applications/mapping-demo/server.js

@@ -317,6 +317,34 @@ function registerStaticRoutes(pOrator)
 			pResponse.end(tmpContent);
 			return fNext();
 		});
+
+	// ── Favicons (generated by `npm run brand` into web/favicons/) ──
+	let tmpFaviconDir = libPath.join(WEB_DIR, 'favicons');
+	let fServeFavicon = (pFileName, pContentType) =>
+	{
+		return function(pRequest, pResponse, fNext)
+		{
+			let tmpFile = libPath.join(tmpFaviconDir, pFileName);
+			if (!libFS.existsSync(tmpFile))
+			{
+				pResponse.send(404, { Success: false, Error: 'Favicon not found: ' + pFileName });
+				return fNext();
+			}
+			let tmpIsBinary = !/\.svg$/i.test(pFileName);
+			let tmpContent = libFS.readFileSync(tmpFile, tmpIsBinary ? null : 'utf8');
+			pResponse.setHeader('Content-Type', pContentType);
+			pResponse.end(tmpContent);
+			return fNext();
+		};
+	};
+	pOrator.serviceServer.get('/favicons/favicon.svg',          fServeFavicon('favicon.svg',          'image/svg+xml'));
+	pOrator.serviceServer.get('/favicons/favicon-light.svg',    fServeFavicon('favicon-light.svg',    'image/svg+xml'));
+	pOrator.serviceServer.get('/favicons/favicon-dark.svg',     fServeFavicon('favicon-dark.svg',     'image/svg+xml'));
+	pOrator.serviceServer.get('/favicons/favicon-16.png',       fServeFavicon('favicon-16.png',       'image/png'));
+	pOrator.serviceServer.get('/favicons/favicon-32.png',       fServeFavicon('favicon-32.png',       'image/png'));
+	pOrator.serviceServer.get('/favicons/favicon-192.png',      fServeFavicon('favicon-192.png',      'image/png'));
+	pOrator.serviceServer.get('/favicons/favicon-512.png',      fServeFavicon('favicon-512.png',      'image/png'));
+	pOrator.serviceServer.get('/favicons/apple-touch-icon.png', fServeFavicon('apple-touch-icon.png', 'image/png'));
 }
 
 // ── Route: GET /1.0/Demo/SourceSchema ────────────────────────────────────────

package/example-applications/mapping-demo/source/MappingDemoApp.js

@@ -1,16 +1,25 @@
 'use strict';
 
 const libPictApplication = require('pict-application');
+
+const libPictSectionModal = require('pict-section-modal');
+const libPictSectionTheme = require('pict-section-theme');
+
+const libMappingDemoBrand = require('./MappingDemoBrand.js');
 const libMappingDemoEditorView = require('./views/MappingDemoEditorView.js');
 
 /**
  * MappingDemoApplication
  *
- * Minimal pict application that hosts the MappingDemoEditorView.
+ * Pict application that hosts the MappingDemoEditorView and brings up
+ * the unified pict-section-theme stack so visitors can flip themes and
+ * watch the embedded MeadowMappingEditor library view reskin live.
+ *
  * Loaded client-side by Pict.safeLoadPictApplication(MappingDemoApplication, 2).
  *
- * After initialization it exposes window.openMappingEditor() so the static
- * HTML pipeline UI can activate the visual editor from a plain onclick handler.
+ * After initialization it exposes window.openMappingEditor() so the
+ * static HTML pipeline UI can activate the visual editor from a plain
+ * onclick handler.
  */
 class MappingDemoApplication extends libPictApplication
 {
@@ -18,14 +27,44 @@ class MappingDemoApplication extends libPictApplication
 	{
 		super(pFable, pOptions, pServiceHash);
 
+		// Modal system (confirm dialogs the editor may pop)
+		this.pict.addView('Pict-Section-Modal', libPictSectionModal.default_configuration, libPictSectionModal);
+
 		this.pict.addView(
 			'MappingDemoEditor',
 			libMappingDemoEditorView.default_configuration,
 			libMappingDemoEditorView);
+
+		// Unified theme stack — the demo's whole point is to prove the
+		// library view picks up theme tokens, so the picker is exposed
+		// inline in the page header (not behind a gear toggle). Just
+		// register the runtime here; mount the controls in onAfterInitializeAsync
+		// once the destination div exists in the DOM.
+		this.pict.addProvider('Theme-Section',
+			{
+				ApplyDefault: 'pict-default',
+				DefaultMode:  'system',
+				DefaultScale: 1.0,
+				Brand:        libMappingDemoBrand,
+				Views: ['Picker', 'ModeToggle', 'ScaleSelect', 'BrandMark']
+			}, libPictSectionTheme);
 	}
 
 	onAfterInitializeAsync(fCallback)
 	{
+		// Mount the theme controls directly into the header strip so users
+		// can switch themes and watch every surface (the static HTML
+		// pipeline UI + the embedded library editor) reskin in lockstep.
+		let tmpThemeProvider = this.pict.providers['Theme-Section'];
+		if (tmpThemeProvider && typeof tmpThemeProvider.mount === 'function')
+		{
+			tmpThemeProvider.mount(
+			{
+				Container: '#MappingDemo-Theme-Controls',
+				Views: ['Picker', 'ModeToggle', 'ScaleSelect']
+			});
+		}
+
 		// Expose a global hook so the outer HTML can open the editor
 		window.openMappingEditor = () =>
 		{

package/example-applications/mapping-demo/source/MappingDemoBrand.js

@@ -0,0 +1,17 @@
+'use strict';
+
+/**
+ * Brand wrapper for the mapping-demo Pict app. Reads the retold.brand
+ * block populated by `npm run brand` (which invokes
+ * pict-section-theme/bin/pict-section-theme-brand.js with the forest
+ * palette) and exposes it for the Theme-Section provider's BrandMark.
+ */
+const tmpPackage = require('../package.json');
+
+if (!tmpPackage.retold || !tmpPackage.retold.brand)
+{
+	throw new Error('mapping-demo: package.json is missing retold.brand — '
+		+ 'run `npm run brand` (chained from prebuild) before building');
+}
+
+module.exports = tmpPackage.retold.brand;

package/example-applications/mapping-demo/web/favicons/favicon-dark.svg

@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="96" height="96">
+		<defs>
+			<clipPath id="fav-mapping-demo-dark">
+				<path d="M 24 2
+		H 72
+		Q 94 2 94 24
+		V 72
+		Q 94 94 72 94
+		H 24
+		Q 2 94 2 72
+		V 24
+		Q 2 2 24 2 Z"/>
+			</clipPath>
+		</defs>
+		<path d="M 24 2
+		H 72
+		Q 94 2 94 24
+		V 72
+		Q 94 94 72 94
+		H 24
+		Q 2 94 2 72
+		V 24
+		Q 2 2 24 2 Z" fill="#8dcb7b"/>
+		<g clip-path="url(#fav-mapping-demo-dark)"><circle cx="37.5" cy="48" r="34" fill="#e6d989"/>
+					<circle cx="58.5" cy="48" r="34" fill="rgba(255,255,255,0.22)"/></g>
+		<text x="48" y="50" text-anchor="middle" dominant-baseline="central"
+			font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+			font-size="60" font-weight="800"
+			fill="#101418" letter-spacing="-1">M</text>
+	</svg>

package/example-applications/mapping-demo/web/favicons/favicon-light.svg

@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="96" height="96">
+		<defs>
+			<clipPath id="fav-mapping-demo-light">
+				<path d="M 24 2
+		H 72
+		Q 94 2 94 24
+		V 72
+		Q 94 94 72 94
+		H 24
+		Q 2 94 2 72
+		V 24
+		Q 2 2 24 2 Z"/>
+			</clipPath>
+		</defs>
+		<path d="M 24 2
+		H 72
+		Q 94 2 94 24
+		V 72
+		Q 94 94 72 94
+		H 24
+		Q 2 94 2 72
+		V 24
+		Q 2 2 24 2 Z" fill="#55af3b"/>
+		<g clip-path="url(#fav-mapping-demo-light)"><circle cx="37.5" cy="48" r="34" fill="#ddc536"/>
+					<circle cx="58.5" cy="48" r="34" fill="rgba(255,255,255,0.22)"/></g>
+		<text x="48" y="50" text-anchor="middle" dominant-baseline="central"
+			font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+			font-size="60" font-weight="800"
+			fill="#ffffff" letter-spacing="-1">M</text>
+	</svg>

package/example-applications/mapping-demo/web/favicons/favicon.svg

@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="96" height="96">
+		<defs>
+			<clipPath id="fav-mapping-demo-light">
+				<path d="M 24 2
+		H 72
+		Q 94 2 94 24
+		V 72
+		Q 94 94 72 94
+		H 24
+		Q 2 94 2 72
+		V 24
+		Q 2 2 24 2 Z"/>
+			</clipPath>
+		</defs>
+		<path d="M 24 2
+		H 72
+		Q 94 2 94 24
+		V 72
+		Q 94 94 72 94
+		H 24
+		Q 2 94 2 72
+		V 24
+		Q 2 2 24 2 Z" fill="#55af3b"/>
+		<g clip-path="url(#fav-mapping-demo-light)"><circle cx="37.5" cy="48" r="34" fill="#ddc536"/>
+					<circle cx="58.5" cy="48" r="34" fill="rgba(255,255,255,0.22)"/></g>
+		<text x="48" y="50" text-anchor="middle" dominant-baseline="central"
+			font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+			font-size="60" font-weight="800"
+			fill="#ffffff" letter-spacing="-1">M</text>
+	</svg>

package/example-applications/mapping-demo/web/index.html

@@ -4,23 +4,35 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Meadow-Integration Pipeline Demo</title>
+<!-- Favicons (generated by `npm run brand`) -->
+<link rel="icon" type="image/svg+xml" href="favicons/favicon.svg">
+<link rel="icon" type="image/svg+xml" href="favicons/favicon-light.svg" media="(prefers-color-scheme: light)">
+<link rel="icon" type="image/svg+xml" href="favicons/favicon-dark.svg"  media="(prefers-color-scheme: dark)">
 <style id="PICT-CSS"></style>
 <style>
+	/* :root bridge — alias the demo's local vocabulary onto the
+	   --theme-color-* tokens driven by pict-section-theme so every
+	   surface (this static HTML + the embedded MeadowMappingEditor
+	   library view) reskins together when the user picks a theme.
+	   Hex fallbacks preserve the original look when no provider is
+	   mounted (e.g. when the bundle is served as a plain demo). */
 	:root {
-		--brand:        #18a5a0;
-		--brand-dark:   #127b77;
-		--bg:           #f5efe4;
-		--bg-surface:   #fdf8f0;
-		--bg-card:      #ffffff;
-		--text:         #3a3020;
-		--text-mid:     #6b5c45;
-		--text-dim:     #a09070;
-		--border:       #d6c8ae;
-		--border-sub:   #ece3d0;
-		--success:      #2ecc71;
-		--error:        #e74c3c;
-		--warn:         #f39c12;
-		--step-1:       #18a5a0;
+		--brand:        var(--theme-color-brand-primary,        #18a5a0);
+		--brand-dark:   var(--theme-color-brand-primary-hover,  #127b77);
+		--bg:           var(--theme-color-background-primary,   #f5efe4);
+		--bg-surface:   var(--theme-color-background-secondary, #fdf8f0);
+		--bg-card:      var(--theme-color-background-panel,     #ffffff);
+		--text:         var(--theme-color-text-primary,         #3a3020);
+		--text-mid:     var(--theme-color-text-secondary,       #6b5c45);
+		--text-dim:     var(--theme-color-text-muted,           #a09070);
+		--border:       var(--theme-color-border-default,       #d6c8ae);
+		--border-sub:   var(--theme-color-border-light,         #ece3d0);
+		--success:      var(--theme-color-status-success,       #2ecc71);
+		--error:        var(--theme-color-status-error,         #e74c3c);
+		--warn:         var(--theme-color-status-warning,       #f39c12);
+		/* Step colors stay distinct hex literals — they encode pipeline
+		   stage identity, not theme palette. */
+		--step-1:       var(--theme-color-brand-primary,        #18a5a0);
 		--step-2:       #3498db;
 		--step-3:       #c0392b;
 		--step-4:       #9b59b6;
@@ -35,18 +47,19 @@
 	.meadow-mapping-editor.active {
 		display: block;
 	}
-	/* Override facto-specific CSS vars with demo theme equivalents */
-	.meadow-mapping-editor,
-	.meadow-flow-container,
-	.meadow-mapping-btn,
-	.meadow-mapping-json-editor {
-		--facto-brand:          var(--brand);
-		--facto-border:         var(--border);
-		--facto-border-subtle:  var(--border-sub);
-		--facto-bg-surface:     var(--bg-surface);
-		--facto-bg-input:       var(--bg-card);
-		--facto-text:           var(--text);
-		--facto-text-tertiary:  var(--text-dim);
+
+	/* ── Inline theme-controls strip in the header ── */
+	#MappingDemo-Theme-Controls {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		flex-wrap: wrap;
+	}
+	#MappingDemo-Theme-Controls .pict-theme-mount,
+	#MappingDemo-Theme-Controls .pict-theme-mount-row {
+		display: flex;
+		align-items: center;
+		gap: 8px;
 	}
 
 	* { box-sizing: border-box; margin: 0; padding: 0; }
@@ -323,6 +336,7 @@
 		<h1>Meadow-Integration Pipeline Demo</h1>
 		<span class="subtitle">meadow-integration &rsaquo; example-applications/mapping-demo</span>
 	</div>
+	<div id="MappingDemo-Theme-Controls" title="Switch themes to see the embedded library view reskin"></div>
 	<span class="demo-badge">LIVE</span>
 </header>