pict-section-form 1.1.0 → 1.1.2

package/example_applications/diagram_form/DiagramForm-Example-Application.js

@@ -0,0 +1,145 @@
+/**
+ * DiagramForm-Example-Application.js
+ *
+ * Demonstrates the Diagram InputType from pict-section-excalidraw inside a
+ * pict-section-form. The form boots with every Diagram field in VIEW mode
+ * (inline themed SVG). A page button toggles into edit mode (Excalidraw).
+ *
+ * Theme demo:
+ *
+ *   The saved SVG carries `var(--diagram-ink, #1B1F23)` etc., with hex
+ *   fallbacks. A "Theme" button on the page swaps a <style> tag that defines
+ *   those custom properties — the view-mode SVG visibly recolors without
+ *   re-rendering anything. No editor bundle touched.
+ */
+
+const libPictApplication = require('pict-application');
+const libPictSectionForm = require('../../source/Pict-Section-Form.js');
+
+const _FormDescriptors =
+{
+	'ArchDiagram':
+	{
+		Name: 'Architecture Diagram',
+		Hash: 'ArchDiagram',
+		DataType: 'String',
+		PictForm:
+		{
+			Section:   'Diagram',
+			Row:       1,
+			Width:     12,
+			InputType: 'Diagram',
+			Diagram:
+			{
+				ThemeColors:          true,
+				Height:               '480px',
+				EditorImplementation: 'react'
+			}
+		}
+	}
+};
+
+// A minimal pre-baked SVG (notebook style, hex fallbacks already in place via
+// themeifySVG) so the form has something to display in view mode at boot. In a
+// real app this would come from the record being edited.
+const _DemoSvg =
+`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 200">
+	<metadata><!-- payload-type:application/vnd.excalidraw+json --><!-- payload-start --> e30= <!-- payload-end --></metadata>
+	<g>
+		<rect x="20"  y="40" width="100" height="50" rx="6" stroke="var(--diagram-ink, #1B1F23)" fill="var(--diagram-paper, #FDFCF7)" stroke-width="2"/>
+		<text x="70"  y="72" text-anchor="middle" style="fill: var(--diagram-ink, #1B1F23); font-family: sans-serif;">Client</text>
+
+		<path d="M 120 65 L 220 65" stroke="var(--diagram-accent, #E66C2C)" fill="none" stroke-width="2" marker-end="url(#arrow)"/>
+
+		<rect x="220" y="40" width="120" height="50" rx="6" stroke="var(--diagram-ink, #1B1F23)" fill="var(--diagram-paper, #FDFCF7)" stroke-width="2"/>
+		<text x="280" y="72" text-anchor="middle" style="fill: var(--diagram-ink, #1B1F23); font-family: sans-serif;">API Server</text>
+
+		<defs>
+			<marker id="arrow" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
+				<path d="M 0 0 L 8 4 L 0 8 z" fill="var(--diagram-accent, #E66C2C)"/>
+			</marker>
+		</defs>
+	</g>
+</svg>`;
+
+const _FormManifest =
+{
+	Scope: 'DiagramDemoForm',
+	Sections:
+	[
+		{ Hash: 'Diagram', Name: 'Architecture' }
+	],
+	Descriptors: _FormDescriptors
+};
+
+class DiagramFormApplication extends libPictSectionForm.PictFormApplication
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+
+		// Register the Diagram input provider. It lives in pict-section-form
+		// and lazy-requires pict-section-excalidraw on the first edit toggle —
+		// the view-mode SVG path doesn't load the editor bundle at all.
+		let libDiagramInput = libPictSectionForm.DiagramInput;
+		this.pict.addProvider(
+			libDiagramInput.default_configuration.ProviderIdentifier,
+			libDiagramInput.default_configuration,
+			libDiagramInput
+		);
+
+		this.pict.AppData.DiagramDemoForm = { ArchDiagram: _DemoSvg };
+	}
+
+	onAfterInitializeAsync(fCallback)
+	{
+		if (this.pict.views.PictFormMetacontroller)
+		{
+			this.pict.views.PictFormMetacontroller.viewMarshalDestination = 'AppData.DiagramDemoForm';
+		}
+		super.onAfterInitializeAsync(() =>
+		{
+			try { this.marshalDataFromAppDataToDynamicViews(); }
+			catch (pErr) { if (this.log) this.log.warn('[diagram_form] initial marshal failed', { error: pErr.message }); }
+			return fCallback();
+		});
+	}
+
+	demo_toggleMode(pInputHash)
+	{
+		let tmpProvider = this.pict.providers['Pict-Input-Diagram'];
+		if (!tmpProvider) return;
+		tmpProvider.toggleMode(pInputHash, (pErr) =>
+		{
+			if (pErr && this.log) this.log.warn('[diagram_form demo] toggleMode error', { error: pErr.message });
+			this._refreshModeLabel(pInputHash);
+		});
+	}
+
+	_refreshModeLabel(pInputHash)
+	{
+		let tmpProvider = this.pict.providers['Pict-Input-Diagram'];
+		if (!tmpProvider) return;
+		let tmpMode  = tmpProvider.getMode(pInputHash);
+		let tmpLabel = (tmpMode === 'edit') ? 'Done' : 'Edit';
+		let tmpBtn   = (typeof document !== 'undefined') ? document.getElementById('toggle-' + pInputHash) : null;
+		if (tmpBtn) tmpBtn.textContent = tmpLabel;
+	}
+}
+
+module.exports = DiagramFormApplication;
+
+// Extend the parent's default_configuration so MainViewportViewIdentifier
+// (= "PictFormMetacontroller") survives — without it the form has no
+// auto-render target and the page comes up blank.
+module.exports.default_configuration = Object.assign({},
+	libPictSectionForm.PictFormApplication.default_configuration,
+	{
+		Name: 'Diagram Form Example',
+		Hash: 'DiagramFormExample',
+		pict_configuration:
+		{
+			Product: 'DiagramForm-Example',
+			DefaultFormManifest: _FormManifest
+		}
+	});

