From f4d7251dff77a0e084aab2609c4e1eb98eeaf51f Mon Sep 17 00:00:00 2001
From: "coderabbitai[bot]"
 <136622811+coderabbitai[bot]@users.noreply.github.com>
Date: Wed, 27 Aug 2025 03:40:42 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20Add=20docstrings=20to=20`inline`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Docstrings generation was requested by @dotpipe.

* https://github.com/dotpipe/dotPipe/pull/3#issuecomment-3226630774

The following files were modified:

* `API/dotpipe.js`
* `activeMenu/dotpipe.js`
* `addons/dotpipe.js`
* `bridge/dotpipe.js`
* `carousel/dotpipe.js`
* `cart/dotpipe.js`
* `columns/dotpipe.js`
* `csv-test/dotpipe.js`
* `doted/dotpipe.js`
* `dotpipe.js`
* `guitar/dotpipe.js`
* `inline/dotpipe.js`
* `landing/dotpipe.js`
* `login/dotpipe.js`
* `tree-view/dotpipe.js`
---
 API/dotpipe.js        | 135 +++++++++++++++++++++++++++++++++++++++---
 activeMenu/dotpipe.js | 118 +++++++++++++++++++++++++++++++++---
 addons/dotpipe.js     | 126 ++++++++++++++++++++++++++++++++++++---
 bridge/dotpipe.js     | 108 ++++++++++++++++++++++++++++++---
 carousel/dotpipe.js   | 107 ++++++++++++++++++++++++++++++---
 cart/dotpipe.js       | 107 ++++++++++++++++++++++++++++++---
 columns/dotpipe.js    |  96 +++++++++++++++++++++++++++---
 csv-test/dotpipe.js   | 110 +++++++++++++++++++++++++++++++---
 doted/dotpipe.js      | 104 +++++++++++++++++++++++++++++---
 dotpipe.js            | 111 +++++++++++++++++++++++++++++++---
 guitar/dotpipe.js     | 104 +++++++++++++++++++++++++++++---
 inline/dotpipe.js     | 106 ++++++++++++++++++++++++++++++---
 landing/dotpipe.js    | 123 +++++++++++++++++++++++++++++++++++---
 login/dotpipe.js      | 128 ++++++++++++++++++++++++++++++++++++---
 tree-view/dotpipe.js  | 127 ++++++++++++++++++++++++++++++++++++---
 15 files changed, 1605 insertions(+), 105 deletions(-)

