pict-section-formeditor 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Steven Velozo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,118 @@
+# pict-section-formeditor
+
+A visual editor for [pict-section-form](https://github.com/stevenvelozo/pict-section-form) configuration manifests. Build, edit, and preview form layouts in the browser with a drag-and-drop interface, inline property editing, solver expression authoring, and live form preview.
+
+## Features
+
+- **Visual Editor** -- Drag-and-drop sections, groups, rows, and inputs in a structured layout
+- **JSON Editor** -- Edit the raw manifest JSON with syntax highlighting via CodeJar
+- **Properties Panel** -- Inline editing of section, group, row, and input properties
+- **Solver Editor** -- Author solver expressions with a built-in expression linter and token inspector
+- **Live Preview** -- Render the form as it will appear to end users using a child pict instance
+- **Embedded Help** -- Context-sensitive documentation for all 127+ solver functions, input types, and editor features
+- **Input Type Picker** -- Browse all available pict-section-form input types organized by category
+- **Display Modes** -- Toggle between human-readable names and manifest hash identifiers
+
+## Installation
+
+```bash
+npm install pict-section-formeditor
+```
+
+## Quick Start
+
+Add the form editor view to any pict application:
+
+```javascript
+const libPict = require('pict');
+const libPictApplication = require('pict-application');
+const libPictSectionFormEditor = require('pict-section-formeditor');
+
+class MyApp extends libPictApplication
+{
+    onAfterInitializeAsync(fCallback)
+    {
+        // Provide a manifest object at a known AppData address
+        this.pict.AppData.FormConfig =
+        {
+            Scope: 'MyForm',
+            Sections: [],
+            Descriptors: {}
+        };
+
+        // Add the form editor view
+        this.pict.addView('FormEditor',
+        {
+            ViewIdentifier: 'FormEditor',
+            ManifestDataAddress: 'AppData.FormConfig',
+            DefaultDestinationAddress: '#FormEditor-Container',
+            ActiveTab: 'visual'
+        }, libPictSectionFormEditor);
+
+        // Initialize and render
+        this.pict.views.FormEditor.initialize();
+        this.pict.views.FormEditor.render();
+
+        return super.onAfterInitializeAsync(fCallback);
+    }
+}
+```
+
+In your HTML, provide a container element and the Pict CSS style block:
+
+```html
+<style id="PICT-CSS"></style>
+<div id="FormEditor-Container"></div>
+```
+
+## Configuration Options
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `ManifestDataAddress` | String | `'FormEditor.Manifest'` | AppData address where the manifest object lives |
+| `DefaultDestinationAddress` | String | -- | CSS selector for the editor container element |
+| `ActiveTab` | String | `'visual'` | Initial tab: `'visual'`, `'json'`, or `'preview'` |
+
+## Manifest Format
+
+The editor works with standard pict-section-form manifests:
+
+```json
+{
+    "Scope": "MyForm",
+    "Sections": [
+        {
+            "Hash": "Details",
+            "Name": "Contact Details"
+        }
+    ],
+    "Descriptors": {
+        "Name": {
+            "Name": "Full Name",
+            "Hash": "Name",
+            "DataType": "String",
+            "PictForm": { "Section": "Details", "Row": 1, "Width": 1 }
+        }
+    }
+}
+```
+
+## Running the Example Application
+
+```bash
+cd example_applications/form_editor
+npm install
+npx quack build
+# Open html/index.html in a browser
+```
+
+## Building
+
+```bash
+npm test         # Run tests
+npx quack build  # Bundle the library
+```
+
+## License
+
+MIT

package/docs/README.md

@@ -0,0 +1,162 @@
+# pict-section-formeditor
+
+A visual editor for pict-section-form configuration manifests.
+
+The form editor lets you build and modify pict-section-form manifests through a browser-based interface. Sections, groups, rows, and inputs can be created, rearranged, and configured without hand-editing JSON.
+
+## Getting Started
+
+### Install
+
+```bash
+npm install pict-section-formeditor
+```
+
+### Add the Editor to Your Application
+
+The form editor is a pict view. Register it with your pict application and point it at a manifest object in `AppData`:
+
+```javascript
+const libPictSectionFormEditor = require('pict-section-formeditor');
+
+// In your PictApplication subclass:
+onAfterInitializeAsync(fCallback)
+{
+    // Seed an empty manifest (or load one from your API)
+    this.pict.AppData.FormConfig =
+    {
+        Scope: 'MyForm',
+        Sections: [],
+        Descriptors: {}
+    };
+
+    // Create the editor view
+    this.pict.addView('FormEditor',
+    {
+        ViewIdentifier: 'FormEditor',
+        ManifestDataAddress: 'AppData.FormConfig',
+        DefaultDestinationAddress: '#FormEditor-Container',
+        ActiveTab: 'visual'
+    }, libPictSectionFormEditor);
+
+    this.pict.views.FormEditor.initialize();
+    this.pict.views.FormEditor.render();
+
+    return super.onAfterInitializeAsync(fCallback);
+}
+```
+
+### HTML Setup
+
+Your page needs two things: the Pict CSS injection target and a container element.
+
+```html
+<style id="PICT-CSS"></style>
+<div id="FormEditor-Container"></div>
+```
+
+The editor injects all of its CSS into `#PICT-CSS` at runtime, so no external stylesheet is required beyond whatever your application already provides.
+
+## Editor Tabs
+
+The editor provides several tabs along the top:
+
+| Tab | Purpose |
+|---|---|
+| **Visual Editor** | Drag-and-drop form layout with inline property editing |
+| **JSON** | Raw manifest JSON editing with syntax highlighting (CodeJar) |
+| **Preview** | Live rendered form using a child pict instance |
+| **Help** | Context-sensitive documentation browser |
+
+### Visual Editor
+
+The visual editor displays the manifest as a hierarchy of sections, groups, rows, and inputs. Each element can be selected to open its properties in the right-hand panel.
+
+- **Sections** are the top-level containers. Add new sections with the toolbar button.
+- **Groups** organize inputs within a section. Each section has a default group.
+- **Rows** are horizontal containers inside groups. Inputs in the same row appear side by side.
+- **Inputs** are the individual form fields. Each input maps to a Descriptor in the manifest.
+
+### JSON Editor
+
+Switches to a code editor where you can modify the manifest JSON directly. Changes are parsed and applied when you switch back to the visual editor.
+
+### Preview
+
+Click **Load Preview** to render the current manifest as a live pict-section-form. The preview uses a sandboxed child pict instance so it does not interfere with the editor's own state or CSS.
+
+### Solver Editor
+
+When editing a section's solvers, a dedicated panel opens with a code editor and two bottom tabs:
+
+- **Expression Linter** -- Tokenizes the solver expression in real time and reports errors or warnings
+- **Input Reference** -- Browse available data addresses from the manifest to use in expressions
+
+## Configuration
+
+Pass options when adding the view:
+
+```javascript
+this.pict.addView('FormEditor',
+{
+    ViewIdentifier: 'FormEditor',
+
+    // Where the manifest lives in AppData
+    ManifestDataAddress: 'AppData.FormConfig',
+
+    // CSS selector for the container element
+    DefaultDestinationAddress: '#FormEditor-Container',
+
+    // Which tab to show first: 'visual', 'json', or 'preview'
+    ActiveTab: 'visual'
+}, libPictSectionFormEditor);
+```
+
+### Loading a Manifest
+
+Set the manifest object at the configured `ManifestDataAddress` and re-render:
+
+```javascript
+this.pict.AppData.FormConfig = myLoadedManifest;
+this.pict.views.FormEditor.render();
+```
+
+### Reading the Manifest Back
+
+The editor modifies the manifest in place. Read it back from the same address:
+
+```javascript
+let tmpManifest = this.pict.AppData.FormConfig;
+// POST it to your API, save to localStorage, etc.
+```
+
+## Architecture
+
+The editor is decomposed into a main view and several providers:
+
+| Module | Role |
+|---|---|
+| `PictView-FormEditor` | Main view -- tab switching, lifecycle, coordination |
+| `PictView-FormEditor-PropertiesPanel` | Right-hand property editing, solver editor, preview |
+| `PictView-FormEditor-InlineEditing` | Click-to-edit labels and values in the visual layout |
+| `PictView-FormEditor-InputTypePicker` | Modal for selecting input types by category |
+| `Pict-Provider-FormEditorRendering` | HTML generation for all visual editor elements |
+| `Pict-Provider-FormEditorManifestOps` | CRUD operations on the manifest (add/move/delete) |
+| `Pict-Provider-FormEditorDragDrop` | Drag-and-drop reordering of sections, groups, rows, inputs |
+| `Pict-Provider-FormEditorUtilities` | String helpers, input type definitions, stats |
+| `Pict-Provider-FormEditorIconography` | SVG icon set for the editor UI |
+| `Pict-Provider-FormEditorDocumentation` | Embedded help content and topic index |
+| `Pict-Provider-ChildPictManager` | Manages child pict instances for preview and solver linting |
+| `Pict-Provider-PreviewCSS` | CSS isolation for child pict form previews |
+
+## Example Application
+
+A complete working example lives in `example_applications/form_editor/`. To run it:
+
+```bash
+cd example_applications/form_editor
+npm install
+npx quack build
+```
+
+Then open `html/index.html` in a browser. The example includes a manifest selector with several sample forms.

package/docs/_sidebar.md

@@ -0,0 +1,23 @@
+- Getting Started
+	- [Overview](#/README)
+	- [Installation](#/README?id=install)
+	- [Quick Start](#/README?id=add-the-editor-to-your-application)
+	- [HTML Setup](#/README?id=html-setup)
+
+- Using the Editor
+	- [Editor Tabs](#/README?id=editor-tabs)
+	- [Visual Editor](#/README?id=visual-editor)
+	- [JSON Editor](#/README?id=json-editor)
+	- [Preview](#/README?id=preview)
+	- [Solver Editor](#/README?id=solver-editor)
+
+- Developer Guide
+	- [Configuration](#/README?id=configuration)
+	- [Loading a Manifest](#/README?id=loading-a-manifest)
+	- [Reading the Manifest](#/README?id=reading-the-manifest-back)
+	- [Architecture](#/README?id=architecture)
+
+- Resources
+	- [Example Application](#/README?id=example-application)
+	- [GitHub](https://github.com/stevenvelozo/pict-section-formeditor)
+	- [pict-section-form](https://github.com/stevenvelozo/pict-section-form)

package/docs/_topbar.md

@@ -0,0 +1,5 @@
+# pict-section-formeditor
+
+- [Documentation](#/README)
+- [GitHub](https://github.com/stevenvelozo/pict-section-formeditor)
+- [pict-section-form](https://github.com/stevenvelozo/pict-section-form)

package/docs/cover.md

@@ -0,0 +1,12 @@
+# pict-section-formeditor
+
+> A visual editor for pict-section-form configuration manifests.
+
+- Drag-and-drop form layout builder
+- Inline property editing
+- Solver expression authoring with real-time linting
+- Live form preview
+- Embedded help for 127+ solver functions
+
+[Get Started](#/README)
+[View on GitHub](https://github.com/stevenvelozo/pict-section-formeditor)

package/docs/css/docuserve.css

@@ -0,0 +1,73 @@
+/* ============================================================================
+   Pict Docuserve - Base Styles
+   ============================================================================ */
+
+/* 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: #423D37;
+	background-color: #fff;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+	margin-top: 0;
+	line-height: 1.3;
+}
+
+a {
+	color: #2E7D74;
+	text-decoration: none;
+}
+
+a:hover {
+	color: #256861;
+}
+
+/* Application container */
+#Docuserve-Application-Container {
+	min-height: 100vh;
+}
+
+/* Utility: scrollbar styling */
+::-webkit-scrollbar {
+	width: 8px;
+}
+
+::-webkit-scrollbar-track {
+	background: #F5F0E8;
+}
+
+::-webkit-scrollbar-thumb {
+	background: #D4CCBE;
+	border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: #B5AA9A;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+	html {
+		font-size: 14px;
+	}
+
+	#Docuserve-Sidebar-Container {
+		display: none;
+	}
+
+	.docuserve-body {
+		flex-direction: column;
+	}
+}

package/docs/index.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+		<meta name="description" content="Documentation powered by pict-docuserve">
+
+		<title>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 -->
+		<style id="PICT-CSS"></style>
+
+		<!-- Load the PICT library from jsDelivr CDN -->
+		<script src="https://cdn.jsdelivr.net/npm/pict@1/dist/pict.min.js" type="text/javascript"></script>
+		<!-- Bootstrap the Application -->
+		<script type="text/javascript">
+//<![CDATA[
+		Pict.safeOnDocumentReady(() => { Pict.safeLoadPictApplication(PictDocuserve, 2)});
+//]]>
+		</script>
+	</head>
+	<body>
+		<!-- The root container for the Pict application -->
+		<div id="Docuserve-Application-Container"></div>
+
+		<!-- Mermaid diagram rendering -->
+		<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
+		<script>mermaid.initialize({ startOnLoad: false, theme: 'default' });</script>
+		<!-- KaTeX for LaTeX equation rendering -->
+		<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.js"></script>
+		<!-- Load the Docuserve PICT Application Bundle from jsDelivr CDN -->
+		<script src="https://cdn.jsdelivr.net/npm/pict-docuserve@0/dist/pict-docuserve.min.js" type="text/javascript"></script>
+	</body>
+</html>

package/docs/retold-catalog.json

@@ -0,0 +1,224 @@
+{
+	"Generated": "2026-02-22T22:01:46.339Z",
+	"GitHubOrg": "stevenvelozo",
+	"DefaultBranch": "master",
+	"Groups": [
+		{
+			"Name": "Dist",
+			"Key": "dist",
+			"Description": "",
+			"Modules": [
+				{
+					"Name": "indoctrinate_content_staging",
+					"Repo": "indoctrinate_content_staging",
+					"Group": "dist",
+					"Branch": "master",
+					"HasDocs": false,
+					"HasCover": false,
+					"Sidebar": [],
+					"DocFiles": []
+				}
+			]
+		},
+		{
+			"Name": "Example_applications",
+			"Key": "example_applications",
+			"Description": "",
+			"Modules": [
+				{
+					"Name": "form_editor",
+					"Repo": "form_editor",
+					"Group": "example_applications",
+					"Branch": "master",
+					"HasDocs": true,
+					"HasCover": false,
+					"Sidebar": [],
+					"DocFiles": [
+						".pict_documentation_topics.json",
+						"Getting-Started.md",
+						"Groups.md",
+						"Inputs.md",
+						"Sections.md",
+						"Shortcuts.md",
+						"Solver-Expression-Walkthrough.md",
+						"Solver-Expressions-Advanced.md",
+						"Solver-Functions.md",
+						"Solvers.md",
+						"ToC.md",
+						"solverfunctions/abs.md",
+						"solverfunctions/aggregationhistogram.md",
+						"solverfunctions/aggregationhistogrambyobject.md",
+						"solverfunctions/arrayconcat.md",
+						"solverfunctions/avg.md",
+						"solverfunctions/bucketset.md",
+						"solverfunctions/ceil.md",
+						"solverfunctions/cleanvaluearray.md",
+						"solverfunctions/cleanvalueobject.md",
+						"solverfunctions/colorgroupbackground.md",
+						"solverfunctions/colorinputbackground.md",
+						"solverfunctions/colorinputbackgroundtabular.md",
+						"solverfunctions/colorsectionbackground.md",
+						"solverfunctions/compare.md",
+						"solverfunctions/concat.md",
+						"solverfunctions/concatraw.md",
+						"solverfunctions/cos.md",
+						"solverfunctions/count.md",
+						"solverfunctions/countset.md",
+						"solverfunctions/countsetelements.md",
+						"solverfunctions/createarrayfromabsolutevalues.md",
+						"solverfunctions/createvalueobjectbyhashes.md",
+						"solverfunctions/cumulativesummation.md",
+						"solverfunctions/dateadddays.md",
+						"solverfunctions/dateaddhours.md",
+						"solverfunctions/dateaddmilliseconds.md",
+						"solverfunctions/dateaddminutes.md",
+						"solverfunctions/dateaddmonths.md",
+						"solverfunctions/dateaddseconds.md",
+						"solverfunctions/dateaddweeks.md",
+						"solverfunctions/dateaddyears.md",
+						"solverfunctions/datedaydifference.md",
+						"solverfunctions/datefromparts.md",
+						"solverfunctions/datehourdifference.md",
+						"solverfunctions/datemathadd.md",
+						"solverfunctions/datemilliseconddifference.md",
+						"solverfunctions/dateminutedifference.md",
+						"solverfunctions/datemonthdifference.md",
+						"solverfunctions/dateseconddifference.md",
+						"solverfunctions/dateweekdifference.md",
+						"solverfunctions/dateyeardifference.md",
+						"solverfunctions/differencearrays.md",
+						"solverfunctions/disablesolverordinal.md",
+						"solverfunctions/distributionhistogram.md",
+						"solverfunctions/distributionhistogrambyobject.md",
+						"solverfunctions/enablesolverordinal.md",
+						"solverfunctions/entryinset.md",
+						"solverfunctions/euler.md",
+						"solverfunctions/exp.md",
+						"solverfunctions/findfirstvaluebyexactmatch.md",
+						"solverfunctions/findfirstvaluebystringincludes.md",
+						"solverfunctions/flatten.md",
+						"solverfunctions/floor.md",
+						"solverfunctions/gaussianelimination.md",
+						"solverfunctions/generatearrayofobjectsfromsets.md",
+						"solverfunctions/generatehtmlhexcolor.md",
+						"solverfunctions/getvalue.md",
+						"solverfunctions/getvaluearray.md",
+						"solverfunctions/getvalueobject.md",
+						"solverfunctions/hidesections.md",
+						"solverfunctions/if.md",
+						"solverfunctions/iterativeseries.md",
+						"solverfunctions/join.md",
+						"solverfunctions/joinraw.md",
+						"solverfunctions/largestinset.md",
+						"solverfunctions/leastsquares.md",
+						"solverfunctions/linest.md",
+						"solverfunctions/log.md",
+						"solverfunctions/logvalues.md",
+						"solverfunctions/match.md",
+						"solverfunctions/matrixinverse.md",
+						"solverfunctions/matrixmultiply.md",
+						"solverfunctions/matrixtranspose.md",
+						"solverfunctions/matrixvectormultiply.md",
+						"solverfunctions/max.md",
+						"solverfunctions/mean.md",
+						"solverfunctions/median.md",
+						"solverfunctions/min.md",
+						"solverfunctions/mode.md",
+						"solverfunctions/objectkeystoarray.md",
+						"solverfunctions/objectvaluessortbyexternalobjectarray.md",
+						"solverfunctions/objectvaluestoarray.md",
+						"solverfunctions/percent.md",
+						"solverfunctions/pi.md",
+						"solverfunctions/polynomialregression.md",
+						"solverfunctions/predict.md",
+						"solverfunctions/rad.md",
+						"solverfunctions/randomfloat.md",
+						"solverfunctions/randomfloatbetween.md",
+						"solverfunctions/randomfloatupto.md",
+						"solverfunctions/randominteger.md",
+						"solverfunctions/randomintegerbetween.md",
+						"solverfunctions/randomintegerupto.md",
+						"solverfunctions/refreshtabularsection.md",
+						"solverfunctions/resolvehtmlentities.md",
+						"solverfunctions/round.md",
+						"solverfunctions/runsolvers.md",
+						"solverfunctions/setconcatenate.md",
+						"solverfunctions/setgroupvisibility.md",
+						"solverfunctions/setsectionvisibility.md",
+						"solverfunctions/setsolverordinalenabled.md",
+						"solverfunctions/settabularrowlength.md",
+						"solverfunctions/setvalue.md",
+						"solverfunctions/showsections.md",
+						"solverfunctions/sin.md",
+						"solverfunctions/slice.md",
+						"solverfunctions/smallestinset.md",
+						"solverfunctions/sortarray.md",
+						"solverfunctions/sorthistogram.md",
+						"solverfunctions/sorthistogrambykeys.md",
+						"solverfunctions/sortset.md",
+						"solverfunctions/sqrt.md",
+						"solverfunctions/stdev.md",
+						"solverfunctions/stdeva.md",
+						"solverfunctions/stdevp.md",
+						"solverfunctions/stringcountsegments.md",
+						"solverfunctions/stringgetsegments.md",
+						"solverfunctions/subtractingsummation.md",
+						"solverfunctions/sum.md",
+						"solverfunctions/tan.md",
+						"solverfunctions/tofixed.md",
+						"solverfunctions/unionarrays.md",
+						"solverfunctions/uniquearray.md",
+						"solverfunctions/var.md",
+						"solverfunctions/vara.md",
+						"solverfunctions/varp.md",
+						"solverfunctions/when.md"
+					]
+				}
+			]
+		},
+		{
+			"Name": "Source",
+			"Key": "source",
+			"Description": "",
+			"Modules": [
+				{
+					"Name": "providers",
+					"Repo": "providers",
+					"Group": "source",
+					"Branch": "master",
+					"HasDocs": false,
+					"HasCover": false,
+					"Sidebar": [],
+					"DocFiles": []
+				},
+				{
+					"Name": "views",
+					"Repo": "views",
+					"Group": "source",
+					"Branch": "master",
+					"HasDocs": false,
+					"HasCover": false,
+					"Sidebar": [],
+					"DocFiles": []
+				}
+			]
+		},
+		{
+			"Name": "User-documentation",
+			"Key": "user-documentation",
+			"Description": "",
+			"Modules": [
+				{
+					"Name": "solverfunctions",
+					"Repo": "solverfunctions",
+					"Group": "user-documentation",
+					"Branch": "master",
+					"HasDocs": false,
+					"HasCover": false,
+					"Sidebar": [],
+					"DocFiles": []
+				}
+			]
+		}
+	]
+}