pict-section-form 1.0.197 → 1.0.199

package/README.md

@@ -1,5 +1,7 @@
 # PICT Forms Section
 
+> **[▶ Read the Pict-Section-Form Documentation](https://stevenvelozo.github.io/pict-section-form/)** — an interactive guide with live, runnable examples and the full API reference.
+
 A Form Section with programmatically definable content.  Simple, extensible 
 function APIs for adding groups, rows, entry elements and documentation or
 user workflow guidance.
@@ -269,33 +271,31 @@ of data in your application.
 
 ## Documentation
 
-Comprehensive documentation is available in the [docs](docs/) folder:
+The complete documentation — an interactive guide with live examples — is hosted at **[stevenvelozo.github.io/pict-section-form](https://stevenvelozo.github.io/pict-section-form/)**:
 
 | Document | Description |
 |----------|-------------|
-| [Getting Started](docs/Getting_Started.md) | Quick start guide for new users |
-| [Architecture](docs/Pict_Section_Form_Architecture.md) | System architecture and design |
-| [Configuration](docs/Configuration.md) | Complete configuration reference |
-| [Input Types](docs/Input_Types.md) | Available input types |
-| [Templates](docs/Templates.md) | Template customization and macros |
-| [Solvers](docs/Solvers.md) | Expression solver system |
-| [Providers](docs/Providers.md) | Provider reference |
-| [Layouts](docs/Layouts.md) | Layout types and customization |
+| [Getting Started](https://stevenvelozo.github.io/pict-section-form/#/page/Getting_Started) | Quick start guide for new users |
+| [Architecture](https://stevenvelozo.github.io/pict-section-form/#/page/Pict_Section_Form_Architecture) | System architecture and design |
+| [Configuration](https://stevenvelozo.github.io/pict-section-form/#/page/Configuration) | Complete configuration reference |
+| [Input Types](https://stevenvelozo.github.io/pict-section-form/#/page/Input_Types) | Available input types |
+| [Templates](https://stevenvelozo.github.io/pict-section-form/#/page/Templates) | Template customization and macros |
+| [Solvers](https://stevenvelozo.github.io/pict-section-form/#/page/Solvers) | Expression solver system |
+| [Providers](https://stevenvelozo.github.io/pict-section-form/#/page/Providers) | Provider reference |
+| [Layouts](https://stevenvelozo.github.io/pict-section-form/#/page/Layouts) | Layout types and customization |
 
 ### Example Applications
 
-Working examples demonstrating various features:
+Live, runnable example applications — click to open one in your browser:
 
 | Example | Description |
 |---------|-------------|
-| [simple_form](docs/examples/simple_form/) | Basic form with solvers and visibility control |
-| [simple_table](docs/examples/simple_table/) | Minimal tabular layout example |
-| [simple_distill](docs/examples/simple_distill/) | Entity bundles and trigger groups |
-| [gradebook](docs/examples/gradebook/) | Multi-table app with localStorage |
-| [postcard_example](docs/examples/postcard_example/) | Theme switching and navigation |
-| [complex_table](docs/examples/complex_table/) | Full-featured with charts and entity bundles |
-| [complex_tuigrid](docs/examples/complex_tuigrid/) | TuiGrid with aggregations |
-| [manyfest_editor](docs/examples/manyfest_editor/) | Meta-configuration editor |
+| [Simple Table](https://stevenvelozo.github.io/pict-section-form/examples/simple_table/) | Tabular layout, reference manifests, and dot-notation access into nested data |
+| [Gradebook](https://stevenvelozo.github.io/pict-section-form/examples/gradebook/) | Stacked headers, row labels, dynamic columns, row/column selection, and sorting |
+| [Scope Mathematics](https://stevenvelozo.github.io/pict-section-form/examples/scope_mathematics/) | Solvers that reach across sections and the global form scope |
+| [Change Tracking](https://stevenvelozo.github.io/pict-section-form/examples/change_tracking/) | A change-detecting solver state machine with bidirectional recompute |
+| [NDT Field Test](https://stevenvelozo.github.io/pict-section-form/examples/ndt_field_test/) | Offline persistence, pick lists, pass/fail row solvers, and charts |
+| [Dynamic Analysis](https://stevenvelozo.github.io/pict-section-form/examples/dynamic_analysis/) | Runtime section injection, solver rewriting, and solver-driven charts |
 
 ### Input Providers
 
@@ -303,19 +303,19 @@ Specialized input handlers for different data types:
 
 | Provider | Description |
 |----------|-------------|
-| [Select](docs/input_providers/001-select.md) | Dropdown lists with static/dynamic options |
-| [DateTime](docs/input_providers/002-datetime.md) | Date and time picker |
-| [Markdown](docs/input_providers/003-markdown.md) | Markdown content display |
-| [HTML](docs/input_providers/004-html.md) | Raw HTML content display |
-| [PreciseNumber](docs/input_providers/005-precise-number.md) | Formatted numbers with precision |
-| [Link](docs/input_providers/006-link.md) | Hyperlink inputs |
-| [Templated](docs/input_providers/007-templated.md) | Dynamic template rendering |
-| [TemplatedEntityLookup](docs/input_providers/008-templated-entity-lookup.md) | Entity fetch with template display |
-| [Chart](docs/input_providers/009-chart.md) | Chart.js visualizations |
-| [EntityBundleRequest](docs/input_providers/010-entity-bundle-request.md) | Cascading entity fetches |
-| [AutofillTriggerGroup](docs/input_providers/011-autofill-trigger-group.md) | Trigger-based autofill |
-| [TabGroupSelector](docs/input_providers/012-tab-group-selector.md) | Tab navigation for groups |
-| [TabSectionSelector](docs/input_providers/013-tab-section-selector.md) | Tab navigation for sections |
+| [Select](https://stevenvelozo.github.io/pict-section-form/#/page/input_providers/001-select) | Dropdown lists with static/dynamic options |
+| [DateTime](https://stevenvelozo.github.io/pict-section-form/#/page/input_providers/002-datetime) | Date and time picker |
+| [Markdown](https://stevenvelozo.github.io/pict-section-form/#/page/input_providers/003-markdown) | Markdown content display |
+| [HTML](https://stevenvelozo.github.io/pict-section-form/#/page/input_providers/004-html) | Raw HTML content display |
+| [PreciseNumber](https://stevenvelozo.github.io/pict-section-form/#/page/input_providers/005-precise-number) | Formatted numbers with precision |
+| [Link](https://stevenvelozo.github.io/pict-section-form/#/page/input_providers/006-link) | Hyperlink inputs |
+| [Templated](https://stevenvelozo.github.io/pict-section-form/#/page/input_providers/007-templated) | Dynamic template rendering |
+| [TemplatedEntityLookup](https://stevenvelozo.github.io/pict-section-form/#/page/input_providers/008-templated-entity-lookup) | Entity fetch with template display |
+| [Chart](https://stevenvelozo.github.io/pict-section-form/#/page/input_providers/009-chart) | Chart.js visualizations |
+| [EntityBundleRequest](https://stevenvelozo.github.io/pict-section-form/#/page/input_providers/010-entity-bundle-request) | Cascading entity fetches |
+| [AutofillTriggerGroup](https://stevenvelozo.github.io/pict-section-form/#/page/input_providers/011-autofill-trigger-group) | Trigger-based autofill |
+| [TabGroupSelector](https://stevenvelozo.github.io/pict-section-form/#/page/input_providers/012-tab-group-selector) | Tab navigation for groups |
+| [TabSectionSelector](https://stevenvelozo.github.io/pict-section-form/#/page/input_providers/013-tab-section-selector) | Tab navigation for sections |
 
 ## Installation
 

package/docs/Comprehensions.md

@@ -175,7 +175,7 @@ upserts, idempotency.
   addresses, computed contexts, per-row `MAP VAR` generation, customized
   destinations.
 - [Solvers](Solvers.md) — full solver function reference.
-- The [Complex Table example](../example_applications/complex_table/Complex-Tabular-Application.js)
+- The Complex Table example (`example_applications/complex_table/Complex-Tabular-Application.js`)
   builds a complete `RecipeWorkflowComprehensions` tree with `OnSave` and
   `OnApprovalAction.{Submit,Approve}` contexts off the Recipe section and the
   FruitGrid recordset.

package/docs/Comprehensions_Advanced.md

@@ -13,7 +13,7 @@ This document goes deeper than [Comprehensions](Comprehensions.md):
 - **Resetting between solves**.
 
 The complete worked example for everything here lives at
-[`example_applications/complex_table/Complex-Tabular-Application.js`](../example_applications/complex_table/Complex-Tabular-Application.js)
+`example_applications/complex_table/Complex-Tabular-Application.js`
 — if you only read one thing, read that file. This page explains the *why* behind
 the patterns it uses.
 
@@ -147,7 +147,7 @@ mirroring the existing `viewMarshalDestination` knob — that controls where
 
 ### Option 1: in the application constructor
 
-This is what the [complex_table example](../example_applications/complex_table/Complex-Tabular-Application.js)
+This is what the complex_table example (`example_applications/complex_table/Complex-Tabular-Application.js`)
 does. After `super()` (which registers the metacontroller view via
 `PictFormApplication`), set the destination directly:
 
@@ -240,7 +240,7 @@ missing-or-emptied destination by re-materializing it on the next write.
 
 ## Full reference: the complex_table sample config
 
-The [complex_table example](../example_applications/complex_table/Complex-Tabular-Application.js)
+The complex_table example (`example_applications/complex_table/Complex-Tabular-Application.js`)
 exercises every pattern on this page in one application. The relevant pieces:
 
 ```js

package/docs/Configuration.md

@@ -85,6 +85,23 @@ Groups organize inputs within a section.
 | `CSSClasses` | array | No | CSS classes to apply |
 | `Visible` | boolean | No | Initial visibility (default: true) |
 
+#### Tabular Group Properties
+
+These additional properties apply only to groups with `Layout: "Tabular"`.
+See [Layouts](Layouts.md) for full details and examples.
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `RecordManifest` | string | Reference manifest naming the columns |
+| `Headers` | array | Extra stacked / clustered header rows above the prime header |
+| `RowLabels` | array | Left-side label columns (template / row-number / pre-slotted; clusterable) |
+| `DynamicColumns` | array | Generators that build columns at runtime from another array |
+| `EditingControlsPosition` | string | `"right"` (default), `"left"`, or `"hidden"` |
+| `SuppressDefaultColumnHeaderRow` | boolean | Omit the prime column-name header row |
+| `RowSelection` | boolean/object | Add row checkboxes; selection persists in form data |
+| `ColumnSelection` | boolean/object | Add column checkboxes; selection persists in form data |
+| `ColumnSorting` | boolean | Add clickable sort controls to the prime header cells (default off) |
+
 ### Layout Types
 
 - `Record` - Standard form layout with rows and columns

package/docs/Layouts.md

@@ -160,6 +160,176 @@ TabularTemplate-RowPostfix
 TabularTemplate-TablePostfix
 ```
 
+### Stacked & Clustered Headers
+
+By default a tabular group has a single header row, one cell per column. The
+optional `Headers` property adds **extra header rows stacked above** that
+default ("prime") row. Each entry in `Headers` is one header row; each row is
+an array of cells.
+
+| Cell property | Type | Description |
+|---------------|------|-------------|
+| `Label` | string | Header text |
+| `ColumnSpan` | number | Number of data columns this cell spans (default 1) — this is how you "cluster" |
+| `CSSClass` | string | Optional class applied to the `<th>` |
+
+```json
+{
+  "Hash": "GradebookGrid",
+  "Layout": "Tabular",
+  "RecordSetAddress": "Grades",
+  "RecordManifest": "GradeRowEditor",
+  "Headers": [
+    [
+      { "Label": "First Semester", "ColumnSpan": 3, "CSSClass": "term-banner" },
+      { "Label": "Second Semester", "ColumnSpan": 4, "CSSClass": "term-banner" }
+    ]
+  ]
+}
+```
+
+Each header row's `ColumnSpan` total should equal the number of data columns;
+a mismatch is logged as a warning and the header will visually misalign.
+Header rows render top-to-bottom in array order, directly above the prime
+column-name row.
+
+### Row Label Columns
+
+The `RowLabels` property adds one or more **label columns down the left side**
+of the table (before the data columns). Each entry describes one label column.
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `Name` | string | Header text for the label column |
+| `Template` | string | A Pict template resolved per row — the row record is at `Record.Value`, the row index at `Record.Key` |
+| `RowNumber` | boolean | When `true`, the label is the 1-based row number |
+| `SourceAddress` | string | An app-data address of a pre-slotted array; element `[rowIndex]` is the label |
+| `Cluster` | boolean | When `true`, consecutive equal labels collapse into one cell with `rowspan` |
+| `CSSClass` | string | Optional class applied to the label `<td>` |
+
+Provide exactly one of `Template`, `RowNumber`, or `SourceAddress` per entry.
+
+```json
+"RowLabels": [
+  { "Name": "Section", "Template": "{~D:Record.Value.Section~}", "Cluster": true },
+  { "Name": "Student", "Template": "{~D:Record.Value.StudentName~}" },
+  { "Name": "#", "RowNumber": true }
+]
+```
+
+`Cluster: true` is what produces the "merged cell" look — a column of repeated
+values (e.g. a class section) renders as a single tall cell spanning its run
+of rows. Any label column may be clustered; there is no "prime" label column.
+
+### Dynamic Columns
+
+`DynamicColumns` generates table columns at runtime from **another array** in
+the form data — for example, one grade column per assignment. Each entry is a
+generator:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `SourceAddress` | string | App-data address of the array driving the columns |
+| `HashTemplate` | string | Template producing each column's unique descriptor hash |
+| `NameTemplate` | string | Template producing each column's header text |
+| `InformaryDataAddressTemplate` | string | Template producing the per-row data address the cell binds to |
+| `HeaderGroupTemplate` | string | Optional — template producing a cluster label; auto-adds a clustered super-header row |
+| `DataType` | string | Data type for the generated descriptors |
+| `PictForm` | object | `PictForm` block merged onto each generated descriptor (e.g. `InputType`) |
+| `InsertAt` | string/object | `"End"` (default), `"Start"`, or `{ "After": "<hash>" }` |
+
+Inside each template the **source row** is the record (`Record.Field`).
+
+```json
+"DynamicColumns": [
+  {
+    "SourceAddress": "Assignments",
+    "HashTemplate": "Grade_{~D:Record.IDAssignment~}",
+    "NameTemplate": "{~D:Record.Title~}",
+    "InformaryDataAddressTemplate": "Grades.{~D:Record.IDAssignment~}",
+    "HeaderGroupTemplate": "{~D:Record.Topic~}",
+    "DataType": "Number",
+    "PictForm": { "InputType": "Number" }
+  }
+]
+```
+
+Dynamic columns are **non-destructive**: when a source row is removed the
+generated column disappears, but the underlying row data at the
+`InformaryDataAddress` is left untouched — re-adding the source row brings the
+column back with its data intact. The columns re-resolve automatically as the
+source array changes; no manual refresh call is needed.
+
+When `HeaderGroupTemplate` is set, an extra clustered super-header row is
+synthesized automatically: consecutive generated columns sharing the same
+header-group value merge into one spanning cell (e.g. assignments clustered by
+topic).
+
+### Editing Controls Position
+
+Tabular rows render del / up / down controls. `EditingControlsPosition`
+controls where:
+
+| Value | Behavior |
+|-------|----------|
+| `"right"` | Default — controls in a trailing column |
+| `"left"` | Controls in a leading column, before the data columns |
+| `"hidden"` | No editing controls (read-only style table) |
+
+```json
+{ "Layout": "Tabular", "EditingControlsPosition": "hidden" }
+```
+
+### Suppressing the Default Header Row
+
+Set `SuppressDefaultColumnHeaderRow: true` to omit the prime column-name row
+entirely — useful when custom `Headers` rows fully describe the columns.
+
+### Selectable Rows & Columns
+
+`RowSelection` and `ColumnSelection` add checkboxes that let the user pick
+rows / columns. The selected state is **stored in the form data**, so it
+persists with a save and can be read by solvers.
+
+Set either to `true` for defaults, or to an object:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `Enabled` | boolean | Set `false` to disable (same as omitting) |
+| `DataAddress` | string | Where the boolean selection array is stored (default `<GroupHash>_RowSelection` / `_ColumnSelection`) |
+| `HighlightClass` | string | Class auto-applied to selected rows/columns; set to `""` for solver-driven highlighting only |
+| `HeaderLabel` | string | Header text for the row-selection column |
+
+```json
+{
+  "Layout": "Tabular",
+  "RecordSetAddress": "Grades",
+  "RowSelection": true,
+  "ColumnSelection": true
+}
+```
+
+Checking a row (or column) highlights every cell across (or down) it and
+writes `true` into the selection array at the configured address. Because the
+array lives in the marshalled form data it round-trips with save / load.
+
+### Column Sorting
+
+`ColumnSorting: true` (off by default) injects a clickable sort control — a
+`<span>` carrying a sort SVG glyph from Pict's icon registry — into every
+prime header cell.
+
+```json
+{ "Layout": "Tabular", "RecordSetAddress": "Students", "ColumnSorting": true }
+```
+
+Clicking a column's control sorts the record set ascending; clicking the
+active column again toggles to descending. The glyph reflects state: a neutral
+double-arrow on idle columns, an up / down arrow on the active column. Sorting
+works for both static and dynamic columns (dynamic columns sort by their
+`InformaryDataAddress` value). Values that parse as numbers sort numerically;
+others sort lexically.
+
 ## RecordSet Layout
 
 Similar to tabular but renders each record as a full form section rather

package/docs/Pict_Section_Form_Architecture.md

@@ -32,24 +32,11 @@ The framework follows several key principles:
 
 The view layer consists of two primary classes:
 
-```
-┌─────────────────────────────────────────────────────────────────┐
-│                    PictFormMetacontroller                        │
-│   - Manages multiple form sections                               │
-│   - Orchestrates data marshaling                                 │
-│   - Controls solver execution                                    │
-│   - Handles initial bundle loading                               │
-└─────────────────────────────────────────────────────────────────┘
-                              │
-                              │ manages
-                              ▼
-┌─────────────────────────────────────────────────────────────────┐
-│                    PictViewDynamicForm                           │
-│   - Represents a single form section                             │
-│   - Maintains section manifest instance                          │
-│   - Handles input provider lifecycle                             │
-│   - Manages group and row structures                             │
-└─────────────────────────────────────────────────────────────────┘
+```mermaid
+flowchart TD
+    MC["PictFormMetacontroller<br/>• Manages multiple form sections<br/>• Orchestrates data marshaling<br/>• Controls solver execution<br/>• Handles initial bundle loading"]
+    DF["PictViewDynamicForm<br/>• Represents a single form section<br/>• Maintains section manifest instance<br/>• Handles input provider lifecycle<br/>• Manages group and row structures"]
+    MC -->|manages| DF
 ```
 
 **PictViewDynamicForm** extends `pict-view` and represents a single form section.
@@ -95,29 +82,24 @@ for export and editing.
 
 ### Rendering Flow
 
-```
-1. Application instantiates PictFormMetacontroller
-2. For each Section in manifest:
-   a. PictViewDynamicForm is created
-   b. ManifestFactory parses descriptors into groups and rows
-   c. MetatemplateGenerator creates layout templates
-3. Forms are rendered to DOM using template hierarchy
-4. Solvers are executed (expressions resolve values)
-5. Input providers initialize UI controls
-6. Event handlers attach for changes
-```
+1. The application instantiates the `PictFormMetacontroller`.
+2. For each section in the manifest, a `PictViewDynamicForm` is created,
+   `ManifestFactory` parses its descriptors into groups and rows, and
+   `MetatemplateGenerator` builds the layout templates.
+3. The forms render to the DOM through the template hierarchy.
+4. Solvers execute — expressions resolve their values.
+5. Input providers initialize the UI controls.
+6. Event handlers attach for change detection.
 
 ### Data Change Flow
 
-```
-1. User modifies input value
-2. dataChanged() called on PictViewDynamicForm
-3. Informary marshals specific input from DOM to AppData
-4. Input providers run onDataChange hooks
-5. Application.solve() executes all solvers
-6. Metacontroller marshals all sections back to view
-7. Input providers run onDataMarshalToForm hooks
-```
+1. The user modifies an input value.
+2. `dataChanged()` is called on the `PictViewDynamicForm`.
+3. Informary marshals that input from the DOM into `AppData`.
+4. Input providers run their `onDataChange` hooks.
+5. `Application.solve()` executes all solvers.
+6. The metacontroller marshals every section back to the view.
+7. Input providers run their `onDataMarshalToForm` hooks.
 
 ### Marshal Operations
 
@@ -131,19 +113,19 @@ to map form elements to their corresponding data addresses.
 
 Templates are rendered in a strict hierarchy:
 
-```
-Form Container
-└── Section (for each)
-    ├── Section Prefix
-    └── Group (for each)
-        ├── Group Prefix
-        └── Row (for each)
-            ├── Row Prefix
-            ├── Input (for each)
-            │   └── Input Template (by InputType or DataType)
-            └── Row Postfix
-        └── Group Postfix
-    └── Section Postfix
+```mermaid
+flowchart TD
+    FC["Form Container"] --> S["Section (for each)"]
+    S --> SP["Section Prefix"]
+    S --> G["Group (for each)"]
+    S --> SX["Section Postfix"]
+    G --> GP["Group Prefix"]
+    G --> R["Row (for each)"]
+    G --> GX["Group Postfix"]
+    R --> RP["Row Prefix"]
+    R --> I["Input (for each)"]
+    R --> RX["Row Postfix"]
+    I --> IT["Input Template (by InputType or DataType)"]
 ```
 
 Templates support three levels of customization:

package/docs/README.md

@@ -73,13 +73,6 @@ npm install pict-section-form
 - [Providers](Providers.md) - Provider reference
 - [Layouts](Layouts.md) - Layout types and customization
 
-## Example Applications
-
-- [simple_form](examples/simple_form/) - Basic form with solvers and visibility control
-- [simple_table](examples/simple_table/) - Minimal tabular layout example
-- [gradebook](examples/gradebook/) - Multi-table app with localStorage
-- [complex_table](examples/complex_table/) - Full-featured with charts and entity bundles
-
 ## Related Packages
 
 - [pict](https://github.com/stevenvelozo/pict) - Core application framework

package/docs/Solvers.md

@@ -211,6 +211,40 @@ aggregate values from arrays:
 ]
 ```
 
+### Tabular Row & Column Styling
+
+These functions style a whole row or whole column of a tabular group — every
+cell across or down. The highlight pair toggles a CSS class on a `1` / `0`
+flag; the color pair sets (`1`) or clears (`0`) an inline background color.
+None of them touch form data — they are purely presentational and re-applied
+on each solve.
+
+| Function | Description |
+|----------|-------------|
+| `HighlightTabularRow(sectionHash, groupHash, rowIndex, flag)` | Add (`1`) / remove (`0`) the `pict-tabular-row-highlight` class on every cell of a row |
+| `HighlightTabularColumn(sectionHash, groupHash, columnIndex, flag)` | Add (`1`) / remove (`0`) the `pict-tabular-column-highlight` class on every cell of a column |
+| `ColorTabularRow(sectionHash, groupHash, rowIndex, color, flag)` | Set (`1`) / clear (`0`) the background color on every cell of a row |
+| `ColorTabularColumn(sectionHash, groupHash, columnIndex, color, flag)` | Set (`1`) / clear (`0`) the background color on every cell of a column |
+
+`rowIndex` is the zero-based row. `columnIndex` is the column's input index
+(its position among the group's descriptors). The highlight classes are
+defined by pict-section-form; their tint follows the
+`--pict-tabular-highlight-color` CSS custom property.
+
+#### Tabular Styling Examples
+
+```json
+"Solvers": [
+  "ColorTabularRow('Performance', 'PerformanceGrid', 0, IF(getSectionTabularFormData('Performance', 'PerformanceGrid', 0, 'Average'), '>=', 85, '#BFE3BF', '#EBB8B8'), 1)",
+  "HighlightTabularColumn('Gradebook', 'GradebookGrid', 4, 1)"
+]
+```
+
+These pair naturally with the `RowSelection` / `ColumnSelection` tabular
+options (see [Layouts](Layouts.md)): the selection state is stored in the form
+data, and a solver can read it and call the highlight/color functions to drive
+presentation.
+
 ### Solver Control Functions
 
 | Function | Description |

package/docs/Templates.md

@@ -7,34 +7,26 @@ Templates can be customized at multiple levels to achieve any desired appearance
 
 Templates are rendered in a strict hierarchical order:
 
-```
-Form Level
-├── -Template-Form-Container-Header
-├── -Template-Form-Container-Wrap-Prefix
-│
-└── For each Section:
-    ├── -Template-Form-Container
-    │
-    └── -Template-Wrap-Prefix
-        ├── -Template-Section-Prefix
-        │
-        └── For each Group:
-            ├── -Template-Group-Prefix
-            │
-            └── For each Row:
-                ├── -Template-Row-Prefix
-                │   ├── For each Input:
-                │   │   └── -Template-Input-InputType-{type}
-                │   │      OR -Template-Input-DataType-{type}
-                │   │      OR -TabularTemplate-*
-                │   └── -Template-Row-Postfix
-                │
-                └── -Template-Group-Postfix
-        │
-        └── -Template-Section-Postfix
-    └── -Template-Wrap-Postfix
-│
-└── -Template-Form-Container-Wrap-Postfix
+```mermaid
+flowchart TD
+    F["Form Level"]
+    F --> FH["-Template-Form-Container-Header"]
+    F --> FWP["-Template-Form-Container-Wrap-Prefix"]
+    F --> SEC["For each Section"]
+    F --> FWX["-Template-Form-Container-Wrap-Postfix"]
+    SEC --> TFC["-Template-Form-Container"]
+    SEC --> WP["-Template-Wrap-Prefix"]
+    SEC --> WX["-Template-Wrap-Postfix"]
+    WP --> SP["-Template-Section-Prefix"]
+    WP --> GRP["For each Group"]
+    WP --> SX["-Template-Section-Postfix"]
+    GRP --> GP["-Template-Group-Prefix"]
+    GRP --> ROW["For each Row"]
+    GRP --> GX["-Template-Group-Postfix"]
+    ROW --> RP["-Template-Row-Prefix"]
+    ROW --> INP["For each Input"]
+    ROW --> RX["-Template-Row-Postfix"]
+    INP --> IT["-Template-Input-InputType-… or<br/>-Template-Input-DataType-… or<br/>-TabularTemplate-…"]
 ```
 
 ## Template Resolution

package/docs/_cover.md

@@ -9,3 +9,14 @@
 
 [GitHub](https://github.com/stevenvelozo/pict-section-form)
 [Get Started](#pict-section-form)
+
+<!-- docuserve:examples:start -->
+| Example | Complexity | Launch |
+|---------|------------|--------|
+| [Change Tracking](examples/change%5Ftracking/README.md) | Intermediate | [&#9654; Launch](examples/change%5Ftracking/index.html) |
+| [Dynamic Analysis](examples/dynamic%5Fanalysis/README.md) | Advanced | [&#9654; Launch](examples/dynamic%5Fanalysis/index.html) |
+| [Gradebook](examples/gradebook/README.md) | Intermediate | [&#9654; Launch](examples/gradebook/index.html) |
+| [NDT Field Test](examples/ndt%5Ffield%5Ftest/README.md) | Advanced | [&#9654; Launch](examples/ndt%5Ffield%5Ftest/index.html) |
+| [Scope Mathematics](examples/scope%5Fmathematics/README.md) | Intermediate | [&#9654; Launch](examples/scope%5Fmathematics/index.html) |
+| [Simple Table](examples/simple%5Ftable/README.md) | Basic | [&#9654; Launch](examples/simple%5Ftable/index.html) |
+<!-- docuserve:examples:end -->

package/docs/_playground.json

@@ -0,0 +1,47 @@
+{
+	"Kind": "section",
+	"SectionType":       "pict-section-form",
+	"ApplicationModule": "PictSectionForm",
+	"ApplicationGlobal": "PictFormApplication",
+	"ManifestKey":       "DefaultFormManifest",
+	"Editors":
+	[
+		{
+			"Hash":        "manifest",
+			"Label":       "Form Manifest",
+			"Language":    "json",
+			"DefaultPath": "playground/manifest.json"
+		},
+		{
+			"Hash":        "pictConfig",
+			"Label":       "Pict Config",
+			"Language":    "json",
+			"DefaultPath": "playground/pict.json"
+		},
+		{
+			"Hash":        "appConfig",
+			"Label":       "App Config",
+			"Language":    "json",
+			"DefaultPath": "playground/app.json"
+		},
+		{
+			"Hash":        "appData",
+			"Label":       "Initial AppData",
+			"Language":    "json",
+			"DefaultPath": "playground/appdata.json"
+		},
+		{
+			"Hash":        "application",
+			"Label":       "Application Code",
+			"Language":    "javascript",
+			"DefaultPath": "playground/application.js"
+		}
+	],
+	"Imports":
+	[
+		{ "Name": "pict",                "Source": "local", "Path": "playground/runtime/pict.min.js" },
+		{ "Name": "pict-application",    "Source": "local", "Path": "playground/runtime/pict-application.min.js" },
+		{ "Name": "pict-section-modal",  "Source": "local", "Path": "playground/runtime/pict-section-modal.min.js" },
+		{ "Name": "pict-section-form",   "Source": "local", "Path": "playground/runtime/pict-section-form.min.js" }
+	]
+}