diff --git a/API/dotpipe.js b/API/dotpipe.js
index 9bdd707..76aa969 100644
--- a/API/dotpipe.js
+++ b/API/dotpipe.js
@@ -5356,12 +5356,38 @@ function escapeHtml(html) {
 }
 
 /**
- * 
- * @param {JSON Object} value 
- * @param {string} tempTag 
- * @param {} root 
- * @param {*} id 
- * @returns HTML Object
+ * Render a JSON-defined UI fragment into a DOM container.
+ *
+ * Given a JSON "template" object, creates DOM nodes described by the object's keys
+ * and appends them into the provided container (tempTag). Supports nested objects,
+ * common presentation keys and helper directives used by the framework:
+ * - tagname / tagName: element tag to create (defaults to "div")
+ * - header: object rendered via modalaHead (also injects a CSP meta tag)
+ * - buttons: array of button definitions (text/value/attributes)
+ * - sources: semicolon-separated sources for cards/carousels (img/audio/video/html/php)
+ * - css / js: external asset URLs to inject as <link> / <script>
+ * - html / php: URL to fetch and insert as HTML (fetched asynchronously)
+ * - select / options: create <select> and populate <option> elements
+ * - br: numeric count of <br> elements to insert
+ * - style: CSS text for the element
+ * - textcontent / innerhtml / innertext: content setters (newlines converted to <br>)
+ * - boxes / id / index and arbitrary attributes are applied where appropriate
+ *
+ * This function mutates the DOM: it appends created elements to tempTag (or the
+ * element referenced by tempTag if an id string is passed), may append a CSP meta
+ * tag when header is present, and triggers domContentLoad() after insertion.
+ *
+ * @param {Object} value - JSON template describing the element and its children.
+ *                         Keys and supported directives are documented above.
+ * @param {HTMLElement|string} tempTag - Container element or the id of a container
+ *                                       to append generated content into.
+ * @param {HTMLElement} [root] - Optional root element used for header processing;
+ *                               defaults to tempTag when omitted.
+ * @param {*} [id] - Optional identifier passed through to nested processing (unused
+ *                   by most templates).
+ * @returns {HTMLElement|undefined} The container element (tempTag as an HTMLElement)
+ *                                 after appending the generated content, or
+ *                                 undefined if required inputs are missing.
  */
 function modala(value, tempTag, root, id) {
     if (typeof (tempTag) == "string") {
@@ -5798,6 +5824,21 @@ function fileOrder(elem) {
 }
 
 
+/**
+ * Parse an HTML string and convert the first top-level element into a JSON-like tree.
+ *
+ * The returned object represents the element structure with these fields:
+ * - tagName: lower-cased tag name (e.g., "div")
+ * - attributes: an object mapping attribute names to values
+ * - children: an array of child nodes where element children are nested objects (same shape)
+ *   and text nodes are represented as { type: 'text', content: '...' }.
+ *
+ * Only the first child of the parsed document body is converted (i.e., the top-level element
+ * produced by parsing `htmlString`). Empty text nodes are skipped.
+ *
+ * @param {string} htmlString - HTML markup to parse (must contain at least one top-level element).
+ * @returns {{tagName: string, attributes: Object<string,string>, children: Array<Object>|Array>} A JSON-like representation of the first top-level element.
+ */
 function htmlToJson(htmlString) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(htmlString, 'text/html');
@@ -5833,9 +5874,31 @@ function htmlToJson(htmlString) {
 }
 // Helpers to track which elements have pipe listeners
 const pipeListenersSet = new WeakSet();
+/**
+ * Check whether an element is already registered in the internal set of pipe listeners.
+ * @param {Element} elem - DOM element to test.
+ * @returns {boolean} True if the element is present in the pipe listeners set.
+ */
 function hasPipeListener(elem) { return pipeListenersSet.has(elem); }
+/**
+ * Mark a DOM element as having a pipe listener attached so it won't be re-registered.
+ * @param {Element} elem - The element to mark (typically a pipe-related element).
+ */
 function markPipeListener(elem) { pipeListenersSet.add(elem); }
 
+/**
+ * Attaches global pipe listeners and processes CSV-for-each elements under a root node.
+ *
+ * Adds capturing listeners for 'click' and custom 'inline' events on the provided root element. When an event
+ * targets an element that is eligible (has the 'mouse' class or an id) and hasn't already been wired, the element
+ * is marked as having a pipe listener, passed through the `pipes` processor, and—if it has an `inline` attribute—
+ * registered in `dotPipe.matrix` and executed via `dotPipe.runInline`.
+ *
+ * Additionally, scans for `<csv-foreach>` elements within the root and invokes `processCsvForeach` for any
+ * unprocessed instances, marking them with the `processed` class to avoid duplicate work.
+ *
+ * @param {Document|Element} [rootElem=document] - Root node to attach listeners to and to scan for `<csv-foreach>` elements.
+ */
 function addPipe(rootElem = document) {
     // Global listeners for clicks or custom 'inline' events
     ['click', 'inline'].forEach(eventType => {
@@ -5898,7 +5961,15 @@ function addPipe(rootElem = document) {
 //         }
 //     });
 
-// }
+/**
+ * Ensure an element has a click handler that invokes the pipe dispatcher and then triggers a DOM re-scan.
+ *
+ * Attaches a click listener to the provided element that calls pipes(elem). Attempts to remove a previous click listener first
+ * (note: removal relies on identical function reference). After wiring the listener, calls domContentLoad(true) to reprocess
+ * dynamic/custom tags within the document.
+ *
+ * @param {Element} elem - The DOM element to bind the click handler to; nothing is done if the element has no id.
+ */
 
 function flashClickListener(elem) {
     if (elem.id) {
@@ -5952,6 +6023,22 @@ function sortNodesByName(selector) {
 }
 
 
+/**
+ * Execute a set of declarative UI actions described by an element's attributes and classes.
+ *
+ * Inspects the provided DOM element for dotPipe-specific attributes and class markers (e.g., `ajax`, `modal`, `inline`, `insert`, `query`, `headers`, `download`, `clear-node`, `turn`, `x-toggle`, `set`, `get`, `remove`, carousel controls, redirect, etc.) and performs the corresponding side-effectful operations:
+ * - Triggers registered callbacks and inline macros.
+ * - Performs navigation/AJAX loads via `navigate` for `ajax` attributes (supports multiple `file:target:limit` parts).
+ * - Opens links or modals, starts/stops carousels, rotates lists, toggles classes, sets/removes attributes, clears or removes nodes, and initiates downloads.
+ * - Parses `query` and `headers` attributes into request data used by AJAX navigation.
+ * - Honors `disabled`, `clear-node`, and `redirect` semantics and returns early when appropriate.
+ *
+ * Most actions mutate the DOM, initiate network requests, or trigger other global behaviors; this function does not return a value.
+ *
+ * @param {Element} elem - The element whose attributes/classes define the actions to perform.
+ * @param {boolean} [stop=false] - Reserved/unused in current implementation; callers may pass true to indicate higher-level flow control (no effect here).
+ * @returns {void}
+ */
 function pipes(elem, stop = false) {
 
     var query = "";
@@ -6237,6 +6324,40 @@ function displayColoredJson(elementId, jsonObj) {
     document.getElementById(elementId).innerHTML = `<pre>${prettyHtml}</pre>`;
 }
 
+/**
+ * Send an AJAX request using an element's `ajax` attribute and insert or render the response
+ * according to the element's CSS classes (JSON, HTML, plain text, tree view, modala, etc.).
+ *
+ * The function builds a query string by combining `query` with any form-encoded data returned
+ * by `formAJAX(elem, classname)` when `classname` matches elements on the page, encodes it,
+ * applies request options via `setAJAXOpts`, then performs an XMLHttpRequest to
+ * `elem.getAttribute("ajax") + "?" + encodedQuery`. Response handling branches by the
+ * element's classes:
+ * - `strict-json` — validates response is JSON and replaces document.body with it.
+ * - `json` — parses JSON, calls `displayColoredJson(insertId, parsed)`, and writes pretty JSON
+ *   to the element referenced by `insert` (if present).
+ * - `text-html` — writes response as innerHTML into the element referenced by `insert`.
+ * - `plain-text` — writes response as textContent into the element referenced by `insert`.
+ * - `tree-view` — parses JSON and calls `renderTree(parsed, targetElement)`.
+ * - `modala` — parses JSON and renders via `modala()` into the `insert` target; supports
+ *   multi-box behavior controlled by `boxes` and `modala-multi-first` / `modala-multi-last`.
+ * - default — writes response HTML into the element referenced by `insert` if present.
+ *
+ * After inserting or rendering content the function invokes `domContentLoad()` and
+ * `flashClickListener(elem)` to initialize processed content and UI behavior.
+ *
+ * Note: this function mutates the DOM and logs warnings when required `insert` targets are missing.
+ *
+ * @param {Element} elem - The source element; must have an `ajax` attribute with the request URL,
+ *                         and may include classes (e.g., `json`, `text-html`, `modala`) and an
+ *                         `insert` attribute naming the target element id for inserted content.
+ * @param {Map|Object|null} [opts=null] - Optional request option container; will be normalized via
+ *                                        `setAJAXOpts`. (Internal option handling; callers rarely need to set this.)
+ * @param {string} [query=""] - Query string fragment to append to the request URL; additional form
+ *                              data may be appended from elements matching `classname`.
+ * @param {string} [classname=""] - If non-empty and matching elements exist, `formAJAX(elem, classname)`
+ *                                 is used to collect and append form-encoded data to `query`.
+ */
 function navigate(elem, opts = null, query = "", classname = "") {
     //formAJAX at the end of this line
     // console.log(elem);
diff --git a/activeMenu/dotpipe.js b/activeMenu/dotpipe.js
index 9bdd707..c399ad0 100644
--- a/activeMenu/dotpipe.js
+++ b/activeMenu/dotpipe.js
@@ -5356,12 +5356,31 @@ function escapeHtml(html) {
 }
 
 /**
- * 
- * @param {JSON Object} value 
- * @param {string} tempTag 
- * @param {} root 
- * @param {*} id 
- * @returns HTML Object
+ * Render a JSON-described UI node into a target DOM container.
+ *
+ * Processes a JSON "modal" descriptor (hierarchical object with keys like
+ * tagname, header, css, js, html, php, buttons, sources, select/options,
+ * textcontent/innerhtml/innertext, style, and arbitrary attributes), creates
+ * corresponding DOM nodes, appends them to the provided target, and triggers
+ * post-processing for any newly inserted dotPipe elements.
+ *
+ * This function has side effects: it appends created elements (and any fetched
+ * HTML/CSS/JS resources) into the DOM, may inject a CSP <meta> when a
+ * header object is present, performs fetches for external html/php sources,
+ * and calls domContentLoad() after insertion.
+ *
+ * @param {Object} value - JSON descriptor for the element to create. Expected
+ *   properties include `tagname` (or `tagName`), `header`, `buttons`, `sources`,
+ *   `css`, `js`, `html`, `php`, `select`/`options`, `textcontent`/`innerhtml`/`innertext`,
+ *   `style`, and arbitrary attributes. Nested objects are rendered recursively.
+ * @param {string|HTMLElement} tempTag - Target container element or the id of
+ *   the target element to which the rendered node will be appended.
+ * @param {HTMLElement} [root] - Optional root element used for header processing;
+ *   if omitted it defaults to the resolved tempTag.
+ * @param {*} [id] - Optional identifier passed through to nested processing (not
+ *   required for typical use).
+ * @returns {HTMLElement|undefined} The target container (tempTag) after appending
+ *   the rendered content, or undefined if required inputs are missing or invalid.
  */
 function modala(value, tempTag, root, id) {
     if (typeof (tempTag) == "string") {
@@ -5798,6 +5817,19 @@ function fileOrder(elem) {
 }
 
 
+/**
+ * Parse an HTML string and return a JSON representation of its first top-level element.
+ *
+ * The returned object describes the element tree with these keys:
+ * - tagName: lowercase tag name
+ * - attributes: map of attribute names to values
+ * - children: array of child nodes; element children are similar objects, text nodes are
+ *   represented as { type: 'text', content: '...' } (whitespace-only text nodes are omitted)
+ *
+ * @param {string} htmlString - HTML fragment or document to parse.
+ * @return {object|null} JSON representation of the first element found in the parsed HTML body,
+ *                       or null if no element is present.
+ */
 function htmlToJson(htmlString) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(htmlString, 'text/html');
@@ -5833,9 +5865,34 @@ function htmlToJson(htmlString) {
 }
 // Helpers to track which elements have pipe listeners
 const pipeListenersSet = new WeakSet();
+/**
+ * Check whether a DOM element is registered as a pipe listener.
+ *
+ * @param {Element} elem - The DOM element to check.
+ * @return {boolean} True if the element is registered in the internal pipeListenersSet, otherwise false.
+ */
 function hasPipeListener(elem) { return pipeListenersSet.has(elem); }
+/**
+ * Mark an element as processed for pipe listeners so it won't be registered again.
+ * @param {Element} elem - The DOM element to mark as having pipe listeners attached.
+ */
 function markPipeListener(elem) { pipeListenersSet.add(elem); }
 
+/**
+ * Install event listeners and initialize per-root dynamic handlers for dotPipe elements.
+ *
+ * Attaches capture-phase listeners for "click" and custom "inline" events on the provided root (default: document).
+ * When an event originates from an unprocessed element that either has class "mouse" or an id, this will:
+ * - mark the element as having a pipe listener,
+ * - invoke pipes(target) to perform standard pipe processing,
+ * - if the element has an `inline` attribute, ensure a dotPipe.matrix entry for it and run dotPipe.runInline for that entry.
+ *
+ * Additionally scans the root for <csv-foreach> elements and runs processCsvForeach on any not already processed, marking them with the "processed" class.
+ *
+ * Note: This function mutates global state (adds listeners, updates dotPipe.matrix, and may fetch/insert content via pipes/runInline).
+ *
+ * @param {Element|Document} [rootElem=document] - Root element under which listeners are attached and child custom tags are initialized.
+ */
 function addPipe(rootElem = document) {
     // Global listeners for clicks or custom 'inline' events
     ['click', 'inline'].forEach(eventType => {
@@ -5898,7 +5955,14 @@ function addPipe(rootElem = document) {
 //         }
 //     });
 
-// }
+/**
+ * Ensure an element runs the pipe processing on click and refreshes dotPipe processing.
+ *
+ * If the provided element has an `id`, a click listener is attached that calls `pipes(elem)` when clicked.
+ * After (re)binding, `domContentLoad(true)` is invoked to (re)process dotPipe-supported elements.
+ *
+ * @param {HTMLElement} elem - The target element; must be a DOM element (typically with an `id`) to receive the click binding.
+ */
 
 function flashClickListener(elem) {
     if (elem.id) {
@@ -5952,6 +6016,24 @@ function sortNodesByName(selector) {
 }
 
 
+/**
+ * Process a custom dotPipe element and perform its configured actions (AJAX loads, navigation, modal rendering, DOM mutations, downloads, carousel controls, toggles, attribute ops, etc.).
+ *
+ * This inspects attributes and classes on the provided element and executes the corresponding behavior:
+ * - Triggers callback functions named by the `callback` attribute.
+ * - Performs navigation/AJAX loads when `ajax` is present (may call `navigate` or create cloned loaders).
+ * - Opens links for `<lnk>` elements, triggers downloads for elements with class `download`.
+ * - Handles modal lists via `modal` and carousel controls / stepping via carousel-related classes.
+ * - Applies simple DOM operations driven by attributes: `display`, `turn`, `x-toggle`, `set`, `get`, `delete`, `remove`, `headers`, `query`, `form-class`, `file-order`, and `clear-node`.
+ * - Invokes dotPipe inline macro registration/run when encountering inline content during `turn` processing.
+ * - Early-returns for disabled elements or after actions that replace responsibility (e.g., carousel start, download, redirect).
+ *
+ * Note: The function mutates the DOM, may call global helpers (dotPipe, navigate, modalList, shiftFilesLeft/Right, carousel, fileOrder, etc.), and may change window.location. It does not return a value.
+ *
+ * @param {HTMLElement} elem - The element to process; expected to be a custom dotPipe tag or decorated element.
+ * @param {boolean} [stop=false] - Optional flag (currently unused) reserved for future control of processing flow.
+ * @returns {void}
+ */
 function pipes(elem, stop = false) {
 
     var query = "";
@@ -6237,6 +6319,28 @@ function displayColoredJson(elementId, jsonObj) {
     document.getElementById(elementId).innerHTML = `<pre>${prettyHtml}</pre>`;
 }
 
+/**
+ * Send an AJAX request built from an element's `ajax` attribute and injects the response into the DOM.
+ *
+ * Builds a query string (optionally augmented by formAJAX when `classname` matches), encodes it,
+ * applies AJAX options via setAJAXOpts, issues an XMLHttpRequest to the URL from the element's
+ * `ajax` attribute, and handles the response according to classes on the element:
+ * - `strict-json`: replaces document.body with the raw JSON response if it's valid JSON.
+ * - `json`: pretty-prints JSON into the target `insert` element and calls domContentLoad.
+ * - `text-html`: inserts response as HTML into the `insert` element.
+ * - `plain-text`: inserts response as text into the `insert` element.
+ * - `tree-view`: parses JSON and renders it via renderTree into the element with elem.id.
+ * - `modala`: parses JSON and renders modala content into the element named by `insert`, supporting multi-box behavior.
+ * - default: injects raw response into the `insert` element when no special class or callback is present.
+ *
+ * Side effects: performs network request, mutates DOM (inserts/replaces content), calls domContentLoad()
+ * and flashClickListener(), and may log warnings for missing `insert` targets.
+ *
+ * @param {Element} elem - The source element containing attributes that control navigation (must have an `ajax` attribute; optional `insert`, and behavior-driving CSS classes).
+ * @param {Map|Object|null} [opts=null] - AJAX option container passed to setAJAXOpts (method, headers, mode, etc.). If null, defaults are applied.
+ * @param {string} [query=""] - Additional query string to append to the request URL (will be URI-encoded).
+ * @param {string} [classname=""] - If non-empty, formAJAX(elem, classname) will be called and its output appended to the query string.
+ */
 function navigate(elem, opts = null, query = "", classname = "") {
     //formAJAX at the end of this line
     // console.log(elem);
diff --git a/addons/dotpipe.js b/addons/dotpipe.js
index 9bdd707..7ad96fb 100644
--- a/addons/dotpipe.js
+++ b/addons/dotpipe.js
@@ -5356,12 +5356,27 @@ function escapeHtml(html) {
 }
 
 /**
- * 
- * @param {JSON Object} value 
- * @param {string} tempTag 
- * @param {} root 
- * @param {*} id 
- * @returns HTML Object
+ * Render a JSON-described DOM fragment into a target container.
+ *
+ * Builds DOM nodes described by the `value` object (a simple JSON template), appends them into `tempTag`
+ * (or the element referenced by `tempTag` if a string id is provided), and returns the container element.
+ *
+ * The template object supports keys such as `tagname`/`tagName`, `header`, `buttons`, `select`, `options`,
+ * `sources`, `css`, `js`, `html`, `php`, `br`, `style`, and textual properties (`textContent`/`innerHTML`/`innerText`).
+ * - Nested objects are traversed recursively.
+ * - Remote `html`/`php`/`sources` entries are fetched asynchronously and appended when responses arrive.
+ * - If a `header` object is present, modalaHead(...) is invoked and a CSP meta tag is appended to document.head.
+ *
+ * Side effects:
+ * - Appends created nodes to the provided container element.
+ * - May append <link>/<script> elements or a CSP <meta> to document.head.
+ * - Initiates asynchronous fetches for `html`/`php`/remote source entries.
+ *
+ * @param {Object} value - JSON-like template describing the element(s) to create.
+ * @param {HTMLElement|string} tempTag - Container element or id of the container to append into.
+ * @param {HTMLElement} [root] - Optional root element used when building nested structures; defaults to resolved tempTag.
+ * @param {*} [id] - Unused identifier placeholder (kept for compatibility).
+ * @returns {HTMLElement|undefined} The container element the template was appended into, or undefined if input was invalid.
  */
 function modala(value, tempTag, root, id) {
     if (typeof (tempTag) == "string") {
@@ -5798,6 +5813,17 @@ function fileOrder(elem) {
 }
 
 
+/**
+ * Parse an HTML string and return a JSON representation of the first top-level element in the parsed body.
+ *
+ * The returned object describes element nodes with keys:
+ * - `tagName` (lowercased tag name)
+ * - `attributes` (map of attribute names to values)
+ * - `children` (array of child nodes). Element children are represented with the same shape; text nodes are objects `{ type: 'text', content: '...' }`.
+ *
+ * @param {string} htmlString - An HTML fragment or document string to parse.
+ * @returns {Object} JSON representation of the first element found in the parsed document body.
+ */
 function htmlToJson(htmlString) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(htmlString, 'text/html');
@@ -5833,9 +5859,33 @@ function htmlToJson(htmlString) {
 }
 // Helpers to track which elements have pipe listeners
 const pipeListenersSet = new WeakSet();
+/**
+ * Check whether a DOM element already has a pipe listener attached.
+ * @param {Element} elem - DOM element to check for an attached pipe listener.
+ * @returns {boolean} True if the element is registered in the internal pipe listener set.
+ */
 function hasPipeListener(elem) { return pipeListenersSet.has(elem); }
+/**
+ * Mark an element as having been processed for pipe listeners to prevent duplicate attachments.
+ * @param {Element} elem - DOM element to record as having pipe listeners attached.
+ */
 function markPipeListener(elem) { pipeListenersSet.add(elem); }
 
+/**
+ * Attach global pipe listeners to a root element and process CSV-foreach elements.
+ *
+ * Adds delegated listeners for 'click' and custom 'inline' events on the provided root (using capture),
+ * runs the pipes dispatcher for clicked/inline-targeted elements, and, when an element has an
+ * `inline` attribute, ensures a dotPipe.matrix entry exists and invokes dotPipe.runInline for that element.
+ * Also finds any <csv-foreach> children under the root and calls processCsvForeach on unprocessed ones.
+ *
+ * Side effects:
+ * - Registers event listeners on the root element (capturing phase).
+ * - Mutates dotPipe.matrix for elements that expose an `inline` attribute.
+ * - Marks elements as having pipe listeners and marks <csv-foreach> nodes as processed.
+ *
+ * @param {ParentNode} [rootElem=document] - Root node to attach listeners to and scan for <csv-foreach>.
+ */
 function addPipe(rootElem = document) {
     // Global listeners for clicks or custom 'inline' events
     ['click', 'inline'].forEach(eventType => {
@@ -5898,7 +5948,14 @@ function addPipe(rootElem = document) {
 //         }
 //     });
 
-// }
+/**
+ * Ensure an element responds to clicks by invoking the framework pipe runner, then refreshes inline processing.
+ *
+ * If the provided element has an `id`, this adds a click listener that calls `pipes(elem)` when clicked.
+ * After installing the listener (or skipping if no id), `domContentLoad(true)` is invoked to re-run inline processing.
+ *
+ * @param {HTMLElement} elem - The element to attach the click handler to (must have an `id` to receive the listener).
+ */
 
 function flashClickListener(elem) {
     if (elem.id) {
@@ -5952,6 +6009,30 @@ function sortNodesByName(selector) {
 }
 
 
+/**
+ * Dispatches a wide range of UI actions based on attributes and classes of a DOM element.
+ *
+ * Inspects the provided element's attributes and class list and performs side-effecting operations such as:
+ * - invoking a named callback (via the `callback` attribute),
+ * - client-side redirects (`redirect` class),
+ * - clearing or toggling DOM nodes (`clear-node`, `display`, `x-toggle`),
+ * - attribute transfers and mutations (`set`, `get`, `delete`, `remove`),
+ * - opening links (`lnk` tag),
+ * - rotating lists via `turn`,
+ * - controlling carousels and file order,
+ * - initiating AJAX/navigation loads (`ajax` attribute, including multi-target `ajax` entries),
+ * - creating an immediate file download (`download` class),
+ * - opening modal lists (`modal` attribute),
+ * - and other framework-specific actions (e.g., delegating to dotPipe.runInline, carousel helpers, navigate, modalList).
+ *
+ * The function performs its work by reading element attributes such as `ajax`, `query`, `headers`, `form-class`, `insert`,
+ * `file-order`, `modal`, and many others, and by inspecting classes like `disabled`, `carousel`, `download`, and carousel step/slide
+ * classes. All operations are executed as side effects on the document, window, and framework state; the function does not return a value.
+ *
+ * @param {Element} elem - The DOM element whose attributes/classes drive the dispatched actions.
+ * @param {boolean} [stop=false] - Optional flag (unused by most internal paths) reserved for future control flow; does not alter current behavior.
+ * @returns {void}
+ */
 function pipes(elem, stop = false) {
 
     var query = "";
@@ -6237,6 +6318,37 @@ function displayColoredJson(elementId, jsonObj) {
     document.getElementById(elementId).innerHTML = `<pre>${prettyHtml}</pre>`;
 }
 
+/**
+ * Perform an AJAX navigation/request driven by an element's attributes and inject the response into the DOM.
+ *
+ * Sends a request to the URL specified by elem.getAttribute("ajax") with an encoded query string (optionally augmented
+ * by formAJAX when elements matching `classname` exist). Response handling is determined by classes on `elem`:
+ * - strict-json: replaces document.body with raw JSON (only if valid JSON).
+ * - json: parses JSON and renders colored output via displayColoredJson, optionally placing pretty JSON into the
+ *   element referenced by the `insert` attribute.
+ * - text-html: inserts raw HTML into the `insert` target.
+ * - plain-text: inserts textContent into the `insert` target.
+ * - tree-view: parses JSON and renders a tree into the element by id (uses renderTree).
+ * - modala: parses JSON and renders modal content (uses modala) into the `insert` target; supports multi-box behavior
+ *   via `boxes`, `modala-multi-first` and `modala-multi-last` classes.
+ * - default: inserts raw response HTML into the `insert` target unless a `callback` attribute is present.
+ *
+ * Side effects:
+ * - Performs network requests via XMLHttpRequest.
+ * - Mutates DOM (inserts/replaces content), may replace document.body for strict-json.
+ * - Calls framework helpers such as domContentLoad(), flashClickListener(), displayColoredJson(), renderTree(), and modala().
+ * - Emits console warnings when required attributes/targets are missing (e.g., modala without `insert`).
+ *
+ * @param {HTMLElement} elem - The element that drives the navigation; expected to have an `ajax` attribute (request URL)
+ *   and optionally an `insert` attribute (id of the target element to receive response content). Class names on this
+ *   element determine response parsing and insertion behavior.
+ * @param {Map|Object|null} [opts=null] - AJAX options object or Map consumed by setAJAXOpts; if provided it will be
+ *   normalized/merged by setAJAXOpts before the request is sent.
+ * @param {string} [query=""] - Base query string to append to the request URL. formAJAX may append additional form data
+ *   when elements matching `classname` exist.
+ * @param {string} [classname=""] - CSS class name used to locate form inputs for formAJAX; when matching elements exist,
+ *   formAJAX(elem, classname) is appended to the query string.
+ */
 function navigate(elem, opts = null, query = "", classname = "") {
     //formAJAX at the end of this line
     // console.log(elem);
diff --git a/bridge/dotpipe.js b/bridge/dotpipe.js
index 9bdd707..0949c51 100644
--- a/bridge/dotpipe.js
+++ b/bridge/dotpipe.js
@@ -5356,12 +5356,21 @@ function escapeHtml(html) {
 }
 
 /**
- * 
- * @param {JSON Object} value 
- * @param {string} tempTag 
- * @param {} root 
- * @param {*} id 
- * @returns HTML Object
+ * Render a JSON-like descriptor into DOM nodes and append the result into a target container.
+ *
+ * This function interprets a structured `value` object (commonly produced by `modala`-style JSON)
+ * to create elements, attributes, nested content, and external resources (CSS/JS/html/php).
+ * It supports special keys: `tagname`/`tagName`, `header` (processed via modalaHead and injects a CSP meta),
+ * `buttons`, `sources`, `css`, `js`, `html`, `php`, `select`/`options`, `br`, `style`, and text/HTML content
+ * via `textcontent` / `innerhtml` / `innertext`. Created elements are appended to `tempTag`; after insertion
+ * the function calls domContentLoad() to process any new dotPipe tags.
+ *
+ * @param {Object} value - JSON-like descriptor describing element(s) to create. Keys control tags, attributes,
+ *                         nested objects, and supported special behaviors (see above).
+ * @param {HTMLElement|string} tempTag - Container element or its id string where the generated content will be appended.
+ * @param {HTMLElement} [root] - Optional root element used when processing headers; defaults to the resolved tempTag.
+ * @param {*} [id] - Optional identifier (currently passed through but not required by the renderer).
+ * @returns {HTMLElement|undefined} The container (`tempTag`) after content has been appended, or undefined on error.
  */
 function modala(value, tempTag, root, id) {
     if (typeof (tempTag) == "string") {
@@ -5798,6 +5807,17 @@ function fileOrder(elem) {
 }
 
 
+/**
+ * Parse an HTML string and produce a JSON-like representation of the first top-level element.
+ *
+ * The returned object represents an element with fields:
+ * - `tagName` (lowercased tag name),
+ * - `attributes` (map of attribute name → value),
+ * - `children` (array of child nodes where element nodes are the same shape and text nodes are `{ type: 'text', content: '...' }`).
+ *
+ * @param {string} htmlString - HTML source to parse (may contain a fragment or full document); the function converts the first element under the parsed document body.
+ * @return {Object} JSON-like representation of the first body child element (see description).
+ */
 function htmlToJson(htmlString) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(htmlString, 'text/html');
@@ -5833,9 +5853,32 @@ function htmlToJson(htmlString) {
 }
 // Helpers to track which elements have pipe listeners
 const pipeListenersSet = new WeakSet();
+/**
+ * Check whether a given DOM element is currently tracked as having a pipe listener.
+ *
+ * @param {Element} elem - The DOM element to test.
+ * @returns {boolean} True if the element is present in the internal pipe listener set, otherwise false.
+ */
 function hasPipeListener(elem) { return pipeListenersSet.has(elem); }
+/**
+ * Mark a DOM element as already hooked for pipe/listener handling so it won't be processed again.
+ * @param {Element} elem - The element to mark as processed. */
 function markPipeListener(elem) { pipeListenersSet.add(elem); }
 
+/**
+ * Attach global event handlers and initialize inline/csv-foreach processing within a root element.
+ *
+ * Adds delegated listeners for 'click' and custom 'inline' events on the given root (default: document).
+ * When an event target is eligible (has class "mouse" or an id and hasn't been processed), the handler:
+ *  - marks the element so it won't be re-bound,
+ *  - runs the pipe processor for that element (pipes),
+ *  - if the element has an `inline` attribute, ensures a dotPipe.matrix entry and invokes dotPipe.runInline for it.
+ *
+ * The function also finds any <csv-foreach> elements under the root and calls processCsvForeach on each
+ * unprocessed instance, marking them with the "processed" class.
+ *
+ * @param {Document|Element} [rootElem=document] - Root node to attach listeners and scan for <csv-foreach> elements.
+ */
 function addPipe(rootElem = document) {
     // Global listeners for clicks or custom 'inline' events
     ['click', 'inline'].forEach(eventType => {
@@ -5898,7 +5941,15 @@ function addPipe(rootElem = document) {
 //         }
 //     });
 
-// }
+/**
+ * Attach a click handler to an element that triggers the dotPipe pipeline and refreshes tag processing.
+ *
+ * If the element has an id, any existing click listener added by this function is removed and a new one is added;
+ * the click listener calls `pipes(elem)` when fired. After rebinding (or immediately if no id), `domContentLoad(true)` is invoked
+ * to re-scan/process custom tags.
+ *
+ * @param {Element} elem - The DOM element to bind the click handler to (only processed if it has an `id`).
+ */
 
 function flashClickListener(elem) {
     if (elem.id) {
@@ -5952,6 +6003,24 @@ function sortNodesByName(selector) {
 }
 
 
+/**
+ * Process a dotPipe "pipe" element: perform DOM actions, navigation, AJAX/modals, carousel controls, downloads, and attribute manipulations driven by the element's attributes/classes.
+ *
+ * This inspects the provided element for supported attributes and classes (e.g., `ajax`, `modal`, `query`, `headers`, `turn`, `x-toggle`, `set`, `get`, `remove`, `download`, carousel classes, `callback`, `display`, `clear-node`, etc.) and executes the corresponding side effects:
+ * - triggers navigation/AJAX loads via navigate() or modalList()
+ * - opens links or performs window.location redirects
+ * - calls a global callback function when `callback` is present
+ * - manipulates other DOM nodes (show/hide, set/remove attributes, remove nodes, clear content)
+ * - controls carousel behavior (shift/slide/turn)
+ * - starts downloads by creating a temporary anchor and clicking it
+ * - rotates `turn` lists and re-invokes inline pipes when appropriate
+ *
+ * Side effects: performs network requests, opens new windows/tabs, mutates the DOM, and may call globally-scoped functions.
+ *
+ * @param {Element} elem - The element whose pipe behavior should be executed.
+ * @param {boolean} [stop=false] - Optional flag (currently unused) reserved for halting/short-circuiting processing.
+ * @returns {void}
+ */
 function pipes(elem, stop = false) {
 
     var query = "";
@@ -6237,6 +6306,31 @@ function displayColoredJson(elementId, jsonObj) {
     document.getElementById(elementId).innerHTML = `<pre>${prettyHtml}</pre>`;
 }
 
+/**
+ * Send an AJAX GET request built from the provided element and inject the response into the DOM.
+ *
+ * Builds a request URL by combining `query` with form data (when elements with `classname` exist),
+ * encodes it, applies AJAX options via `setAJAXOpts`, then issues an XMLHttpRequest to the URL
+ * taken from the element's `ajax` attribute. Response handling varies by element classes:
+ * - `strict-json`: replaces document.body with raw JSON text only if it parses.
+ * - `json`: parses JSON and renders it via `displayColoredJson`, optionally inserting into `insert` target.
+ * - `text-html`: inserts raw HTML into the element referenced by `insert`.
+ * - `plain-text`: inserts response text into the `insert` target as textContent.
+ * - `tree-view`: parses JSON and renders a tree via `renderTree`.
+ * - `modala`: parses JSON and renders modal content via `modala` into the element referenced by `insert`.
+ * - default: inserts raw response HTML into the `insert` target (when present).
+ *
+ * Side effects:
+ * - Updates DOM nodes specified by the element's `insert` attribute.
+ * - Calls `domContentLoad()` after inserting content to re-process dotPipe tags.
+ * - Calls `flashClickListener(elem)` after successful loads for UI feedback.
+ * - May call `renderTree`, `modala`, or `displayColoredJson` depending on element classes.
+ *
+ * @param {Element} elem - The source element that provides attributes (`ajax`, `insert`, classes) guiding the request and insertion.
+ * @param {Map|Object|null} [opts=null] - Optional AJAX options; passed through `setAJAXOpts` for normalization.
+ * @param {string} [query=""] - Initial query string to append to the request URL; form data may be appended.
+ * @param {string} [classname=""] - If elements with this CSS class exist on the page, `formAJAX(elem, classname)` is appended to the query string.
+ */
 function navigate(elem, opts = null, query = "", classname = "") {
     //formAJAX at the end of this line
     // console.log(elem);
diff --git a/carousel/dotpipe.js b/carousel/dotpipe.js
index 9bdd707..b05d7b9 100644
--- a/carousel/dotpipe.js
+++ b/carousel/dotpipe.js
@@ -5356,12 +5356,15 @@ function escapeHtml(html) {
 }
 
 /**
- * 
- * @param {JSON Object} value 
- * @param {string} tempTag 
- * @param {} root 
- * @param {*} id 
- * @returns HTML Object
+ * Render a JSON-described UI tree into a target container, creating DOM nodes, attributes, resources, and nested content.
+ *
+ * Given a JSON-like `value` describing elements (e.g., tagname, attributes, children, special keys like `css`, `js`, `html`, `php`, `sources`, `buttons`, `header`, etc.), this function builds the corresponding DOM structure and appends it into `tempTag` (or the element referenced by `tempTag` if a string id is supplied). It will fetch external HTML/PHP fragments and inject resources (scripts/links), handle simple media source lists, create form/select/options/inputs, and call modalaHead for `header` content when present. After rendering, it triggers domContentLoad() to process any newly inserted dotPipe tags.
+ *
+ * @param {Object} value - JSON-like descriptor for an element or subtree (expected keys: `tagname`/`tagName`, attribute names, and special directive keys handled by modala).
+ * @param {string|HTMLElement} tempTag - Target container element or its id where the generated nodes will be appended.
+ * @param {HTMLElement} [root] - Root element used for certain head/resource injections; defaults to `tempTag` when omitted.
+ * @param {*} [id] - Optional identifier passed through to nested processing (opaque; used by some descriptor formats).
+ * @returns {HTMLElement|undefined} The container element (`tempTag` as HTMLElement) after appending the generated content, or `undefined` if required arguments are missing.
  */
 function modala(value, tempTag, root, id) {
     if (typeof (tempTag) == "string") {
@@ -5798,6 +5801,21 @@ function fileOrder(elem) {
 }
 
 
+/**
+ * Convert an HTML string into a JSON representation of the first top-level element.
+ *
+ * The returned object represents an element node with the shape:
+ * {
+ *   tagName: string,           // lowercased tag name
+ *   attributes: { [name]: value },
+ *   children: Array<element|textNode>
+ * }
+ * Child elements use the same element shape; text nodes are represented as
+ * { type: 'text', content: string }. Whitespace-only text nodes are omitted.
+ *
+ * @param {string} htmlString - HTML fragment or document string containing at least one element.
+ * @return {Object} JSON representation of the first element found in the parsed HTML body.
+ */
 function htmlToJson(htmlString) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(htmlString, 'text/html');
@@ -5833,9 +5851,31 @@ function htmlToJson(htmlString) {
 }
 // Helpers to track which elements have pipe listeners
 const pipeListenersSet = new WeakSet();
+/**
+ * Check whether a given DOM element already has a pipe listener registered.
+ * @param {Element} elem - The DOM element to check.
+ * @returns {boolean} True if a pipe listener exists for the element, otherwise false.
+ */
 function hasPipeListener(elem) { return pipeListenersSet.has(elem); }
+/**
+ * Mark a DOM element as having pipe listeners installed so it won't be re-bound.
+ * Adds the element to an internal WeakSet tracking elements that already received listeners.
+ * @param {Element} elem - The DOM element to mark.
+ */
 function markPipeListener(elem) { pipeListenersSet.add(elem); }
 
+/**
+ * Install global event listeners and initialize inline/csv-foreach behaviors under a root element.
+ *
+ * Attaches capture-phase listeners for 'click' and custom 'inline' events on the provided root. When an event
+ * target is eligible (has class 'mouse' or an id, and hasn't already been wired), the target is marked as
+ * processed, the global pipes(target) pipeline is executed, and any `inline` macro on the element is registered
+ * into `dotPipe.matrix` and executed via `dotPipe.runInline`. Also scans the root for <csv-foreach> child
+ * elements and runs processCsvForeach for each unprocessed instance.
+ *
+ * @param {Element|Document} [rootElem=document] - DOM node under which listeners are installed and CSV-foreach
+ *   elements are processed. Defaults to `document`.
+ */
 function addPipe(rootElem = document) {
     // Global listeners for clicks or custom 'inline' events
     ['click', 'inline'].forEach(eventType => {
@@ -5898,7 +5938,14 @@ function addPipe(rootElem = document) {
 //         }
 //     });
 
-// }
+/**
+ * Ensure a click handler is bound to an element that invokes the pipe processor and then refreshes inline tag processing.
+ *
+ * If the element has an id, this binds a click listener that calls `pipes(elem)` (triggering the pipe processing for that element).
+ * After binding, it calls `domContentLoad(true)` to re-run dotPipe's DOM processing for dynamic content.
+ *
+ * @param {HTMLElement} elem - The element to bind the click handler to; must have an `id` to be processed. 
+ */
 
 function flashClickListener(elem) {
     if (elem.id) {
@@ -5952,6 +5999,22 @@ function sortNodesByName(selector) {
 }
 
 
+/**
+ * Handle a user-triggered "pipe" action for a custom element: performs navigation, AJAX/modal loads,
+ * DOM mutations, carousel controls, downloads, redirects, and other side-effecting UI behaviors
+ * based on the element's attributes and classes.
+ *
+ * This function inspects the provided element's attributes (e.g., `ajax`, `modal`, `query`, `headers`,
+ * `insert`, `file-order`, `turn`, `set`, `get`, `remove`, `display`, `x-toggle`, `callback`, `download`,
+ * `form-class`) and classes (e.g., `redirect`, `disabled`, `clear-node`, `carousel-*`, `download`) and
+ * dispatches the appropriate actions: invoking callbacks, performing navigation via navigate/modala,
+ * rotating or controlling carousels, toggling classes, setting/removing attributes on other nodes,
+ * initiating file downloads, opening links, and cloning/executing AJAX specs. Effects are performed
+ * synchronously where possible or delegated to helper routines for async network/template operations.
+ *
+ * @param {Element} elem - The DOM element (custom tag or control) whose attributes define the action to run.
+ * @param {boolean} [stop=false] - Reserved flag for future early-exit control; currently unused by callers.
+ */
 function pipes(elem, stop = false) {
 
     var query = "";
@@ -6237,6 +6300,36 @@ function displayColoredJson(elementId, jsonObj) {
     document.getElementById(elementId).innerHTML = `<pre>${prettyHtml}</pre>`;
 }
 
+/**
+ * Perform an AJAX navigation/request for a pipe element and render the response into the page.
+ *
+ * Sends an XHR to the URL stored in the element's `ajax` attribute (appending the provided query
+ * plus any form-serialized data when `classname` matches form elements). The response is handled
+ * according to classes present on the element:
+ * - `strict-json` — replaces document.body with the raw JSON response if parseable.
+ * - `json` — parses JSON and renders a colored/pretty view (and writes JSON text to the element
+ *   identified by the element's `insert` attribute).
+ * - `text-html` — injects response HTML into the element specified by `insert` (innerHTML).
+ * - `plain-text` — writes response text to the `insert` target as textContent.
+ * - `tree-view` — parses JSON and renders it via `renderTree` into the element's node.
+ * - `modala` — parses JSON and renders it via `modala()` into the element named by `insert`;
+ *   supports multi-box behavior controlled by `boxes`, `modala-multi-first`, and `modala-multi-last`.
+ * - default — injects the raw response into the `insert` target's innerHTML.
+ *
+ * Side effects: modifies DOM (inserts/replaces content), calls `domContentLoad()` after insertion,
+ * and triggers `flashClickListener` for the originating element. Errors during parsing/insertion are
+ * caught and logged internally; the function does not return a value.
+ *
+ * @param {Element} elem - The source DOM element that initiated the navigation. Must have an `ajax`
+ *                         attribute (URL) and may include class flags (see description) and an
+ *                         optional `insert` attribute naming the target element id.
+ * @param {Map|Object|null} opts - Optional AJAX/fetch options map used by internal helpers
+ *                                 (passed through `setAJAXOpts`). May be null.
+ * @param {string} query - Query string to append to the request URL. Form data from elements with
+ *                         class `classname` will be appended when present.
+ * @param {string} classname - Name of a class used to find form elements to serialize and include
+ *                             (via `formAJAX`) into the request query.
+ */
 function navigate(elem, opts = null, query = "", classname = "") {
     //formAJAX at the end of this line
     // console.log(elem);
diff --git a/cart/dotpipe.js b/cart/dotpipe.js
index 9bdd707..9dc38ad 100644
--- a/cart/dotpipe.js
+++ b/cart/dotpipe.js
@@ -5356,12 +5356,21 @@ function escapeHtml(html) {
 }
 
 /**
- * 
- * @param {JSON Object} value 
- * @param {string} tempTag 
- * @param {} root 
- * @param {*} id 
- * @returns HTML Object
+ * Render a JSON-defined HTML fragment into a target container.
+ *
+ * Given a JSON "template" (an object describing tagName/tagname and child properties),
+ * creates corresponding DOM elements, sets attributes/contents, may load external
+ * resources (CSS/JS/HTML), and appends the result into the specified container.
+ * Calls domContentLoad() after insertion to process any dotPipe-specific tags/macros.
+ *
+ * @param {Object} value - JSON template describing the element to create. Expected keys include `tagname` or `tagName`
+ *   and other attribute/child descriptors (e.g., `css`, `js`, `html`, `buttons`, `sources`, `textcontent`, `innerhtml`, etc.).
+ * @param {string|HTMLElement} tempTag - Target container element or the id of that element. If a string is provided, the element
+ *   is looked up with document.getElementById.
+ * @param {HTMLElement} [root] - Optional root element used for header insertion; defaults to the resolved tempTag.
+ * @param {*} [id] - Unused in normal flow (kept for compatibility with callers).
+ * @returns {HTMLElement|undefined} The container element (resolved tempTag) after appending the rendered content, or `undefined`
+ *   if the target container or value is missing.
  */
 function modala(value, tempTag, root, id) {
     if (typeof (tempTag) == "string") {
@@ -5798,6 +5807,17 @@ function fileOrder(elem) {
 }
 
 
+/**
+ * Convert an HTML string into a JSON-like tree representation of the first body child.
+ *
+ * Parses the provided HTML and returns an object describing the element node (tagName, attributes,
+ * and children). Children include nested element nodes (same shape) and text nodes represented as
+ * { type: 'text', content: '...' } (text content is trimmed). Only the first child of the parsed
+ * document body is converted; comments and empty text nodes are omitted.
+ *
+ * @param {string} htmlString - HTML markup to parse.
+ * @return {{tagName: string, attributes: Object.<string,string>, children: Array}} JSON-like representation of the element, or null if no body child exists.
+ */
 function htmlToJson(htmlString) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(htmlString, 'text/html');
@@ -5833,9 +5853,35 @@ function htmlToJson(htmlString) {
 }
 // Helpers to track which elements have pipe listeners
 const pipeListenersSet = new WeakSet();
+/**
+ * Check whether a DOM element has already been registered as having a pipe listener.
+ *
+ * Returns true if the element exists in the internal pipeListenersSet (used to avoid
+ * attaching duplicate listeners or reprocessing an element).
+ *
+ * @param {Element} elem - The DOM element to query.
+ * @returns {boolean} True when a pipe listener has been recorded for `elem`, otherwise false.
+ */
 function hasPipeListener(elem) { return pipeListenersSet.has(elem); }
+/**
+ * Mark an element as having a pipe listener attached so it won't be processed again.
+ * @param {Element|HTMLElement} elem - The DOM element to mark as processed by the pipe listener registry.
+ */
 function markPipeListener(elem) { pipeListenersSet.add(elem); }
 
+/**
+ * Attach global listeners and initialize in-root dotPipe behaviors.
+ *
+ * Adds capture-phase listeners for 'click' and custom 'inline' events on the given root element. When an event target either has class "mouse" or an id and has not already been processed, the function marks it as processed, runs the general `pipes(target)` processor, and — if the element has an `inline` attribute — ensures a dotPipe.matrix entry exists and invokes `dotPipe.runInline` for that element. Also scans the root for unprocessed <csv-foreach> tags, calls `processCsvForeach` for each, and marks them processed.
+ *
+ * Side effects:
+ * - Binds event listeners to rootElem (capture phase).
+ * - Calls markPipeListener/hasPipeListener to avoid duplicate handling.
+ * - Mutates dotPipe.matrix for inline elements and invokes dotPipe.runInline.
+ * - Calls processCsvForeach and adds a "processed" class to handled csv-foreach elements.
+ *
+ * @param {Document|Element} [rootElem=document] - Element (or document) to attach listeners to and within which to process <csv-foreach> tags.
+ */
 function addPipe(rootElem = document) {
     // Global listeners for clicks or custom 'inline' events
     ['click', 'inline'].forEach(eventType => {
@@ -5898,7 +5944,15 @@ function addPipe(rootElem = document) {
 //         }
 //     });
 
-// }
+/**
+ * Ensure an element with an id triggers the pipe processor on click and then refresh page-level dotPipe processing.
+ *
+ * If the provided element has an `id`, this attaches a click handler that calls `pipes(elem)` and then invokes
+ * `domContentLoad(true)`. The function also attempts to remove a prior click listener (using an inline callback)
+ * before adding the new one. Finally, it calls `domContentLoad(true)` to re-run tag processing on the document.
+ *
+ * @param {HTMLElement} elem - The DOM element to attach the click handler to. Must be an element node; behavior is no-op if missing `id`.
+ */
 
 function flashClickListener(elem) {
     if (elem.id) {
@@ -5952,6 +6006,24 @@ function sortNodesByName(selector) {
 }
 
 
+/**
+ * Execute actions declared on a custom element via its attributes and classes.
+ *
+ * Reads the provided element's attributes and class names (e.g., ajax, modal, query,
+ * headers, display, turn, x-toggle, set, get, remove, delete, callback, download,
+ * carousel markers, redirect, clear-node, form-class, file-order) and performs the
+ * corresponding side effects: navigation/AJAX requests, modal invocation, DOM updates
+ * (show/hide, attribute changes, element removal), class toggles, carousel controls,
+ * file downloads, opening links, and calling named global callbacks or dotPipe inline
+ * macros when applicable.
+ *
+ * Parameters:
+ * @param {HTMLElement|Element} elem - The element (or element-like object) whose
+ *   attributes/classes drive the actions to perform. Must have standard DOM methods
+ *   used by the routine (getAttribute, hasAttribute, classList, id, tagName, etc.).
+ * @param {boolean} [stop=false] - Optional flag (currently unused) reserved for callers
+ *   that may want to signal stopping propagation/processing in future revisions.
+ */
 function pipes(elem, stop = false) {
 
     var query = "";
@@ -6237,6 +6309,27 @@ function displayColoredJson(elementId, jsonObj) {
     document.getElementById(elementId).innerHTML = `<pre>${prettyHtml}</pre>`;
 }
 
+/**
+ * Fetches a URL derived from an element's `ajax` attribute and inserts the response into the document according to the element's classes.
+ *
+ * Depending on element classes this will:
+ * - parse and display JSON (plain or colored) into an insert target,
+ * - treat response as HTML and inject into an insert target,
+ * - treat response as plain text,
+ * - render a JSON tree view,
+ * - render JSON-driven templates via `modala`,
+ * - or perform a generic HTML insertion when no JSON/modala-specific class is present.
+ *
+ * Side effects:
+ * - Performs an XMLHttpRequest to `elem.getAttribute("ajax")` with query parameters assembled from `query` and optionally `formAJAX(elem, classname)`.
+ * - Updates DOM nodes referenced by the element's `insert` attribute.
+ * - Calls helper routines such as `domContentLoad()`, `flashClickListener()`, `displayColoredJson()`, `renderTree()`, and `modala()` as appropriate.
+ *
+ * @param {HTMLElement} elem - The element that defines the AJAX target and response handling via its attributes and classes (must have an `ajax` attribute).
+ * @param {Map|Object|null} [opts=null] - Optional AJAX options map/object passed to `setAJAXOpts`. Treated as an implementation detail; callers may pass null.
+ * @param {string} [query=""] - Additional query string to append to the request URL (already encoded by this function).
+ * @param {string} [classname=""] - If non-empty, `formAJAX(elem, classname)` will be invoked and its output appended to the query string (used to include form values).
+ */
 function navigate(elem, opts = null, query = "", classname = "") {
     //formAJAX at the end of this line
     // console.log(elem);
diff --git a/columns/dotpipe.js b/columns/dotpipe.js
index 9bdd707..3f84fcb 100644
--- a/columns/dotpipe.js
+++ b/columns/dotpipe.js
@@ -5356,12 +5356,21 @@ function escapeHtml(html) {
 }
 
 /**
- * 
- * @param {JSON Object} value 
- * @param {string} tempTag 
- * @param {} root 
- * @param {*} id 
- * @returns HTML Object
+ * Render a JSON-described DOM fragment into a target element.
+ *
+ * Recursively interprets a JSON "value" structure (keys like tagName/tagname, attributes, textcontent/innerhtml/innertext,
+ * special keys such as header, buttons, sources, css, js, html, php, select/options, br, boxes) and builds corresponding DOM
+ * nodes appended to the provided target. The function may perform fetches for remote HTML/PHP, invoke modalaHead/modalList,
+ * inject link/script/meta elements, and calls domContentLoad() after insertion.
+ *
+ * @param {Object} value - JSON description of the element tree to render. Expected shape includes at least a `tagname`/`tagName`
+ *   and may contain nested objects or primitive values for attributes and content.
+ * @param {string|HTMLElement} tempTag - Target element or element id to append the rendered content into. If a string id is provided,
+ *   the element is resolved via document.getElementById.
+ * @param {HTMLElement} [root] - Optional root element used by helpers (defaults to resolved tempTag when omitted).
+ * @param {*} [id] - Optional identifier passed through but not required by this renderer.
+ * @returns {HTMLElement|undefined} The resolved target element (tempTag) after appending the rendered content, or undefined if
+ *   the target or value is invalid.
  */
 function modala(value, tempTag, root, id) {
     if (typeof (tempTag) == "string") {
@@ -5798,6 +5807,22 @@ function fileOrder(elem) {
 }
 
 
+/**
+ * Parse an HTML string and produce a JSON representation of the first top-level element.
+ *
+ * The returned object describes the element tree with the following shape:
+ * {
+ *   tagName: string,                 // lowercase tag name
+ *   attributes: { [name]: value },   // element attributes
+ *   children: Array<...>             // child elements or text nodes
+ * }
+ *
+ * Child items are either nested element objects (same shape) or text node objects:
+ * { type: 'text', content: string } (text nodes with trimmed content).
+ *
+ * @param {string} htmlString - HTML to parse (should contain at least one element).
+ * @return {Object} A JSON-like representation of the first top-level element in the parsed HTML.
+ */
 function htmlToJson(htmlString) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(htmlString, 'text/html');
@@ -5833,9 +5858,29 @@ function htmlToJson(htmlString) {
 }
 // Helpers to track which elements have pipe listeners
 const pipeListenersSet = new WeakSet();
+/**
+ * Check whether a given DOM element has a registered pipe listener.
+ * @param {Element} elem - Element to check.
+ * @returns {boolean} True if a pipe listener is registered for the element; otherwise false.
+ */
 function hasPipeListener(elem) { return pipeListenersSet.has(elem); }
+/**
+ * Mark an element as a pipe listener by adding it to the internal `pipeListenersSet`.
+ * @param {Element} elem - DOM element to register as a pipe listener.
+ */
 function markPipeListener(elem) { pipeListenersSet.add(elem); }
 
+/**
+ * Install global pipe handlers and process CSV-foreach nodes within a root element.
+ *
+ * Attaches delegated listeners for 'click' and custom 'inline' events (capture phase) on the provided root element.
+ * When an unhandled target element is interacted with, this registers a one-time pipe listener for that element,
+ * invokes the main pipes dispatcher, and — if the element has an `inline` attribute — ensures a dotPipe.matrix entry
+ * exists and triggers dotPipe.runInline for that element. Also finds any <csv-foreach> descendants that are not yet
+ * processed and runs processCsvForeach on them.
+ *
+ * @param {Element|Document} [rootElem=document] - Root node to attach listeners to and scan for <csv-foreach> elements.
+ */
 function addPipe(rootElem = document) {
     // Global listeners for clicks or custom 'inline' events
     ['click', 'inline'].forEach(eventType => {
@@ -5898,7 +5943,13 @@ function addPipe(rootElem = document) {
 //         }
 //     });
 
-// }
+/**
+ * Ensure an element has a click handler that runs the dotPipe dispatcher for that element and then triggers a DOM re-scan.
+ *
+ * If the element has an id, registers a click listener that calls `pipes(elem)` when clicked. After (re)binding the listener this function calls `domContentLoad(true)` to reprocess inline content.
+ *
+ * @param {Element} elem - The DOM element to bind the click handler to.
+ */
 
 function flashClickListener(elem) {
     if (elem.id) {
@@ -5952,6 +6003,19 @@ function sortNodesByName(selector) {
 }
 
 
+/**
+ * Handle a UI "pipe" action for a single element: dispatch behaviors based on element classes and attributes.
+ *
+ * This inspects the provided element's attributes/classes (e.g., `ajax`, `inline`, `callback`, `modal`, `download`,
+ * `display`, `remove`, `query`, `headers`, `form-class`, carousel controls, etc.) and executes the corresponding
+ * side-effecting operation(s) such as navigation/fetch insertion, opening links/modals, toggling or removing DOM
+ * nodes, invoking callbacks, rotating lists, starting carousel behaviors, or triggering downloads.
+ *
+ * @param {Element} elem - The element whose pipe should be executed. Must be a DOM Element with attributes/classes that
+ *   drive behavior.
+ * @param {boolean} [stop=false] - Optional flag reserved for stopping propagation/recursion in some callers (not used
+ *   by all flows). Pass true when the caller intends to prevent further upstream handling.
+ */
 function pipes(elem, stop = false) {
 
     var query = "";
@@ -6237,6 +6301,24 @@ function displayColoredJson(elementId, jsonObj) {
     document.getElementById(elementId).innerHTML = `<pre>${prettyHtml}</pre>`;
 }
 
+/**
+ * Perform an AJAX navigation/fetch for a pipe-like element and inject the response into the DOM.
+ *
+ * Constructs a query string (optionally augmented by formAJAX when a classname is provided), encodes it,
+ * applies AJAX options via setAJAXOpts, issues a request to the URL found on the element's `ajax` attribute,
+ * and handles the response according to element classes (e.g., `json`, `strict-json`, `text-html`, `plain-text`,
+ * `tree-view`, `modala`). Response content is inserted into the target element identified by the element's
+ * `insert` attribute (when applicable). After successful insertion the function triggers page fragment
+ * post-processing (domContentLoad) and a flash click indicator (flashClickListener).
+ *
+ * @param {HTMLElement} elem - The originating element containing attributes that control the request:
+ *                             `ajax` (request URL) and optional `insert` (target id for injection), and classes
+ *                             that determine response handling.
+ * @param {Map|Object|null} [opts=null] - AJAX option container consumed by setAJAXOpts (method, mode, headers, etc.).
+ * @param {string} [query=""] - Base query string to append to the request URL; will be URI-encoded.
+ * @param {string} [classname=""] - When non-empty, formAJAX(elem, classname) is consulted and its output appended
+ *                                 to the query string (used to serialize form values by class).
+ */
 function navigate(elem, opts = null, query = "", classname = "") {
     //formAJAX at the end of this line
     // console.log(elem);
diff --git a/csv-test/dotpipe.js b/csv-test/dotpipe.js
index 9bdd707..edfced2 100644
--- a/csv-test/dotpipe.js
+++ b/csv-test/dotpipe.js
@@ -5356,12 +5356,20 @@ function escapeHtml(html) {
 }
 
 /**
- * 
- * @param {JSON Object} value 
- * @param {string} tempTag 
- * @param {} root 
- * @param {*} id 
- * @returns HTML Object
+ * Render a JSON-defined UI tree into a target DOM container.
+ *
+ * Given a JSON "value" description (with keys like tagname, header, buttons, css, js, html, sources, etc.),
+ * this function creates corresponding DOM nodes, appends them into the provided target, and triggers
+ * post-processing (domContentLoad) for any nested dotPipe content.
+ *
+ * @param {Object} value - JSON description of the element tree to render. Expected keys include
+ *   `tagname`/`tagName` (element tag), `header` (object for modalaHead), `buttons` (array of button specs),
+ *   `css`, `js`, `html`, `php`, `sources`, `options`, style/text attributes and arbitrary element attributes.
+ * @param {string|HTMLElement} tempTag - Target container element or its id where the rendered nodes are appended.
+ * @param {HTMLElement} [root] - Optional root element used when processing headers; defaults to the resolved tempTag.
+ * @param {*} [id] - Optional identifier passed through to nested processing (preserved but not interpreted here).
+ * @returns {HTMLElement|undefined} The resolved target container (the element corresponding to tempTag) after appending,
+ *   or undefined if required inputs are missing.
  */
 function modala(value, tempTag, root, id) {
     if (typeof (tempTag) == "string") {
@@ -5798,6 +5806,22 @@ function fileOrder(elem) {
 }
 
 
+/**
+ * Parse an HTML string and return a JSON representation of the first top-level element.
+ *
+ * The returned object represents an element with the shape:
+ * {
+ *   tagName: string,             // lowercased tag name
+ *   attributes: { [name]: value },// map of attribute names to values
+ *   children: Array<...>         // child elements or text nodes
+ * }
+ *
+ * Child entries are either another element object (same shape) or a text node:
+ * { type: 'text', content: string } (text nodes are trimmed and empty-only text nodes are omitted).
+ *
+ * @param {string} htmlString - HTML markup to parse.
+ * @returns {Object|null} JSON representation of the first element inside the parsed document body, or null if no such element exists.
+ */
 function htmlToJson(htmlString) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(htmlString, 'text/html');
@@ -5833,9 +5857,35 @@ function htmlToJson(htmlString) {
 }
 // Helpers to track which elements have pipe listeners
 const pipeListenersSet = new WeakSet();
+/**
+ * Check whether an element has a registered pipe listener.
+ * @param {Element|Node} elem - The DOM element to test for a listener.
+ * @return {boolean} True if a listener is registered for the element, otherwise false.
+ */
 function hasPipeListener(elem) { return pipeListenersSet.has(elem); }
+/**
+ * Record that a DOM element has been bound with a pipe listener to prevent duplicate bindings.
+ * @param {Element} elem - The element to mark as having a pipe listener.
+ */
 function markPipeListener(elem) { pipeListenersSet.add(elem); }
 
+/**
+ * Attach global pipe listeners to a root node and initialize csv-foreach elements.
+ *
+ * Adds capture-phase listeners for 'click' and custom 'inline' events under the given root.
+ * When an eligible target is encountered (has class "mouse" or an id and no prior pipe listener),
+ * the handler marks the element, invokes pipes(target) and — if the element has an `inline`
+ * attribute — ensures a dotPipe.matrix entry and invokes dotPipe.runInline for that entry.
+ * Also finds any <csv-foreach> children of the root and runs processCsvForeach on unprocessed ones.
+ *
+ * Side effects:
+ * - Registers event listeners on the provided root (uses capture phase).
+ * - Mutates dotPipe.matrix for elements with `inline`.
+ * - Calls pipes(), dotPipe.runInline(), processCsvForeach(), and markPipeListener().
+ *
+ * @param {Document|Element} [rootElem=document] - Root node under which listeners are attached and
+ *   where <csv-foreach> elements are scanned.
+ */
 function addPipe(rootElem = document) {
     // Global listeners for clicks or custom 'inline' events
     ['click', 'inline'].forEach(eventType => {
@@ -5898,7 +5948,13 @@ function addPipe(rootElem = document) {
 //         }
 //     });
 
-// }
+/**
+ * Attach a click handler to an element that runs the framework's `pipes` dispatcher and then re-runs DOM processing.
+ *
+ * If the element has an `id`, this function removes (attempts to) any existing click handler and adds a new click listener that calls `pipes(elem)`. After wiring the listener it calls `domContentLoad(true)` to refresh dotPipe processing.
+ *
+ * @param {Element} elem - The DOM element to bind the click handler to (must have an `id` to be processed).
+ */
 
 function flashClickListener(elem) {
     if (elem.id) {
@@ -5952,6 +6008,19 @@ function sortNodesByName(selector) {
 }
 
 
+/**
+ * Execute attribute-driven UI actions for a given DOM element.
+ *
+ * Reads the element's attributes and classes and dispatches the associated behavior:
+ * e.g. AJAX navigation (`ajax`), modal loading (`modal` / `modalList`), downloads (`download`),
+ * DOM mutations (`set`, `get`, `delete`, `remove`, `clear-node`), toggles (`display`, `x-toggle`),
+ * rotation helpers (`turn`), carousel controls and sliding, header/query/form options for requests,
+ * callback invocation, and file-order processing. This is the central dispatcher used by dotPipe to
+ * trigger UI workflows declared via element attributes and CSS classes.
+ *
+ * @param {Element} elem - The DOM element whose attributes/classes drive the dispatched actions.
+ * @param {boolean} [stop=false] - Optional flag reserved for future use; currently not required by callers.
+ */
 function pipes(elem, stop = false) {
 
     var query = "";
@@ -6237,6 +6306,33 @@ function displayColoredJson(elementId, jsonObj) {
     document.getElementById(elementId).innerHTML = `<pre>${prettyHtml}</pre>`;
 }
 
+/**
+ * Perform an AJAX navigation/request based on an element's `ajax` attribute and inject the response into the DOM.
+ *
+ * Builds a query string (optionally appending form parameters collected by formAJAX when `classname` is present),
+ * encodes it, applies AJAX options via setAJAXOpts, issues an XMLHttpRequest to `elem.getAttribute("ajax") + "?" + qstring`,
+ * and processes the response according to classes present on `elem`:
+ * - "strict-json": replaces document.body with raw JSON response only if parseable.
+ * - "json": parses JSON, renders it via displayColoredJson, and optionally inserts pretty JSON into the element specified by `insert`.
+ * - "text-html": injects raw HTML into the `insert` target.
+ * - "plain-text": injects plain text into the `insert` target.
+ * - "tree-view": parses JSON and renders it with renderTree into the element with the same id as `elem`.
+ * - "modala": parses JSON and renders via modala into the element named by `insert` (supports limited multi-box behavior).
+ * - default: injects raw response into the `insert` target if present.
+ *
+ * Side effects:
+ * - Mutates DOM by inserting/replacing content (including possible full-body replacement for strict JSON).
+ * - Calls domContentLoad() and flashClickListener(elem) after successful injections.
+ * - Logs warnings if required attributes/targets for "modala" are missing.
+ *
+ * Parameters:
+ * @param {Element} elem - The DOM element that triggered the navigation; must have an `ajax` attribute and may have classes controlling response handling and an `insert` attribute naming the target element id.
+ * @param {?Map|Object} [opts=null] - Optional AJAX/fetch options passed through setAJAXOpts (map-like or object accepted by that helper).
+ * @param {string} [query=""] - Base query string to send; form parameters from formAJAX are appended when `classname` elements exist.
+ * @param {string} [classname=""] - If non-empty and matching form controls exist, formAJAX(elem, classname) is appended to the query string.
+ *
+ * No return value.
+ */
 function navigate(elem, opts = null, query = "", classname = "") {
     //formAJAX at the end of this line
     // console.log(elem);
diff --git a/doted/dotpipe.js b/doted/dotpipe.js
index 9bdd707..f765396 100644
--- a/doted/dotpipe.js
+++ b/doted/dotpipe.js
@@ -5356,12 +5356,23 @@ function escapeHtml(html) {
 }
 
 /**
- * 
- * @param {JSON Object} value 
- * @param {string} tempTag 
- * @param {} root 
- * @param {*} id 
- * @returns HTML Object
+ * Render a JSON-defined UI fragment into the DOM and append it to a target container.
+ *
+ * Parses a JSON-like "modal" structure and constructs DOM nodes (elements, attributes, text,
+ * scripts, styles, options, media sources, and nested structures). Supports special keys such as
+ * tagName/tagname, header (processed via modalaHead), js, css, html/php (fetched and inlined),
+ * buttons, sources, options, select, style, and simple heading/text keys (e.g., "h1").
+ *
+ * Side effects:
+ * - Appends created nodes to the resolved tempTag element (tempTag may be an element or an element id).
+ * - May insert <link> and <script> tags, fetch remote HTML/text, and append a CSP <meta> when a header is present.
+ * - Calls domContentLoad() after appending to initialize any nested dotPipe components.
+ *
+ * @param {Object} value - JSON-like descriptor that defines the element tree to create.
+ * @param {HTMLElement|string} tempTag - Container element or id of the container to which the generated nodes are appended.
+ * @param {HTMLElement} [root=tempTag] - Optional root element used when processing headers and nested content.
+ * @param {*} [id] - Optional identifier passed through to nested processing (preserved but not required).
+ * @returns {HTMLElement|undefined} The container element (resolved tempTag) after appending the constructed nodes, or undefined if tempTag or value is invalid.
  */
 function modala(value, tempTag, root, id) {
     if (typeof (tempTag) == "string") {
@@ -5798,6 +5809,22 @@ function fileOrder(elem) {
 }
 
 
+/**
+ * Parse an HTML string and return a JSON representation of the first element inside the document body.
+ *
+ * The returned object has the shape:
+ * {
+ *   tagName: string,             // lowercase tag name
+ *   attributes: { [name]: value }, 
+ *   children: [                  // array of child nodes
+ *     { type: 'text', content: string }, // for non-empty text nodes
+ *     { tagName, attributes, children }  // for element children (same shape, recursive)
+ *   ]
+ * }
+ *
+ * @param {string} htmlString - HTML markup to parse.
+ * @return {Object} JSON representation of the first element found under <body>.
+ */
 function htmlToJson(htmlString) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(htmlString, 'text/html');
@@ -5833,9 +5860,30 @@ function htmlToJson(htmlString) {
 }
 // Helpers to track which elements have pipe listeners
 const pipeListenersSet = new WeakSet();
+/**
+ * Check whether a DOM element has been registered with a pipe listener.
+ * @param {Element} elem - The DOM element to test.
+ * @return {boolean} True if a pipe listener is registered for the element; otherwise false.
+ */
 function hasPipeListener(elem) { return pipeListenersSet.has(elem); }
+/**
+ * Mark a DOM element as having had a pipe listener attached to prevent duplicate listener attachment.
+ * @param {Element} elem - The element to mark in the internal pipe listener registry.
+ */
 function markPipeListener(elem) { pipeListenersSet.add(elem); }
 
+/**
+ * Attach global pipe handlers and initialize CSV-foreach processing under a DOM root.
+ *
+ * Adds capturing listeners for "click" and custom "inline" events on the provided root element. When an untracked element with a pipe-related inline attribute or pipe-eligible class/id is activated, this function:
+ * - Marks the element so listeners are not re-attached,
+ * - Runs the framework's pipes(...) dispatcher for that element,
+ * - If the element has an `inline` attribute, ensures a dotPipe.matrix entry exists and invokes dotPipe.runInline(...) for that entry.
+ *
+ * Also scans the root for <csv-foreach> elements and invokes processCsvForeach on any that have not yet been processed, then marks them as processed.
+ *
+ * @param {ParentNode} [rootElem=document] - Root node under which listeners are attached and elements are scanned; defaults to the document to enable global behavior.
+ */
 function addPipe(rootElem = document) {
     // Global listeners for clicks or custom 'inline' events
     ['click', 'inline'].forEach(eventType => {
@@ -5898,7 +5946,13 @@ function addPipe(rootElem = document) {
 //         }
 //     });
 
-// }
+/**
+ * Ensure the element has a click handler that invokes the framework pipe dispatcher and then reprocess the document.
+ *
+ * If the provided element has an `id`, this attaches a click listener that calls `pipes(elem)` when clicked (the function attempts to rebind the listener). After handling the element, `domContentLoad(true)` is invoked to re-run dotPipe's DOM processing.
+ *
+ * @param {HTMLElement} elem - The element to bind the click handler to; listener is attached only when `elem.id` is present.
+ */
 
 function flashClickListener(elem) {
     if (elem.id) {
@@ -5952,6 +6006,19 @@ function sortNodesByName(selector) {
 }
 
 
+/**
+ * Dispatch and execute actions declared on a dotPipe "pipe" element.
+ *
+ * Processes the given element's attributes and classes to perform UI updates,
+ * navigation/AJAX loads, modal rendering, carousel controls, attribute
+ * manipulation, element insertion/removal, downloads, and any configured
+ * callback functions or redirects. This function has broad side effects:
+ * it may mutate the DOM, trigger network requests, open new windows, and
+ * invoke global callbacks.
+ *
+ * @param {Element} elem - The DOM element whose pipe attributes/classes control the action.
+ * @param {boolean} [stop=false] - Reserved flag for halting further processing (currently unused).
+ */
 function pipes(elem, stop = false) {
 
     var query = "";
@@ -6237,6 +6304,29 @@ function displayColoredJson(elementId, jsonObj) {
     document.getElementById(elementId).innerHTML = `<pre>${prettyHtml}</pre>`;
 }
 
+/**
+ * Perform an AJAX navigation/request using the element's `ajax` URL and inject the response into the DOM.
+ *
+ * Sends an XMLHttpRequest to the URL from elem.getAttribute("ajax") with an encoded query string (optionally augmented
+ * by formAJAX when `classname` matches elements on the page). The response handling varies by element classes:
+ * - strict-json: replaces document.body with raw JSON response (only if parseable JSON).
+ * - json: parses JSON, renders via displayColoredJson and inserts pretty JSON into the target element.
+ * - text-html: inserts response HTML into the target element's innerHTML.
+ * - plain-text: inserts response as textContent into the target element.
+ * - tree-view: parses JSON and renders it with renderTree into the element.
+ * - modala: parses JSON and renders it via modala into the specified insert target (supports modala-multi-* behaviors).
+ * - default: inserts raw response HTML into the element specified by the `insert` attribute (unless a callback is present).
+ *
+ * Side effects:
+ * - Performs network request (GET by default based on opts).
+ * - Mutates DOM (inserts/replaces content or triggers full-body replacement in strict-json).
+ * - Calls domContentLoad() and flashClickListener(elem) after injecting content.
+ *
+ * @param {Element} elem - DOM element that contains attributes controlling the request (must have `ajax` and typically `insert`).
+ * @param {Map|Object|null} [opts=null] - Optional AJAX options; passed through setAJAXOpts and may influence the request method/mode.
+ * @param {string} [query=""] - Initial query string to append to the request URL; will be URI-encoded. formAJAX may append additional params.
+ * @param {string} [classname=""] - If elements exist with this class, formAJAX(elem, classname) is invoked to append form values to the query.
+ */
 function navigate(elem, opts = null, query = "", classname = "") {
     //formAJAX at the end of this line
     // console.log(elem);
diff --git a/dotpipe.js b/dotpipe.js
index 9bdd707..966b0ca 100644
--- a/dotpipe.js
+++ b/dotpipe.js
@@ -5356,12 +5356,26 @@ function escapeHtml(html) {
 }
 
 /**
- * 
- * @param {JSON Object} value 
- * @param {string} tempTag 
- * @param {} root 
- * @param {*} id 
- * @returns HTML Object
+ * Render a JSON-described UI node into the DOM.
+ *
+ * Accepts a JSON-like descriptor and creates DOM elements (and auxiliary resources)
+ * according to the descriptor's keys (e.g., tagname, attributes, children, css/js sources,
+ * nested controls, media sources, remote html/php inclusion, header metadata).
+ *
+ * Side effects:
+ * - Appends created nodes and injected resources into the provided template/target element.
+ * - May perform fetch() calls for remote HTML/PHP resources and for media/source handling.
+ * - Calls modalaHead when a `header` entry is present and calls domContentLoad() after insertion.
+ *
+ * @param {Object} value - Descriptor object describing element(s) to create. Expected keys include
+ *   `tagname` (or `tagName`), attribute entries, nested objects for children, and special keys like
+ *   `header`, `buttons`, `sources`, `css`, `js`, `html`, `php`, `select`, `options`, `br`, etc.
+ * @param {HTMLElement|string} tempTag - Target element or id of an element into which the created
+ *   nodes will be appended. If a string is provided, the element with that id is used.
+ * @param {HTMLElement} [root] - Optional root element used by modalaHead; defaults to `tempTag` when omitted.
+ * @param {*} [id] - Optional identifier passed through to recursive calls (not otherwise interpreted here).
+ * @returns {HTMLElement|undefined} The target element used (same as resolved `tempTag`) after appending,
+ *   or undefined if the `tempTag` or `value` is invalid.
  */
 function modala(value, tempTag, root, id) {
     if (typeof (tempTag) == "string") {
@@ -5798,6 +5812,26 @@ function fileOrder(elem) {
 }
 
 
+/**
+ * Convert an HTML string into a simple JSON representation of its first top-level element.
+ *
+ * The returned object describes the element tree with the shape:
+ * {
+ *   tagName: string,               // lower-cased tag name
+ *   attributes: { [name]: string },// attribute name → value
+ *   children: [                    // ordered children
+ *     { type: 'text', content: string }, // trimmed text nodes
+ *     { tagName, attributes, children }  // nested element objects
+ *   ]
+ * }
+ *
+ * Only the first child of the parsed document body is converted. Empty/text-only nodes are omitted;
+ * text nodes are included as objects with `type: 'text'` and a trimmed `content` string.
+ *
+ * @param {string} htmlString - HTML markup containing at least one element; should parse to a body with a first child.
+ * @returns {Object} JSON representation of the first top-level element (see structure above).
+ * @throws {TypeError} If the parsed document has no first child (i.e., htmlString contains no top-level element), the function will throw when attempting to process a null element.
+ */
 function htmlToJson(htmlString) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(htmlString, 'text/html');
@@ -5833,9 +5867,30 @@ function htmlToJson(htmlString) {
 }
 // Helpers to track which elements have pipe listeners
 const pipeListenersSet = new WeakSet();
+/**
+ * Check whether a DOM element has been registered as a pipe listener.
+ * @param {Element} elem - The DOM element to test.
+ * @return {boolean} True if the element is present in the internal pipeListenersSet.
+ */
 function hasPipeListener(elem) { return pipeListenersSet.has(elem); }
+/**
+ * Mark an element as having been wired for inline/pipeline listeners so it won't be processed again.
+ * @param {Element} elem - The DOM element to mark as processed.
+ */
 function markPipeListener(elem) { pipeListenersSet.add(elem); }
 
+/**
+ * Install runtime listeners and initialize inline/csv-foreach processing under a root element.
+ *
+ * Adds capture-phase listeners for "click" and custom "inline" events on the provided root element. When an unprocessed interactive element is targeted, the function:
+ * - marks the element as having a pipe listener,
+ * - runs the element's pipe processing via pipes(target),
+ * - if the element has an `inline` attribute, ensures a dotPipe.matrix entry and invokes dotPipe.runInline for that element.
+ *
+ * Additionally, finds any <csv-foreach> children under the root and runs processCsvForeach on unprocessed ones (marks them processed).
+ *
+ * @param {ParentNode} [rootElem=document] - Root node to attach listeners to and scan for <csv-foreach> elements. Defaults to document.
+ */
 function addPipe(rootElem = document) {
     // Global listeners for clicks or custom 'inline' events
     ['click', 'inline'].forEach(eventType => {
@@ -5898,7 +5953,13 @@ function addPipe(rootElem = document) {
 //         }
 //     });
 
-// }
+/**
+ * Attach a click handler to an element that triggers the element's pipe processing, then refresh inline/tag processing.
+ *
+ * If the provided element has an `id`, this function (re)binds a click listener that calls `pipes(elem)` when clicked,
+ * and then calls `domContentLoad(true)` to re-run DOM/tag processing immediately.
+ *
+ * @param {Element} elem - The DOM element to bind; expected to have an `id`.
 
 function flashClickListener(elem) {
     if (elem.id) {
@@ -5952,6 +6013,21 @@ function sortNodesByName(selector) {
 }
 
 
+/**
+ * Process a custom tag element for dotPipe: perform attribute-driven actions (AJAX/navigation,
+ * DOM updates, modal/open/redirect, carousel controls, file operations, and other UI behaviors).
+ *
+ * This inspects the provided element's attributes and classes and executes corresponding side
+ * effects: may call a named callback, open links or new windows, toggle visibility or classes,
+ * set/get/remove attributes on other nodes, rotate lists, control carousels, trigger navigations
+ * (via navigate/modalList), initiate downloads, and mutate the DOM. Commonly-handled attributes
+ * include `ajax`, `inline`, `callback`, `query`, `headers`, `modal`, `turn`, `display`, `set`,
+ * `get`, `remove`, `delete`, `insert`, `file-order`, `form-class`, and others; classes handled
+ * include `redirect`, `disabled`, `clear-node`, `download`, `carousel-*`, and `carousel`.
+ *
+ * @param {Element} elem - The DOM element (custom tag) to process; must be a live element from the document.
+ * @param {boolean} [stop=false] - Optional flag (currently unused) reserved for callers to influence processing.
+ */
 function pipes(elem, stop = false) {
 
     var query = "";
@@ -6237,6 +6313,27 @@ function displayColoredJson(elementId, jsonObj) {
     document.getElementById(elementId).innerHTML = `<pre>${prettyHtml}</pre>`;
 }
 
+/**
+ * Perform an AJAX-style fetch driven by an element's attributes and class flags, then insert or render the response.
+ *
+ * Builds a query string (appending any serialized form data for elements with the provided classname), encodes it,
+ * applies request options via setAJAXOpts, and issues an XMLHttpRequest to the URL from the element's `ajax` attribute.
+ * Response handling is chosen by element classes (examples):
+ * - `strict-json`: replace document.body with raw JSON only if valid JSON
+ * - `json`: parse JSON and render with displayColoredJson, optionally insert prettified JSON into `insert` target
+ * - `text-html`: insert raw HTML into `insert` target
+ * - `plain-text`: insert textContent into `insert` target
+ * - `tree-view`: parse JSON and render with renderTree into the element itself
+ * - `modala`: parse JSON and render with modala() into the element referenced by `insert`
+ * - default: inject raw response into the `insert` target (if present)
+ *
+ * After successful insertion or rendering this function calls domContentLoad() and flashClickListener(elem) as part of the update cycle.
+ *
+ * @param {Element} elem - Source element that drives the request. Must have an `ajax` attribute (URL) and typically an `insert` attribute (target element id); classes on this element control response parsing/rendering.
+ * @param {Map} [opts=null] - Map-like collection of request options manipulated by setAJAXOpts; preserved for callers that supply options.
+ * @param {string} [query=""] - Base query string to append to the request; formAJAX(elem, classname) will be appended when matching forms are present.
+ * @param {string} [classname=""] - CSS class name used to find forms whose serialized data should be appended to the query string via formAJAX.
+ */
 function navigate(elem, opts = null, query = "", classname = "") {
     //formAJAX at the end of this line
     // console.log(elem);
diff --git a/guitar/dotpipe.js b/guitar/dotpipe.js
index 9bdd707..72bf4e0 100644
--- a/guitar/dotpipe.js
+++ b/guitar/dotpipe.js
@@ -5356,12 +5356,20 @@ function escapeHtml(html) {
 }
 
 /**
- * 
- * @param {JSON Object} value 
- * @param {string} tempTag 
- * @param {} root 
- * @param {*} id 
- * @returns HTML Object
+ * Render a JSON-descriptor UI node into a target DOM container.
+ *
+ * Recursively converts a JSON-like "modala" descriptor into DOM elements, appends the root of the rendered structure into the provided target, and triggers post-processing via domContentLoad().
+ *
+ * Notes:
+ * - Supports keys such as tagname/tagName, header (which injects head content and a CSP meta), buttons, select/options, sources (for card/carousel-like containers), css, js, html/php (fetched and inserted), style, and common text properties (textContent/innerHTML/innerText).
+ * - Performs network fetches for html/php and certain "sources" entries asynchronously.
+ * - Mutates the DOM (appends created nodes to tempTag/root and may append a meta tag to document.head).
+ *
+ * @param {Object} value - JSON-like descriptor for the element to create and its children/content.
+ * @param {string|Element} tempTag - Target container element or the id of the target container where the generated node will be appended.
+ * @param {Element} [root] - Optional root element used for head injection; defaults to the resolved tempTag.
+ * @param {*} [id] - Optional identifier passed through recursion (not required for basic usage).
+ * @returns {Element|undefined} The container (resolved tempTag) with the appended generated content, or undefined if required inputs are missing.
  */
 function modala(value, tempTag, root, id) {
     if (typeof (tempTag) == "string") {
@@ -5798,6 +5806,17 @@ function fileOrder(elem) {
 }
 
 
+/**
+ * Convert an HTML string into a JSON representation of the first element inside the parsed document body.
+ *
+ * The returned object describes the element tree with:
+ * - `tagName` (lowercase tag name),
+ * - `attributes` (map of attribute name → value),
+ * - `children` (array of child nodes). Child nodes are either nested element objects with the same shape or text nodes represented as `{ type: 'text', content: '...' }`.
+ *
+ * @param {string} htmlString - HTML markup to parse.
+ * @return {Object|null} JSON representation of the first child element in the parsed document body, or `null` if no element is present.
+ */
 function htmlToJson(htmlString) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(htmlString, 'text/html');
@@ -5833,9 +5852,33 @@ function htmlToJson(htmlString) {
 }
 // Helpers to track which elements have pipe listeners
 const pipeListenersSet = new WeakSet();
+/**
+ * Check whether a DOM element already has a pipe listener attached.
+ * @param {Element|Node} elem - The element to check for an attached pipe listener.
+ * @returns {boolean} True if the element is recorded as having a pipe listener; otherwise false.
+ */
 function hasPipeListener(elem) { return pipeListenersSet.has(elem); }
+/**
+ * Record that an element has been wired for pipe/inline event handling.
+ *
+ * Marks the given DOM element in the internal WeakSet so the system can skip
+ * attaching duplicate pipe listeners. Uses a WeakSet so entries do not prevent
+ * garbage collection.
+ *
+ * @param {Element|EventTarget} elem - DOM element to mark as having a pipe listener.
+ */
 function markPipeListener(elem) { pipeListenersSet.add(elem); }
 
+/**
+ * Attach pipe-processing behavior to a root element: global click/inline listeners and CSV-foreach initialization.
+ *
+ * Adds delegated listeners for 'click' and 'inline' events on the provided root element. When an event target
+ * requires processing, this registers the element with dotPipe.matrix (if it has an `inline` attribute) and
+ * invokes the pipes engine and any inline macro via dotPipe.runInline. Also finds unprocessed <csv-foreach>
+ * elements under the root and runs their initialization.
+ *
+ * @param {Element|Document} [rootElem=document] - Root element to attach listeners to and scan for <csv-foreach>.
+ */
 function addPipe(rootElem = document) {
     // Global listeners for clicks or custom 'inline' events
     ['click', 'inline'].forEach(eventType => {
@@ -5898,7 +5941,14 @@ function addPipe(rootElem = document) {
 //         }
 //     });
 
-// }
+/**
+ * Attach a click handler to an element that triggers the pipe processor and refreshes DOM processing.
+ *
+ * If the provided element has an `id`, this re-attaches a click listener that calls `pipes(elem)`.
+ * After adjusting the listener it calls `domContentLoad(true)` to re-run content initialization.
+ *
+ * @param {Element} elem - The DOM element to (re)bind the click handler on; no action is taken if it has no `id`.
+ */
 
 function flashClickListener(elem) {
     if (elem.id) {
@@ -5952,6 +6002,26 @@ function sortNodesByName(selector) {
 }
 
 
+/**
+ * Interpret a pipe-style element and perform its configured UI/data actions.
+ *
+ * Evaluates attributes and classes on the provided DOM element and executes the corresponding behaviors:
+ * - callback: gathers values from nodes with a callback-class and invokes the named global function.
+ * - redirect / ajax / lnk: navigates or opens URLs (supports multi-part `ajax` entries separated by `;`).
+ * - clear-node / remove: clear or remove target nodes.
+ * - display / x-toggle / set / get / delete: toggle visibility, toggle classes, and copy/set/remove attributes between elements.
+ * - carousel and related classes: initialize or step carousel behavior.
+ * - file-order: reorder files when present.
+ * - download: create a temporary anchor to trigger a file download.
+ * - headers / query / form-class: parse auxiliary request metadata used by navigate().
+ * - modal: load one or more modal descriptors via modalList().
+ *
+ * The function mutates the DOM, may change window.location or open new windows, and delegates AJAX/modal/navigation work to helpers such as navigate(), modalList(), carousel(), shiftFilesLeft/Right(), fileOrder(), and dotPipe.runInline()/dotPipe.register() where applicable.
+ *
+ * @param {HTMLElement} elem - The element whose pipe attributes/classes encode the action(s) to run.
+ * @param {boolean} [stop=false] - Optional flag reserved for stopping propagation/processing (not used by current implementation).
+ * @returns {void}
+ */
 function pipes(elem, stop = false) {
 
     var query = "";
@@ -6237,6 +6307,26 @@ function displayColoredJson(elementId, jsonObj) {
     document.getElementById(elementId).innerHTML = `<pre>${prettyHtml}</pre>`;
 }
 
+/**
+ * Perform an AJAX navigation using the URL in elem.getAttribute("ajax") and apply the response to the DOM.
+ *
+ * Sends a GET/POST (as configured by setAJAXOpts) request to the element's `ajax` URL using `query` (merged with form data
+ * if elements with `classname` exist). The response is processed differently based on CSS classes present on `elem`:
+ * - `.strict-json`: replaces document.body with the raw JSON response only if the response parses as JSON.
+ * - `.json`: parses JSON, renders a colored pretty view via displayColoredJson, and optionally writes a pretty JSON string to the element named by `insert`.
+ * - `.text-html`: injects raw HTML into the element referenced by `insert`.
+ * - `.plain-text`: injects plain text into the element referenced by `insert`.
+ * - `.tree-view`: parses JSON and renders it with renderTree into the element with id equal to elem.id.
+ * - `.modala`: parses JSON and renders it via modala() into the target specified by `insert`; supports multi-box insertion with `modala-multi-first` / `modala-multi-last` and a `boxes` limit.
+ * - default: writes raw response HTML into the element named by `insert` unless a `callback` attribute is present.
+ *
+ * After DOM insertion the function calls domContentLoad() and flashClickListener(elem) where applicable. Network/send errors are caught and suppressed.
+ *
+ * @param {Element} elem - The source element that holds attributes guiding the request (`ajax`, `insert`, and CSS classes that control response handling).
+ * @param {*} [opts] - AJAX options; prepared by setAJAXOpts (omitted from detailed param docs as a shared utility).
+ * @param {string} [query=""] - Query string to append to the request URL (will be URI-encoded). Form data may be appended when `classname` matches form controls.
+ * @param {string} [classname=""] - If non-empty, formAJAX is used to collect form data from elements with this class and merged into the request query.
+ */
 function navigate(elem, opts = null, query = "", classname = "") {
     //formAJAX at the end of this line
     // console.log(elem);
diff --git a/inline/dotpipe.js b/inline/dotpipe.js
index 9bdd707..89e5098 100644
--- a/inline/dotpipe.js
+++ b/inline/dotpipe.js
@@ -5356,12 +5356,19 @@ function escapeHtml(html) {
 }
 
 /**
- * 
- * @param {JSON Object} value 
- * @param {string} tempTag 
- * @param {} root 
- * @param {*} id 
- * @returns HTML Object
+ * Render a JSON-based DOM template into a target element.
+ *
+ * Given a JSON "value" describing an element tree (keys like `tagname`, attributes,
+ * `textcontent`, `innerhtml`, `css`, `js`, `sources`, etc.), create corresponding
+ * DOM nodes and append them into `tempTag`. Supports loading external HTML/JS/CSS
+ * and media sources described in the template. Calls domContentLoad() after insertion
+ * to initialize any newly added pipe tags.
+ *
+ * @param {Object} value - JSON template describing the element and its children.
+ * @param {string|HTMLElement} tempTag - Element or element id that will receive the rendered content.
+ * @param {HTMLElement} [root] - Optional root context used for header injection; defaults to tempTag.
+ * @param {*} [id] - Optional identifier (passed through but not required by renderer).
+ * @returns {HTMLElement|undefined} The element that received the appended template (`tempTag` as an HTMLElement), or undefined if rendering could not proceed.
  */
 function modala(value, tempTag, root, id) {
     if (typeof (tempTag) == "string") {
@@ -5798,6 +5805,17 @@ function fileOrder(elem) {
 }
 
 
+/**
+ * Parse an HTML string and produce a JSON-like representation of its first body element.
+ *
+ * The returned object describes the element tree with lowercase `tagName`, an `attributes`
+ * map of name→value pairs, and a `children` array. Child nodes include nested element
+ * objects and text nodes represented as `{ type: 'text', content: '...' }`. Empty/text-only
+ * nodes are omitted; comments and non-element/non-text nodes are ignored.
+ *
+ * @param {string} htmlString - HTML markup to parse; should contain at least one element inside a `<body>`.
+ * @return {Object} JSON-like representation of the first element found in the parsed HTML body.
+ */
 function htmlToJson(htmlString) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(htmlString, 'text/html');
@@ -5833,9 +5851,35 @@ function htmlToJson(htmlString) {
 }
 // Helpers to track which elements have pipe listeners
 const pipeListenersSet = new WeakSet();
+/**
+ * Return whether the given DOM element has an active pipe listener registered.
+ * @param {Element} elem - DOM element to check for a registered pipe listener.
+ * @returns {boolean} True if a listener is registered for the element, otherwise false.
+ */
 function hasPipeListener(elem) { return pipeListenersSet.has(elem); }
+/**
+ * Register an element as a pipe listener by adding it to the internal listener set.
+ *
+ * Adds the provided DOM element to the module-scoped `pipeListenersSet` to mark
+ * it as having an active pipe listener (prevents duplicate bindings).
+ *
+ * @param {Element} elem - The DOM element to register as a pipe listener.
+ */
 function markPipeListener(elem) { pipeListenersSet.add(elem); }
 
+/**
+ * Install dotPipe event handlers and post-processors on a DOM subtree.
+ *
+ * Attaches capture-phase listeners for `click` and custom `inline` events to `rootElem`.
+ * When an event targets an element that hasn't been registered with the pipe listener, this
+ * function marks it, runs the generic `pipes` processor, and — if the element has an
+ * `inline` attribute — ensures a matrix entry exists and invokes `dotPipe.runInline` for that
+ * element. Also finds unprocessed `<csv-foreach>` elements within `rootElem` and runs the
+ * CSV-foreach processor for each, marking them processed.
+ *
+ * @param {ParentNode} [rootElem=document] - Root node under which listeners are installed and
+ *   subtree post-processing (e.g., `<csv-foreach>`) is performed.
+ */
 function addPipe(rootElem = document) {
     // Global listeners for clicks or custom 'inline' events
     ['click', 'inline'].forEach(eventType => {
@@ -5898,7 +5942,15 @@ function addPipe(rootElem = document) {
 //         }
 //     });
 
-// }
+/**
+ * Ensure an element has a click handler that triggers the inline pipes processor and refresh DOM processing.
+ *
+ * If the provided element has an id, this function attempts to remove any existing click listener (the same
+ * anonymous signature) and then attaches a click listener that calls `pipes(elem)` when clicked.
+ * After modifying listeners, it invokes `domContentLoad(true)` to re-run DOTPipe processing on the document.
+ *
+ * @param {Element} elem - The DOM element to bind the click handler to; the operation runs only when `elem.id` is truthy.
+ */
 
 function flashClickListener(elem) {
     if (elem.id) {
@@ -5952,6 +6004,24 @@ function sortNodesByName(selector) {
 }
 
 
+/**
+ * Execute the "pipe" actions declared on a DOM element.
+ *
+ * Processes a variety of element attributes and classes (e.g., `ajax`, `inline`, `modal`, `query`,
+ * `headers`, `turn`, `set`, `get`, `remove`, carousel controls, download links, display toggles,
+ * and custom callbacks) and performs the corresponding DOM or navigation side effects:
+ * - triggers AJAX/navigation via `navigate`
+ * - opens modals via `modalList`
+ * - invokes dotPipe inline handlers (`dotPipe.register()` / `dotPipe.runInline`)
+ * - manipulates attributes, visibility, or removes nodes
+ * - opens new windows or redirects the current page
+ * - rotates lists, toggles classes, and controls carousels
+ *
+ * This function has broad side effects on the document and window and does not return a value.
+ *
+ * @param {Element} elem - The DOM element whose pipe attributes and classes will be processed.
+ * @param {boolean} [stop=false] - Optional flag reserved for callers; not used by the current implementation.
+ */
 function pipes(elem, stop = false) {
 
     var query = "";
@@ -6237,6 +6307,28 @@ function displayColoredJson(elementId, jsonObj) {
     document.getElementById(elementId).innerHTML = `<pre>${prettyHtml}</pre>`;
 }
 
+/**
+ * Perform an AJAX navigation/request using an element's `ajax` attribute and render the response.
+ *
+ * Builds a query string (optionally appended with form data from elements of `classname`), URL-encodes it,
+ * prepares request options via setAJAXOpts, and issues an XMLHttpRequest to the URL from `elem.getAttribute("ajax")`.
+ * Response handling is driven by CSS classes on `elem`:
+ * - `strict-json`: validates full-page JSON and replaces document.body with the JSON text if valid.
+ * - `json`: parses JSON, calls displayColoredJson into the `insert` target and sets textContent with pretty JSON.
+ * - `text-html`: injects responseText as innerHTML into the `insert` target.
+ * - `plain-text`: injects responseText as textContent into the `insert` target.
+ * - `tree-view`: parses JSON and renders a tree via renderTree into the element itself.
+ * - `modala`: parses JSON and renders modal content via modala into the specified `insert` target (supports multi-box behavior).
+ * - default: injects responseText as innerHTML into the `insert` target when no JSON-related classes or `callback` attribute are present.
+ *
+ * After injecting content the function calls domContentLoad() and flashClickListener(elem) where appropriate.
+ *
+ * @param {HTMLElement} elem - Element that contains the `ajax` attribute and classes that control response handling; also provides the `insert` target id via an `insert` attribute.
+ * @param {Map|Object|null} [opts=null] - AJAX/fetch option container used by setAJAXOpts (may be a Map or similar options object); if null, defaults are applied.
+ * @param {string} [query=""] - Base query string to append to the request; additional form data from elements of `classname` will be appended if present.
+ * @param {string} [classname=""] - CSS class name to collect form values from via formAJAX and append to the query string.
+ * @returns {void}
+ */
 function navigate(elem, opts = null, query = "", classname = "") {
     //formAJAX at the end of this line
     // console.log(elem);
diff --git a/landing/dotpipe.js b/landing/dotpipe.js
index 9bdd707..2a9afb3 100644
--- a/landing/dotpipe.js
+++ b/landing/dotpipe.js
@@ -5356,12 +5356,25 @@ function escapeHtml(html) {
 }
 
 /**
- * 
- * @param {JSON Object} value 
- * @param {string} tempTag 
- * @param {} root 
- * @param {*} id 
- * @returns HTML Object
+ * Build and insert DOM nodes described by a JSON-like template descriptor.
+ *
+ * The function reads a descriptor object (value) that describes an element tree
+ * and creates corresponding DOM nodes, attributes, children, and external
+ * resources (CSS/JS). The generated nodes are appended into tempTag (or the
+ * element referenced by tempTag if a string id is provided). The function may
+ * perform network fetches for "html"/"php"/"sources" entries, call modalaHead
+ * for header descriptors, invoke modalList for nested modal lists, and calls
+ * domContentLoad() after insertion to wire up any dynamic behavior.
+ *
+ * @param {Object} value - JSON-like descriptor for the element to create. Expected keys include
+ *   tagname/tagName, textcontent/innerhtml/innertext, style, css, js, header, buttons,
+ *   sources, html/php (URLs), and arbitrary attributes. Nested objects produce nested nodes.
+ * @param {Element|string} tempTag - Element to append into, or an element id string. If a string,
+ *   the element with that id is looked up and used.
+ * @param {Element} [root] - Optional root element used by header processing; defaults to tempTag when omitted.
+ * @param {*} [id] - Optional identifier passed through to recursive calls (not used directly by every descriptor).
+ * @returns {Element|undefined} The element (tempTag) into which the constructed nodes were appended, or
+ *   undefined if required arguments are missing or tempTag/descriptor are invalid.
  */
 function modala(value, tempTag, root, id) {
     if (typeof (tempTag) == "string") {
@@ -5798,6 +5811,23 @@ function fileOrder(elem) {
 }
 
 
+/**
+ * Parse an HTML string and produce a JSON-like representation of the first element found under the document body.
+ *
+ * The returned object represents an element node with the shape:
+ * {
+ *   tagName: string,               // lowercased tag name
+ *   attributes: { [name]: string },// attribute map
+ *   children: Array               // child elements or text nodes
+ * }
+ *
+ * Child elements use the same shape recursively. Text nodes are represented as objects:
+ * { type: 'text', content: string } — empty/whitespace-only text nodes are omitted.
+ *
+ * @param {string} htmlString - HTML fragment or document string to parse.
+ * @return {Object} JSON-like representation of the first body child element (see structure above).
+ *                   Behavior is not defined for inputs that contain no element nodes.
+ */
 function htmlToJson(htmlString) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(htmlString, 'text/html');
@@ -5833,9 +5863,42 @@ function htmlToJson(htmlString) {
 }
 // Helpers to track which elements have pipe listeners
 const pipeListenersSet = new WeakSet();
+/**
+ * Check whether a DOM element has been registered as a pipe listener.
+ *
+ * Returns true if the given element is present in the internal `pipeListenersSet`.
+ *
+ * @param {Element} elem - The DOM element to test for a pipe-listener registration.
+ * @returns {boolean} True when the element is registered; otherwise false.
+ */
 function hasPipeListener(elem) { return pipeListenersSet.has(elem); }
+/**
+ * Mark an element so it won't have pipe listeners attached again.
+ *
+ * Adds the given DOM element to the internal set tracking elements that already
+ * have pipe listeners, preventing duplicate listener registration.
+ *
+ * @param {Element} elem - The DOM element to mark as having pipe listeners.
+ */
 function markPipeListener(elem) { pipeListenersSet.add(elem); }
 
+/**
+ * Attach global pipe event listeners and initialize inline/csv-foreach processing within a root node.
+ *
+ * Adds capturing listeners for "click" and custom "inline" events on the provided root element. When an event
+ * targets an element that requires piping (has the "mouse" class or an id) and has not already been bound,
+ * the function marks the element as having a pipe listener, runs the central `pipes()` dispatcher for that element,
+ * and, if the element has an `inline` attribute, ensures a dotPipe.matrix entry exists and invokes `dotPipe.runInline`
+ * for that entry. Also scans the root for <csv-foreach> elements and invokes `processCsvForeach` once per element,
+ * marking them processed.
+ *
+ * Side effects:
+ * - Registers event listeners on the root element.
+ * - Mutates dotPipe.matrix for elements with an `inline` attribute.
+ * - Calls pipes(), dotPipe.runInline(), and processCsvForeach(), and adds processed flags/classes to elements.
+ *
+ * @param {Document|Element} [rootElem=document] - Root node to attach listeners to and scan for csv-foreach; defaults to document.
+ */
 function addPipe(rootElem = document) {
     // Global listeners for clicks or custom 'inline' events
     ['click', 'inline'].forEach(eventType => {
@@ -5898,7 +5961,14 @@ function addPipe(rootElem = document) {
 //         }
 //     });
 
-// }
+/**
+ * Rebinds a click handler on the given element to invoke pipes(elem) and re-runs DOM initialization.
+ *
+ * Ensures the element has a click listener that calls pipes(elem) when clicked, then calls domContentLoad(true)
+ * to refresh pipe/inline processing and other dynamic behaviors.
+ *
+ * @param {Element} elem - The DOM element to attach the flash click behavior to.
+ */
 
 function flashClickListener(elem) {
     if (elem.id) {
@@ -5952,6 +6022,21 @@ function sortNodesByName(selector) {
 }
 
 
+/**
+ * Dispatches a wide range of UI-driven actions for a pipe element.
+ *
+ * Interprets attributes and classes on the provided element to perform side-effecting operations
+ * such as AJAX navigation/loads, modal/template rendering, element manipulation (show/hide, set/get attributes,
+ * remove nodes), carousel controls and file shifting, downloads, opening links, toggling classes, and invoking
+ * a callback function named by the element. It also reads optional inline query/header/form-class data to
+ * pass to navigation calls and will early-return for disabled elements.
+ *
+ * The function does not return a value; it performs DOM mutations, network/navigation actions, and may call
+ * global functions (including window callbacks or dotPipe APIs) depending on element attributes.
+ *
+ * @param {Element} elem - The element whose pipe attributes and classes drive the dispatched actions.
+ * @param {boolean} [stop=false] - Reserved flag to inhibit further dispatching (used by callers in some flows).
+ */
 function pipes(elem, stop = false) {
 
     var query = "";
@@ -6237,6 +6322,30 @@ function displayColoredJson(elementId, jsonObj) {
     document.getElementById(elementId).innerHTML = `<pre>${prettyHtml}</pre>`;
 }
 
+/**
+ * Perform an AJAX request driven by an element's attributes and insert or render the response.
+ *
+ * Parses query/form data, applies fetch options via setAJAXOpts, issues an XMLHttpRequest to the URL
+ * taken from the element's `ajax` attribute, and updates the DOM according to the element's classes
+ * and attributes. Supported class-driven response modes:
+ * - strict-json: replaces document.body with raw JSON only if it's valid JSON.
+ * - json: parses JSON, renders a colored view via displayColoredJson, and optionally writes JSON text to the element specified by `insert`.
+ * - text-html: inserts the raw response HTML into the `insert` target's innerHTML.
+ * - plain-text: inserts the raw response into the `insert` target's textContent.
+ * - tree-view: parses JSON and renders it with renderTree into the element identified by the caller element's id.
+ * - modala: parses JSON as a modala descriptor, renders it with modala into a created container, and appends/prepends it to the `insert` target (supports `boxes` and modala-multi-* flags).
+ * - default: if no special class and no `callback` attribute, the raw response is injected into the `insert` target's innerHTML.
+ *
+ * Side effects:
+ * - Reads `ajax` and `insert` attributes on elem.
+ * - Mutates DOM (inserts/replaces content) and calls domContentLoad() and flashClickListener(elem) after injections.
+ * - Uses formAJAX(elem, classname) to append class-scoped form data when classname is provided.
+ *
+ * @param {Element} elem - The source element whose attributes (e.g., `ajax`, `insert`, classes) control the request and rendering.
+ * @param {Map|Object|null} [opts=null] - Optional fetch/request options object passed to setAJAXOpts; its exact shape is handled by setAJAXOpts.
+ * @param {string} [query=""] - Base query string to send; formAJAX is appended when elements with `classname` exist.
+ * @param {string} [classname=""] - If provided and matching elements exist, formAJAX(elem, classname) will be appended to the query.
+ */
 function navigate(elem, opts = null, query = "", classname = "") {
     //formAJAX at the end of this line
     // console.log(elem);
diff --git a/login/dotpipe.js b/login/dotpipe.js
index 9bdd707..4225108 100644
--- a/login/dotpipe.js
+++ b/login/dotpipe.js
@@ -5356,12 +5356,37 @@ function escapeHtml(html) {
 }
 
 /**
- * 
- * @param {JSON Object} value 
- * @param {string} tempTag 
- * @param {} root 
- * @param {*} id 
- * @returns HTML Object
+ * Render a JSON-defined UI fragment into the DOM.
+ *
+ * Given a JSON "template" object describing an element tree (using keys
+ * like `tagname`, attributes, `html`, `js`, `css`, `sources`, `buttons`, etc.),
+ * creates corresponding DOM nodes, appends them into `tempTag` (or the element
+ * referenced by `tempTag` if a string id is provided), may enqueue linked CSS/JS
+ * and external content fetches, and calls domContentLoad() to process any newly
+ * injected dotPipe elements.
+ *
+ * Parameters:
+ * - value: a JSON object describing the element to create and its nested
+ *   structure (expected keys include `tagname`/`tagName`, attribute names,
+ *   `textcontent`/`innerhtml`/`innertext`, `css`, `js`, `header`, `sources`,
+ *   `buttons`, and other conventions used by the modala/modal system).
+ * - tempTag: either a DOM element or the id of an element that will receive the
+ *   rendered content.
+ * - root: optional root element used for header injection; when omitted, `tempTag`
+ *   is used.
+ * - id: optional identifier passed through to nested calls (preserved for callers
+ *   that rely on it).
+ *
+ * Side effects:
+ * - Appends created elements into `tempTag`.
+ * - May append a CSP meta tag to document.head if `value.header` is present.
+ * - May initiate fetches to load external HTML, scripts, or other resources.
+ * - Calls domContentLoad() after insertion to allow the framework to process
+ *   newly injected components.
+ *
+ * Returns:
+ * - The element used as the container (the resolved `tempTag`) after the new
+ *   content has been appended, or undefined if required inputs are missing.
  */
 function modala(value, tempTag, root, id) {
     if (typeof (tempTag) == "string") {
@@ -5798,6 +5823,24 @@ function fileOrder(elem) {
 }
 
 
+/**
+ * Parse an HTML string and return a JSON representation of its first top-level element.
+ *
+ * The returned object describes the element tree with the following shape:
+ * {
+ *   tagName: 'tag-name',            // lowercased tag name
+ *   attributes: { [name]: value },  // map of attribute names to values
+ *   children: [                     // ordered array of child nodes
+ *     { tagName, attributes, children }, // element nodes (same shape)
+ *     { type: 'text', content: '...' }   // non-empty text nodes
+ *   ]
+ * }
+ *
+ * Only the first child of the parsed document body is converted. Empty text nodes are omitted.
+ *
+ * @param {string} htmlString - HTML source to parse.
+ * @returns {Object} JSON representation of the first top-level element.
+ */
 function htmlToJson(htmlString) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(htmlString, 'text/html');
@@ -5833,9 +5876,32 @@ function htmlToJson(htmlString) {
 }
 // Helpers to track which elements have pipe listeners
 const pipeListenersSet = new WeakSet();
+/**
+ * Check whether a DOM element is registered as a pipe listener.
+ * @param {Element} elem - The element to test.
+ * @return {boolean} True if the element is present in the internal pipe-listener set.
+ */
 function hasPipeListener(elem) { return pipeListenersSet.has(elem); }
+/**
+ * Mark an element as a processed pipe listener so it won't be re-processed.
+ * @param {Element} elem - The DOM element to mark as handled by the pipe listener registry.
+ */
 function markPipeListener(elem) { pipeListenersSet.add(elem); }
 
+/**
+ * Installs global pipe listeners on a DOM subtree and processes CSV-foreach elements.
+ *
+ * Adds delegated listeners for 'click' and custom 'inline' events on the provided root element.
+ * When a clicked/inline-target element is eligible (has class 'mouse' or an id and hasn't been
+ * processed), the handler marks it as processed, runs the standard pipes(...) processing,
+ * and — if the element has an `inline` attribute — ensures a dotPipe.matrix entry and invokes
+ * dotPipe.runInline(...) for that element.
+ *
+ * The function also scans the subtree for <csv-foreach> tags and invokes processCsvForeach(elem)
+ * for each unprocessed instance, marking them as processed.
+ *
+ * @param {Document|Element} [rootElem=document] - Root to attach listeners to and scan. Defaults to the global document.
+ */
 function addPipe(rootElem = document) {
     // Global listeners for clicks or custom 'inline' events
     ['click', 'inline'].forEach(eventType => {
@@ -5898,7 +5964,14 @@ function addPipe(rootElem = document) {
 //         }
 //     });
 
-// }
+/**
+ * Ensure an element is wired so clicking it invokes the framework pipeline and then re-run component initialization.
+ *
+ * If the provided element has an `id`, attaches a click handler that calls `pipes(elem)`. After (re)binding the
+ * listener this function calls `domContentLoad(true)` to reprocess supported custom tags and widgets.
+ *
+ * @param {Element} elem - The DOM element to bind; caller should provide an element (preferably with an `id`).
+ */
 
 function flashClickListener(elem) {
     if (elem.id) {
@@ -5952,6 +6025,25 @@ function sortNodesByName(selector) {
 }
 
 
+/**
+ * Dispatches UI actions for a custom element based on its attributes and classes.
+ *
+ * Examines the provided element's attributes and classList (e.g., ajax, inline, callback,
+ * insert, modal, download, carousel, turn, display, set/get/delete/remove, query, headers,
+ * form-class, file-order, x-toggle) and performs the corresponding DOM mutations, navigation,
+ * AJAX/modal invocations, window operations, or widget controls (carousel, file ordering,
+ * refresh/insert targets, downloads, etc.).
+ *
+ * Side effects:
+ * - May call global callbacks (via the element's `callback` attribute).
+ * - May open new windows (lnk), trigger navigate() for AJAX loads, call modalList(), or
+ *   start carousel/shift behaviors.
+ * - Mutates DOM attributes, element visibility, removes nodes, or updates innerHTML of targets.
+ *
+ * Parameters:
+ * @param {Element} elem - The DOM element whose attributes/classes control the dispatched actions.
+ * @param {boolean} [stop=false] - Currently unused; reserved for optional short-circuit control.
+ */
 function pipes(elem, stop = false) {
 
     var query = "";
@@ -6237,6 +6329,28 @@ function displayColoredJson(elementId, jsonObj) {
     document.getElementById(elementId).innerHTML = `<pre>${prettyHtml}</pre>`;
 }
 
+/**
+ * Perform an AJAX navigation/fetch according to attributes and classes on a source element and inject the response into the document.
+ *
+ * This function builds a query string (optionally augmented by formAJAX when a classname is provided), encodes it, configures request options via setAJAXOpts, issues an XMLHttpRequest to the URL in the element's `ajax` attribute, and processes the response based on element classes:
+ * - strict-json: validates response is JSON and replaces document.body with it.
+ * - json: parses JSON and renders it with displayColoredJson into the element specified by the `insert` attribute.
+ * - text-html: inserts raw HTML into the `insert` target's innerHTML.
+ * - plain-text: inserts raw text into the `insert` target's textContent.
+ * - tree-view: parses JSON and renders it with renderTree into the element with the same id as the source element.
+ * - modala: parses JSON, renders it with modala() into a new container, and appends/prepends it into the `insert` target (supports multi-box behavior).
+ * - default: inserts response text into the `insert` target's innerHTML when no special class is present and no `callback` attribute exists.
+ *
+ * Side effects:
+ * - Mutates DOM nodes referenced by the source element's `insert` attribute or by element id.
+ * - Calls domContentLoad() and flashClickListener(elem) after injecting content.
+ * - Uses external helpers (formAJAX, setAJAXOpts, displayColoredJson, renderTree, modala, etc.).
+ *
+ * @param {Element} elem - The source element that contains attributes controlling the request (e.g., `ajax`, `insert`) and class flags that determine response handling.
+ * @param {Map|Object|null} [opts=null] - Optional request options passed to setAJAXOpts; the function will normalize and use these internally.
+ * @param {string} [query=""] - Initial query string to append to the request; form data may be appended when `classname` is provided.
+ * @param {string} [classname=""] - If provided and matching form elements exist, formAJAX(elem, classname) is used to append form data to the query string.
+ */
 function navigate(elem, opts = null, query = "", classname = "") {
     //formAJAX at the end of this line
     // console.log(elem);
diff --git a/tree-view/dotpipe.js b/tree-view/dotpipe.js
index 9bdd707..de41a3e 100644
--- a/tree-view/dotpipe.js
+++ b/tree-view/dotpipe.js
@@ -5356,12 +5356,27 @@ function escapeHtml(html) {
 }
 
 /**
- * 
- * @param {JSON Object} value 
- * @param {string} tempTag 
- * @param {} root 
- * @param {*} id 
- * @returns HTML Object
+ * Render a JSON-like template into DOM nodes and append the result into a target container.
+ *
+ * Given a plain object describing a DOM structure (tag names, attributes, nested children,
+ * special keys like `header`, `buttons`, `sources`, `css`, `js`, `html`, `php`, `br`, `select`,
+ * `options`, and text keys), this function creates the corresponding elements, attaches
+ * resources (styles/scripts), performs fetches for external HTML/PHP sources, and appends
+ * the constructed subtree into the provided target container.
+ *
+ * Side effects:
+ * - Appends created nodes into `tempTag` (or the element identified by `tempTag` if a string ID is provided).
+ * - May append a Content-Security-Policy meta element to document.head when a `header` key is present.
+ * - Performs network fetches for `html`/`php`/`sources` entries and appends fetched content.
+ * - Calls domContentLoad() after appending to re-process framework-specific custom tags.
+ *
+ * Parameters:
+ * @param {Object} value - JSON-like template describing elements, attributes, and nested content.
+ * @param {string|HTMLElement} tempTag - Element or element ID to which the rendered content will be appended.
+ * @param {HTMLElement} [root] - Optional root context used for header rendering; defaults to resolved `tempTag`.
+ * @param {*} [id] - Unused in current implementation (reserved for callers that provide an identifier).
+ *
+ * @returns {HTMLElement|undefined} The element used as the append target (resolved `tempTag`), or `undefined` on error.
  */
 function modala(value, tempTag, root, id) {
     if (typeof (tempTag) == "string") {
@@ -5798,6 +5813,20 @@ function fileOrder(elem) {
 }
 
 
+/**
+ * Parse an HTML string and convert the first element inside the parsed document's <body> into a JSON-like structure.
+ *
+ * The returned object describes the element tree with the following shape:
+ * {
+ *   tagName: string,            // lower-cased tag name (e.g., "div")
+ *   attributes: { [name]: value }, // mapping of attribute names to values
+ *   children: Array<...>        // array of child nodes; element children are objects with the same shape,
+ *                               // text nodes are represented as { type: 'text', content: string }
+ * }
+ *
+ * @param {string} htmlString - HTML markup to parse. Only the first top-level element found in the parsed document body is converted.
+ * @return {Object} JSON-like representation of the first body child element (including its subtree).
+ */
 function htmlToJson(htmlString) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(htmlString, 'text/html');
@@ -5833,9 +5862,41 @@ function htmlToJson(htmlString) {
 }
 // Helpers to track which elements have pipe listeners
 const pipeListenersSet = new WeakSet();
+/**
+ * Check whether an element is registered to receive pipe events.
+ * @param {Element} elem - DOM element to test.
+ * @returns {boolean} True if the element has a pipe listener registered; otherwise false.
+ */
 function hasPipeListener(elem) { return pipeListenersSet.has(elem); }
+/**
+ * Mark an element as having a pipe listener registered so it won't be re-processed.
+ * @param {Element} elem - DOM element to record in the internal listener set.
+ */
 function markPipeListener(elem) { pipeListenersSet.add(elem); }
 
+/**
+ * Attach global pipe listeners and process inline/csv-foreach elements within a root element.
+ *
+ * Adds capture-phase listeners for 'click' and custom 'inline' events on the provided root element.
+ * When an interactive element (has class "mouse" or an id) without an existing pipe listener is
+ * triggered, the function:
+ *  - marks the element as having a pipe listener,
+ *  - invokes pipes(target) to perform standard pipe handling,
+ *  - if the element has an `inline` attribute, ensures a dotPipe.matrix entry for that element
+ *    and runs dotPipe.runInline for its inline macro.
+ *
+ * Also scans the root for <csv-foreach> children and invokes processCsvForeach on any not yet
+ * processed, marking them with the "processed" class to avoid reprocessing.
+ *
+ * Side effects:
+ *  - Adds event listeners to the DOM (capture phase).
+ *  - Mutates dotPipe.matrix for elements with inline macros.
+ *  - Calls external functions: markPipeListener, hasPipeListener, pipes, dotPipe.runInline,
+ *    processCsvForeach.
+ *
+ * @param {Element|Document} [rootElem=document] - Root element under which listeners are attached and
+ *        where <csv-foreach> elements are scanned.
+ */
 function addPipe(rootElem = document) {
     // Global listeners for clicks or custom 'inline' events
     ['click', 'inline'].forEach(eventType => {
@@ -5898,7 +5959,15 @@ function addPipe(rootElem = document) {
 //         }
 //     });
 
-// }
+/**
+ * Ensure an element's click handler calls the framework pipe and reprocess the DOM.
+ *
+ * If the element has an `id`, rebinds its click listener so that clicking the element
+ * invokes `pipes(elem)`. After rebinding, calls `domContentLoad(true)` to re-run tag
+ * processing for dynamic content.
+ *
+ * @param {Element} elem - The DOM element to bind; no action is taken if it has no `id`.
+ */
 
 function flashClickListener(elem) {
     if (elem.id) {
@@ -5952,6 +6021,23 @@ function sortNodesByName(selector) {
 }
 
 
+/**
+ * Dispatches actions defined by a "pipe" element's attributes and classes.
+ *
+ * Examines the provided DOM element's attributes and classes and performs the corresponding UI or network operations:
+ * - Invokes a callback function (attribute `callback`) with collected values.
+ * - Navigates or redirects (attributes/classes `ajax`, `redirect`, `lnk`).
+ * - Shows/hides or toggles classes and attributes (`display`, `x-toggle`, `set`, `get`, `delete`, `remove`).
+ * - Controls simple carousel behaviors and file ordering (`carousel-*`, `file-order`, `turn`).
+ * - Handles download links (`download` class) by creating a temporary anchor and triggering a click.
+ * - Collects query/header/form-class metadata for use by AJAX navigation.
+ * - Delegates AJAX loads to `navigate(...)` and modal loads to `modalList(...)`.
+ *
+ * This function mutates the DOM, may perform network requests, and can trigger navigation or window.open depending on element configuration.
+ *
+ * @param {Element} elem - The DOM element whose pipe attributes and classes describe the actions to run.
+ * @param {boolean} [stop=false] - Currently unused; reserved for future flow-control extensions.
+ */
 function pipes(elem, stop = false) {
 
     var query = "";
@@ -6237,6 +6323,33 @@ function displayColoredJson(elementId, jsonObj) {
     document.getElementById(elementId).innerHTML = `<pre>${prettyHtml}</pre>`;
 }
 
+/**
+ * Perform an AJAX navigation for an element's `ajax` URL and inject the response
+ * into the DOM according to the element's classes and attributes.
+ *
+ * This function builds a query string (optionally augmented by formAJAX if a
+ * classname is present), encodes it, configures request options via setAJAXOpts,
+ * and issues an XMLHttpRequest to the URL from `elem.getAttribute('ajax')`.
+ * Response handling varies by element classes:
+ * - strict-json: validates JSON and replaces document.body with the response.
+ * - json: parses JSON and renders it (displayColoredJson) and/or writes stringified JSON
+ *   into the element named by the `insert` attribute.
+ * - text-html: writes raw HTML into the `insert` target via innerHTML.
+ * - plain-text: writes raw text into the `insert` target via textContent.
+ * - tree-view: parses JSON and renders a tree into the element using renderTree.
+ * - modala: parses JSON and renders modal-like content via modala(), supporting
+ *   multi-box insertion controlled by `boxes` and modala-multi-first/last classes.
+ * - default: injects raw response into the `insert` target unless a `callback`
+ *   attribute is present.
+ *
+ * Side effects: updates DOM, calls domContentLoad() and flashClickListener(elem),
+ * and may log warnings for missing targets. This function does not return a value.
+ *
+ * @param {Element} elem - The DOM element that initiated the navigation. Must have an `ajax` attribute and may have `insert` and class flags to determine response handling.
+ * @param {Map|Object|null} [opts=null] - Optional request options; passed to setAJAXOpts and expected to be a mutable map-like object.
+ * @param {string} [query=""] - Query string to append to the ajax URL (will be URI-encoded).
+ * @param {string} [classname=""] - If non-empty, formAJAX is invoked with this classname to append serialized form data to the query string.
+ */
 function navigate(elem, opts = null, query = "", classname = "") {
     //formAJAX at the end of this line
     // console.log(elem);