package/example_applications/diagram_form/html/index.html

@@ -0,0 +1,116 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Diagram Form Input — Pict Example</title>
+
+	<style id="PICT-CSS"></style>
+	<style id="diagram-theme">
+		/* Theme tokens that the saved SVG resolves to. Default = notebook. */
+		:root
+		{
+			--diagram-ink:        #1B1F23;
+			--diagram-paper:      #FDFCF7;
+			--diagram-accent:     #E66C2C;
+			--diagram-highlight:  #FFD966;
+			--diagram-deemphasis: #A0A0A0;
+			--diagram-link:       #2E7D74;
+		}
+	</style>
+	<style>
+		*, *::before, *::after { box-sizing: border-box; }
+		body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #FAF8F4; color: #2A2520; }
+
+		.pict-example-header { display: flex; align-items: stretch; background: #264653; border-bottom: 3px solid #E76F51; }
+		.pict-example-badge { background: #E76F51; color: #FAEDCD; padding: 0.6rem 1rem; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
+		.pict-example-app-name { padding: 0.6rem 1rem; color: #FAEDCD; font-size: 1.1rem; font-weight: 600; }
+		.pict-example-module { margin-left: auto; padding: 0.6rem 1rem; color: #D4A373; font-size: 0.75rem; letter-spacing: 0.03em; align-self: center; }
+
+		.page-content { padding: 2rem; max-width: 920px; margin: 0 auto; }
+		.intro { color: #5A4A3C; font-size: 0.9rem; line-height: 1.6; margin-bottom: 24px; }
+		.intro code { background: #F0E8DA; padding: 1px 6px; border-radius: 3px; font-family: 'SFMono-Regular', Menlo, monospace; font-size: 0.85em; }
+
+		.controls { background: #FFFFFF; border: 1px solid #D4C4A8; border-radius: 6px; padding: 14px 16px; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 0.85rem; }
+		.controls button { padding: 6px 14px; font-size: 0.85rem; font-weight: 600; color: #FAEDCD; background: #264653; border: none; border-radius: 4px; cursor: pointer; }
+		.controls button:hover { background: #E76F51; }
+		.controls .swatch { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; background: #F4EEE2; border-radius: 4px; cursor: pointer; user-select: none; }
+		.controls .swatch::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.1); background: var(--swatch-color, #fff); }
+
+		#Pict-Form-Container { background: #FFFFFF; border: 1px solid #D4C4A8; border-radius: 6px; padding: 20px; min-height: 280px; }
+
+		.notes { margin-top: 24px; padding: 14px 16px; background: #FFF8E7; border-left: 3px solid #E9C46A; border-radius: 3px; font-size: 0.82rem; color: #5A4A3C; }
+		.notes strong { color: #2A2520; }
+	</style>
+</head>
+<body>
+	<header class="pict-example-header">
+		<span class="pict-example-badge">Pict Example</span>
+		<span class="pict-example-app-name">Diagram Form Input</span>
+		<span class="pict-example-module">pict-section-excalidraw</span>
+	</header>
+
+	<main class="page-content">
+		<p class="intro">
+			A pict-section-form field whose <code>InputType</code> is <code>Diagram</code>. Boots in
+			<strong>view</strong> mode — the saved SVG is written inline, with theme-driven colors.
+			Click <em>Edit</em> to flip into Excalidraw (lazy-loads the editor bundle the first time).
+			Click a theme swatch — the view-mode SVG visibly re-colors without a re-render.
+		</p>
+
+		<div class="controls">
+			<button id="toggle-ArchDiagram" onclick="_Pict.PictApplication.demo_toggleMode('ArchDiagram')">Edit</button>
+
+			<span class="swatch" style="--swatch-color:#1B1F23" onclick="window.applyTheme('notebook')">Notebook</span>
+			<span class="swatch" style="--swatch-color:#EAEAEA" onclick="window.applyTheme('dark')">Dark</span>
+			<span class="swatch" style="--swatch-color:#5DA9E9" onclick="window.applyTheme('blueprint')">Blueprint</span>
+		</div>
+
+		<div id="Pict-Form-Container"></div>
+
+		<div class="notes">
+			<strong>Verifying:</strong>
+			In view mode, change theme — the inline SVG re-colors via CSS only. In edit mode, draw
+			something + click <em>Done</em>; the new SVG is themeified on save, so it picks up the
+			same CSS variables. Inspect the hidden input's value in DevTools to see the
+			<code>var(--diagram-ink, #...)</code> rewriting in action.
+		</div>
+	</main>
+
+	<link rel="stylesheet" href="./excalidraw-wrapper.css">
+	<script src="./pict.min.js"></script>
+	<!-- Excalidraw vendor bundle (React + Excalidraw). The Diagram InputType's
+	     editor mode looks for window.PictSectionExcalidrawVendor; without these
+	     tags, switching the field to edit shows a "wrapper not loaded" notice. -->
+	<script src="./react-vendor.min.js"></script>
+	<script src="./excalidraw-wrapper.min.js"></script>
+	<script src="./diagram_form_example.min.js"></script>
+	<script>
+		const _Themes =
+		{
+			notebook:  { ink:'#1B1F23', paper:'#FDFCF7', accent:'#E66C2C', highlight:'#FFD966', deemphasis:'#A0A0A0', link:'#2E7D74' },
+			dark:      { ink:'#EAEAEA', paper:'#1B1F23', accent:'#FFB570', highlight:'#FFD966', deemphasis:'#666666', link:'#7FC4BD' },
+			blueprint: { ink:'#08296B', paper:'#E5F0FB', accent:'#5DA9E9', highlight:'#F4D35E', deemphasis:'#8AA3B6', link:'#1F77B4' }
+		};
+		window.applyTheme = function(pName)
+		{
+			let tmpStyle = document.getElementById('diagram-theme');
+			let tmpT = _Themes[pName] || _Themes.notebook;
+			tmpStyle.textContent =
+				':root { ' +
+				'--diagram-ink:'        + tmpT.ink        + ';' +
+				'--diagram-paper:'      + tmpT.paper      + ';' +
+				'--diagram-accent:'     + tmpT.accent     + ';' +
+				'--diagram-highlight:'  + tmpT.highlight  + ';' +
+				'--diagram-deemphasis:' + tmpT.deemphasis + ';' +
+				'--diagram-link:'       + tmpT.link       + ';' +
+				' }';
+		};
+
+		Pict.safeOnDocumentReady(() =>
+		{
+			Pict.safeLoadPictApplication(window.DiagramFormExample, 1);
+		});
+	</script>
+</body>
+</html>

package/example_applications/diagram_form/package.json

@@ -0,0 +1,29 @@
+{
+	"name": "diagram_form_example",
+	"version": "1.0.0",
+	"description": "Pict-section-form Diagram InputType demo — Excalidraw (edit mode) + inline themed SVG (view mode).",
+	"main": "DiagramForm-Example-Application.js",
+	"scripts": {
+		"start": "node DiagramForm-Example-Application.js",
+		"build": "npx quack build && npx quack copy"
+	},
+	"author": "steven velozo <steven@velozo.com>",
+	"license": "MIT",
+	"devDependencies": {},
+	"copyFilesSettings": {
+		"whenFileExists": "overwrite"
+	},
+	"copyFiles": [
+		{ "from": "./html/*",                                                            "to": "./dist/" },
+		{ "from": "../../node_modules/pict/dist/*",                                      "to": "./dist/" },
+		{ "from": "../../node_modules/pict-section-excalidraw/vendor/excalidraw-built/*", "to": "./dist/" }
+	],
+	"retold": {
+		"ExampleApplication": {
+			"Stage": true,
+			"Title": "Diagram Form Input",
+			"Summary": "A pict-section-form field whose InputType is Diagram — boots in view mode (inline SVG, theme-recolorable), toggles into edit mode (Excalidraw) on demand. Demonstrates the themeify pipeline: change the --diagram-* CSS variables and the view-mode SVG visibly re-colors without a re-render.",
+			"Complexity": "Intermediate"
+		}
+	}
+}

package/example_applications/richtext_form/RichTextForm-Example-Application.js

@@ -0,0 +1,176 @@
+/**
+ * RichTextForm-Example-Application.js
+ *
+ * Demonstrates the RichText InputType from pict-section-markdowneditor inside
+ * a pict-section-form. The form boots with every RichText field in VIEW mode
+ * (rendered markdown). A "Edit" button on the page calls
+ * `provider.setMode(hash, 'edit')` to flip a single field into the markdown
+ * editor; "Done" flips it back.
+ *
+ * Image handling has three live demo modes:
+ *   - AllowImages=false        → image paste is rejected with a toast
+ *   - AllowImages=true, no uploader → base64 inline (default editor behaviour)
+ *   - AllowImages=true + uploader   → a stubbed `uploadImage` on the application
+ *     hands back a fake CDN URL after 600ms.
+ */
+
+const libPictApplication = require('pict-application');
+const libPictSectionForm = require('../../source/Pict-Section-Form.js');
+
+const _FormDescriptors =
+{
+	'Body':
+	{
+		Name: 'Body',
+		Hash: 'Body',
+		DataType: 'String',
+		PictForm:
+		{
+			Section:   'Article',
+			Row:       1,
+			Width:     12,
+			InputType: 'RichText',
+			RichText:
+			{
+				AllowImages:   true,
+				ImageUploader: 'uploadImage',
+				Height:        '320px'
+			}
+		}
+	}
+};
+
+const _FormManifest =
+{
+	Scope: 'RichTextDemoForm',
+	Sections:
+	[
+		{
+			Hash: 'Article',
+			Name: 'Article Body'
+		}
+	],
+	Descriptors: _FormDescriptors
+};
+
+class RichTextFormApplication extends libPictSectionForm.PictFormApplication
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+
+		// Register the RichText input provider. The provider lives in
+		// pict-section-form (where the InputType + form templates are defined);
+		// it lazy-requires pict-section-markdowneditor on the first edit toggle
+		// so a never-edited form pays nothing for CodeMirror.
+		let libRichTextInput = libPictSectionForm.RichTextInput;
+		this.pict.addProvider(
+			libRichTextInput.default_configuration.ProviderIdentifier,
+			libRichTextInput.default_configuration,
+			libRichTextInput
+		);
+
+		// Seed AppData with a record so the form has something to render in view mode.
+		this.pict.AppData.RichTextDemoForm =
+		{
+			Body: '## Welcome\n\nThis form is in **view** mode by default. Click *Edit* to swap a field into the markdown editor.\n\n- Boot-time DOM is just rendered markdown — no CodeMirror loaded.\n- First `setMode("edit")` lazy-loads the editor bundle.\n- Image uploads are routed through `uploadImage(file, descriptor, cb)`.'
+		};
+
+		// Allow-images toggle backing flag (read by uploadImage stub).
+		this._imageUploaderEnabled = true;
+	}
+
+	onAfterInitializeAsync(fCallback)
+	{
+		if (this.pict.views.PictFormMetacontroller)
+		{
+			this.pict.views.PictFormMetacontroller.viewMarshalDestination = 'AppData.RichTextDemoForm';
+		}
+		super.onAfterInitializeAsync(() =>
+		{
+			try { this.marshalDataFromAppDataToDynamicViews(); }
+			catch (pErr) { if (this.log) this.log.warn('[richtext_form] initial marshal failed', { error: pErr.message }); }
+			return fCallback();
+		});
+	}
+
+	/**
+	 * Stubbed image uploader. Resolves to a fake CDN URL after a brief delay so
+	 * the demo shows the upload-in-progress UX. Real apps wire this to their own
+	 * storage (S3, a content-delivery API, etc.).
+	 *
+	 * The signature matches the pict-section-markdowneditor onImageUpload
+	 * contract: return true if we'll handle it; call fCallback(err, url).
+	 */
+	uploadImage(pFile, pDescriptor, fCallback)
+	{
+		if (!this._imageUploaderEnabled)
+		{
+			// Returning false from the inner provider tells the markdown editor
+			// to fall through to base64 inline.
+			return false;
+		}
+
+		setTimeout(() =>
+		{
+			let tmpFakeURL = '/uploads/' + Date.now() + '-' + (pFile.name || 'image.png').replace(/[^A-Za-z0-9._-]/g, '_');
+			fCallback(null, tmpFakeURL);
+			if (this.log) this.log.info('[richtext_form demo] uploadImage resolved', { url: tmpFakeURL });
+		}, 600);
+
+		return true;
+	}
+
+	// ----------------------------------------------------------------------------
+	// Demo control surface — invoked from inline onclick handlers in index.html.
+	// ----------------------------------------------------------------------------
+
+	demo_toggleMode(pInputHash)
+	{
+		let tmpProvider = this.pict.providers['Pict-Input-RichText'];
+		if (!tmpProvider) return;
+		tmpProvider.toggleMode(pInputHash, (pErr) =>
+		{
+			if (pErr && this.log) this.log.warn('[richtext_form demo] toggleMode error', { error: pErr.message });
+			this._refreshModeLabel(pInputHash);
+		});
+	}
+
+	demo_setAllowImages(pInputHash, pAllowed)
+	{
+		let tmpDescriptor = _FormDescriptors[pInputHash];
+		if (tmpDescriptor) tmpDescriptor.PictForm.RichText.AllowImages = !!pAllowed;
+	}
+
+	demo_setUploaderEnabled(pEnabled)
+	{
+		this._imageUploaderEnabled = !!pEnabled;
+	}
+
+	_refreshModeLabel(pInputHash)
+	{
+		let tmpProvider = this.pict.providers['Pict-Input-RichText'];
+		if (!tmpProvider) return;
+		let tmpMode  = tmpProvider.getMode(pInputHash);
+		let tmpLabel = (tmpMode === 'edit') ? 'Done' : 'Edit';
+		let tmpBtn   = (typeof document !== 'undefined') ? document.getElementById('toggle-' + pInputHash) : null;
+		if (tmpBtn) tmpBtn.textContent = tmpLabel;
+	}
+}
+
+module.exports = RichTextFormApplication;
+
+// Extend the parent's default_configuration so MainViewportViewIdentifier
+// (= "PictFormMetacontroller") survives — without it the form has no
+// auto-render target and the page comes up blank.
+module.exports.default_configuration = Object.assign({},
+	libPictSectionForm.PictFormApplication.default_configuration,
+	{
+		Name: 'RichText Form Example',
+		Hash: 'RichTextFormExample',
+		pict_configuration:
+		{
+			Product: 'RichTextForm-Example',
+			DefaultFormManifest: _FormManifest
+		}
+	});

package/example_applications/richtext_form/html/index.html

@@ -0,0 +1,82 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>RichText Form Input — Pict Example</title>
+
+	<style id="PICT-CSS"></style>
+	<style>
+		*, *::before, *::after { box-sizing: border-box; }
+		body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #FAF8F4; color: #2A2520; }
+
+		.pict-example-header { display: flex; align-items: stretch; background: #264653; border-bottom: 3px solid #E76F51; }
+		.pict-example-badge { background: #E76F51; color: #FAEDCD; padding: 0.6rem 1rem; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
+		.pict-example-app-name { padding: 0.6rem 1rem; color: #FAEDCD; font-size: 1.1rem; font-weight: 600; }
+		.pict-example-module { margin-left: auto; padding: 0.6rem 1rem; color: #D4A373; font-size: 0.75rem; letter-spacing: 0.03em; align-self: center; }
+
+		.page-content { padding: 2rem; max-width: 920px; margin: 0 auto; }
+		.intro { color: #5A4A3C; font-size: 0.9rem; line-height: 1.6; margin-bottom: 24px; }
+		.intro code { background: #F0E8DA; padding: 1px 6px; border-radius: 3px; font-family: 'SFMono-Regular', Menlo, monospace; font-size: 0.85em; }
+
+		.controls { background: #FFFFFF; border: 1px solid #D4C4A8; border-radius: 6px; padding: 14px 16px; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 0.85rem; }
+		.controls label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
+		.controls button { padding: 6px 14px; font-size: 0.85rem; font-weight: 600; color: #FAEDCD; background: #264653; border: none; border-radius: 4px; cursor: pointer; }
+		.controls button:hover { background: #E76F51; }
+
+		#Pict-Form-Container { background: #FFFFFF; border: 1px solid #D4C4A8; border-radius: 6px; padding: 20px; }
+
+		/* The form has one section + one input. */
+		.notes { margin-top: 24px; padding: 14px 16px; background: #FFF8E7; border-left: 3px solid #E9C46A; border-radius: 3px; font-size: 0.82rem; color: #5A4A3C; }
+		.notes strong { color: #2A2520; }
+	</style>
+</head>
+<body>
+	<header class="pict-example-header">
+		<span class="pict-example-badge">Pict Example</span>
+		<span class="pict-example-app-name">RichText Form Input</span>
+		<span class="pict-example-module">pict-section-markdowneditor</span>
+	</header>
+
+	<main class="page-content">
+		<p class="intro">
+			A pict-section-form field whose <code>InputType</code> is <code>RichText</code>. Boots in
+			<strong>view</strong> mode — just rendered markdown, no CodeMirror loaded. Click <em>Edit</em>
+			to flip into the editor (lazy-loads the markdown editor bundle on first toggle).
+		</p>
+
+		<div class="controls">
+			<button id="toggle-Body" onclick="_Pict.PictApplication.demo_toggleMode('Body')">Edit</button>
+
+			<label>
+				<input type="checkbox" id="allow-images" checked onchange="_Pict.PictApplication.demo_setAllowImages('Body', this.checked)">
+				Allow image paste
+			</label>
+
+			<label>
+				<input type="checkbox" id="use-uploader" checked onchange="_Pict.PictApplication.demo_setUploaderEnabled(this.checked)">
+				Use ImageUploader stub
+				<span style="color:#8A7F72; margin-left:6px; font-size:0.75rem;">(off = base64 inline)</span>
+			</label>
+		</div>
+
+		<div id="Pict-Form-Container"></div>
+
+		<div class="notes">
+			<strong>Verifying:</strong>
+			Open DevTools → Network. With <em>Edit</em> never clicked, no CodeMirror request fires. Click <em>Edit</em>
+			once and the markdown-editor bundle loads. Click <em>Done</em> to return to view mode — the editor view
+			is torn down, but its content lives in the field's hidden form input.
+		</div>
+	</main>
+
+	<script src="./pict.min.js"></script>
+	<script src="./richtext_form_example.min.js"></script>
+	<script>
+		Pict.safeOnDocumentReady(() =>
+		{
+			Pict.safeLoadPictApplication(window.RichtextFormExample || window.RichTextFormExample, 1);
+		});
+	</script>
+</body>
+</html>

package/example_applications/richtext_form/package.json

@@ -0,0 +1,28 @@
+{
+	"name": "richtext_form_example",
+	"version": "1.0.0",
+	"description": "Pict-section-form RichText InputType demo — markdown editor (edit mode) + rendered markdown (view mode), with pluggable image uploader.",
+	"main": "RichTextForm-Example-Application.js",
+	"scripts": {
+		"start": "node RichTextForm-Example-Application.js",
+		"build": "npx quack build && npx quack copy"
+	},
+	"author": "steven velozo <steven@velozo.com>",
+	"license": "MIT",
+	"devDependencies": {},
+	"copyFilesSettings": {
+		"whenFileExists": "overwrite"
+	},
+	"copyFiles": [
+		{ "from": "./html/*",                       "to": "./dist/" },
+		{ "from": "../../node_modules/pict/dist/*", "to": "./dist/" }
+	],
+	"retold": {
+		"ExampleApplication": {
+			"Stage": true,
+			"Title": "RichText Form Input",
+			"Summary": "A pict-section-form field whose InputType is RichText — boots in view mode (rendered markdown), toggles into edit mode (CodeMirror) on demand. Demonstrates the AllowImages knob and the pluggable ImageUploader override.",
+			"Complexity": "Intermediate"
+		}
+	}
+}