lightview 2.0.9 → 2.2.1

package/docs/components/tooltip.html

@@ -71,7 +71,7 @@
                             <!-- Tabs -->
                             <script>
                                 globalThis.switchSyntaxTab = (tabId) => {
-                                    const tabs = ['tagged', 'vdom', 'object'];
+                                    const tabs = ['tagged', 'vdom', 'object', 'html'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`tab-btn-${t}`);
                                         const contentEl = document.getElementById(`syntax-${t}`);
@@ -93,6 +93,8 @@
                                 <button id="tab-btn-object" role="tab" class="syntax-tab"
                                     onclick="switchSyntaxTab('object')">Object
                                     DOM</button>
+                                <button id="tab-btn-html" role="tab" class="syntax-tab"
+                                    onclick="switchSyntaxTab('html')">HTML</button>
                             </div>
 
                             <!-- Tagged Syntax -->
@@ -196,16 +198,47 @@ const tooltips = {
     div: {
         style: 'display: flex; flex-wrap: wrap; gap: 1rem',
         children: [
-            { Tooltip: { tip: 'Tooltip on top', position: 'top', children: [{ Button: { children: ['Top'] } }] } },
-            { Tooltip: { tip: 'Tooltip on bottom', position: 'bottom', children: [{ Button: { children: ['Bottom'] } }] } },
-            { Tooltip: { tip: 'Tooltip on left', position: 'left', children: [{ Button: { children: ['Left'] } }] } },
-            { Tooltip: { tip: 'Tooltip on right', position: 'right', children: [{ Button: { children: ['Right'] } }] } }
+            { Tooltip: { tip: 'Tooltip on top', position: 'top', children: [ { Button: { children: ['Top'] } } ] } },
+            { Tooltip: { tip: 'Tooltip on bottom', position: 'bottom', children: [ { Button: { children: ['Bottom'] } } ] } },
+            { Tooltip: { tip: 'Tooltip on left', position: 'left', children: [ { Button: { children: ['Left'] } } ] } },
+            { Tooltip: { tip: 'Tooltip on right', position: 'right', children: [ { Button: { children: ['Right'] } } ] } }
         ]
     }
 };
 
 $('#demo').content(tooltips);</code></pre>
                             </div>
+
+                            <!-- HTML Syntax -->
+                            <div id="syntax-html" style="display: none;">
+                                <pre><script>
+                                    examplify(document.currentScript.nextElementSibling, {
+                                        at: document.currentScript.parentElement,
+                                        scripts: ['/lightview.js', '/lightview-x.js'],
+                                        styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
+                                        type: 'module',
+                                        language: 'html',
+                                        minHeight: 100,
+                                        html: '<div id="demo" class="p-8"></div>'
+                                    });
+                                </script><code contenteditable="true" class="language-html">&lt;script type="module" src="/components/data-display/tooltip.js"&gt;&lt;/script&gt;
+&lt;script type="module" src="/components/actions/button.js"&gt;&lt;/script&gt;
+
+&lt;div style="display: flex; flex-wrap: wrap; gap: 1rem"&gt;
+    &lt;lv-tooltip tip="Tooltip on top" position="top"&gt;
+        &lt;lv-button&gt;Top&lt;/lv-button&gt;
+    &lt;/lv-tooltip&gt;
+    &lt;lv-tooltip tip="Tooltip on bottom" position="bottom"&gt;
+        &lt;lv-button&gt;Bottom&lt;/lv-button&gt;
+    &lt;/lv-tooltip&gt;
+    &lt;lv-tooltip tip="Tooltip on left" position="left"&gt;
+        &lt;lv-button&gt;Left&lt;/lv-button&gt;
+    &lt;/lv-tooltip&gt;
+    &lt;lv-tooltip tip="Tooltip on right" position="right"&gt;
+        &lt;lv-button&gt;Right&lt;/lv-button&gt;
+    &lt;/lv-tooltip&gt;
+&lt;/div&gt;</code></pre>
+                            </div>
                         </div>
                     </div>
 
@@ -382,37 +415,44 @@ $('#demo').content(tooltips);</code></pre>
                         </table>
                     </div>
 
-                    <!-- Positions -->
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Positions</h2>
+                    <!-- Tooltip Gallery -->
+                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Tooltip Gallery</h2>
+                    <p class="text-sm" style="opacity: 0.7; margin-bottom: 1.5rem;">
+                        Live examples using <code>&lt;lv-tooltip&gt;</code> custom elements.
+                    </p>
+
+                    <script type="module" src="/components/data-display/tooltip.js"></script>
+                    <script type="module" src="/components/actions/button.js"></script>
+
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Positions</h3>
                     <div style="display: flex; flex-wrap: wrap; gap: 1rem; padding: 2rem; margin-bottom: 2rem;">
-                        <div class="tooltip tooltip-top" data-tip="Top"><button class="btn">Top</button></div>
-                        <div class="tooltip tooltip-bottom" data-tip="Bottom"><button class="btn">Bottom</button></div>
-                        <div class="tooltip tooltip-left" data-tip="Left"><button class="btn">Left</button></div>
-                        <div class="tooltip tooltip-right" data-tip="Right"><button class="btn">Right</button></div>
+                        <lv-tooltip tip="Top" position="top"><lv-button>Top</lv-button></lv-tooltip>
+                        <lv-tooltip tip="Bottom" position="bottom"><lv-button>Bottom</lv-button></lv-tooltip>
+                        <lv-tooltip tip="Left" position="left"><lv-button>Left</lv-button></lv-tooltip>
+                        <lv-tooltip tip="Right" position="right"><lv-button>Right</lv-button></lv-tooltip>
                     </div>
 
-                    <!-- Colors -->
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Colors</h2>
-                    <div class="example-flex" style="margin-bottom: 2rem;">
-                        <div class="tooltip tooltip-primary" data-tip="Primary"><button class="btn">Primary</button>
-                        </div>
-                        <div class="tooltip tooltip-secondary" data-tip="Secondary"><button
-                                class="btn">Secondary</button></div>
-                        <div class="tooltip tooltip-accent" data-tip="Accent"><button class="btn">Accent</button></div>
-                        <div class="tooltip tooltip-info" data-tip="Info"><button class="btn">Info</button></div>
-                        <div class="tooltip tooltip-success" data-tip="Success"><button class="btn">Success</button>
-                        </div>
-                        <div class="tooltip tooltip-warning" data-tip="Warning"><button class="btn">Warning</button>
-                        </div>
-                        <div class="tooltip tooltip-error" data-tip="Error"><button class="btn">Error</button></div>
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Colors</h3>
+                    <div style="display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem;">
+                        <lv-tooltip tip="Primary" color="primary"><lv-button
+                                color="primary">Primary</lv-button></lv-tooltip>
+                        <lv-tooltip tip="Secondary" color="secondary"><lv-button
+                                color="secondary">Secondary</lv-button></lv-tooltip>
+                        <lv-tooltip tip="Accent" color="accent"><lv-button
+                                color="accent">Accent</lv-button></lv-tooltip>
+                        <lv-tooltip tip="Info" color="info"><lv-button color="info">Info</lv-button></lv-tooltip>
+                        <lv-tooltip tip="Success" color="success"><lv-button
+                                color="success">Success</lv-button></lv-tooltip>
+                        <lv-tooltip tip="Warning" color="warning"><lv-button
+                                color="warning">Warning</lv-button></lv-tooltip>
+                        <lv-tooltip tip="Error" color="error"><lv-button color="error">Error</lv-button></lv-tooltip>
                     </div>
 
-                    <!-- Force Open -->
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Force Open</h2>
-                    <div style="margin-bottom: 2rem;">
-                        <div class="tooltip tooltip-open tooltip-primary" data-tip="Always visible">
-                            <button class="btn btn-primary">Always Open</button>
-                        </div>
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Force Open</h3>
+                    <div style="margin-bottom: 2rem; padding: 1rem;">
+                        <lv-tooltip tip="Always visible" open color="primary">
+                            <lv-button color="primary">Always Open</lv-button>
+                        </lv-tooltip>
                     </div>
                 </div>
             </div>

package/docs/getting-started/index.html

@@ -352,7 +352,7 @@ $('#app').content(App);`,
             // Fetch source code for display
             try {
                 const text = await fetch(file).then(r => r.text());
-                sourceCode.value = text;
+                sourceCode.value = new String(text);
             } catch (e) {
                 sourceCode.value = 'Error loading source';
             }
@@ -444,7 +444,7 @@ $('#app').content(App);`,
                                             class: 'source-code', children: [
                                                 () => sourceCode.value
                                             ]
-                                        }
+    }
                                     }
                                 ]
                             }
@@ -453,9 +453,11 @@ $('#app').content(App);`,
                 }
             },
 
-            // Styles
-            { style: { children: [
-        \`.reviews-container { width: 100%; box-sizing: border-box; font-family: system-ui, sans-serif; }
+    // Styles
+    {
+        style: {
+            children: [
+                \`.reviews-container { width: 100%; box-sizing: border-box; font-family: system-ui, sans-serif; }
 .reviews-header { margin-bottom: 1rem; }
 .reviews-title { margin: 0 0 0.5rem; }
 .reviews-subtitle { color: #6b7280; margin: 0 0 0.75rem; font-size: 0.9em; }
@@ -676,7 +678,7 @@ $('#app').content(App);`,
                     <li style="margin-bottom: 0.75rem;"><strong>Context</strong> — Gates are standard functions. They have access to <code>this</code> (the element) and can accept arguments like <code>event</code>.</li>
                     <li style="margin-bottom: 0.75rem;"><strong>Write your own</strong> — Write your own functions and add the to <code>globalThis</code> to make them available to all templates. They have access to <code>this</code> (the element) and can accept arguments like <code>event</code>.</li>
                 </ul>
-                <p><strong>Try it:</strong> Click the blue button rapidly, or type quickly into the search box to see the limiters in action!</p>`
+                <p><strong>Try it:</strong> Click the Spam Me button rapidly, or type quickly into the search box to see the limiters in action!</p>`
             }
         };
 

package/docs/index.html

@@ -53,7 +53,7 @@
                     DOM diffing needed. As a bonus, session and local storage are also supported.
                 </p>
             </a>
-            <a href="./syntax.html" class="feature-card" style="text-decoration: none; color: inherit;">
+            <a href="./api/elements.html" class="feature-card" style="text-decoration: none; color: inherit;">
                 <div class="feature-icon">
                     <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
                         <rect x="3" y="3" width="18" height="18" rx="2" />

package/docs/syntax-nav.html

@@ -0,0 +1,10 @@
+<nav class="docs-nav">
+    <div class="docs-nav-section">
+        <div class="docs-nav-title">Syntaxes</div>
+        <a href="#overview" class="docs-nav-link">Overview</a>
+        <a href="#tagged-api" class="docs-nav-link">Tagged API</a>
+        <a href="#vdom" class="docs-nav-link">vDOM Syntax</a>
+        <a href="#object-dom" class="docs-nav-link">Object DOM</a>
+        <a href="#custom-elements" class="docs-nav-link">Custom Elements</a>
+    </div>
+</nav>

package/docs/syntax.html

@@ -6,8 +6,10 @@
     }
 </script>
 
-<div class="section">
-    <div class="section-content" style="max-width: 900px;">
+<div class="docs-layout">
+    <aside class="docs-sidebar" src="/docs/syntax-nav.html"></aside>
+
+    <main class="docs-content">
         <h1>Syntaxes</h1>
         <p class="text-secondary" style="font-size: 1.125rem;">
             One reactive engine, four ways to build your UI.
@@ -19,7 +21,7 @@
             powers it all.
         </p>
 
-        <h2>Comparison at a Glance</h2>
+        <h2 id="overview">Comparison at a Glance</h2>
         <div class="overflow-x-auto">
             <table class="table w-full">
                 <thead>
@@ -44,7 +46,7 @@
                         <td>Core</td>
                     </tr>
                     <tr>
-                        <td><strong>Object DOM</strong></td>
+                        <td><strong>oDOM (Object DOM)</strong></td>
                         <td><code>{ div: { ... } }</code></td>
                         <td>Concise templates, config files</td>
                         <td>Lightview X</td>
@@ -102,7 +104,7 @@ $('body').content(app);</code></pre>
         <p><strong>Pros:</strong> Unambiguous, easy to serialize/deserialize as JSON, perfect for programmatic
             generation.</p>
 
-        <h2 id="object-dom">3. Object DOM</h2>
+        <h2 id="object-dom">3. oDOM</h2>
         <p>
             A more compact JSON representation provided by <strong>Lightview X</strong>. It uses the tag name as a key
             to reduce verbosity.
@@ -140,5 +142,5 @@ $('body').content(app);</code></pre>
         <p><strong>Pros:</strong> Familiar HTML syntax, framework-agnostic, excellent for progressive enhancement of
             server-rendered pages.</p>
 
-    </div>
+    </main>
 </div>

package/index.html

@@ -32,11 +32,11 @@
             <div class="nav-links">
                 <a href="/docs/" class="nav-link">Home</a>
                 <a href="/docs/getting-started/" class="nav-link">Get Started</a>
-                <a href="/docs/syntax.html" class="nav-link">Syntax</a>
                 <a href="/docs/api/" class="nav-link">API</a>
                 <a href="/docs/styles/" class="nav-link">Styles</a>
                 <a href="/docs/components/" class="nav-link">Components</a>
                 <a href="/docs/router/" class="nav-link">Router</a>
+                <a href="/docs/cdom.html" class="nav-link">cDOM</a>
                 <!--a href="/docs/playground/" class="nav-link">Playground</a>-->
 
                 <a href="/docs/about/" class="nav-link">About</a>
@@ -278,13 +278,13 @@
             appRouter.use('/docs', '/docs/index.html');
             appRouter.use('/docs/index.html');
             appRouter.use('/docs/getting-started', '/docs/getting-started/index.html');
-            appRouter.use('/docs/syntax.html');
             appRouter.use('/docs/about/', '/docs/about.html');
             appRouter.use('/docs/styles/', '/docs/styles/index.html');
             appRouter.use('/docs/api/', '/docs/api/index.html');
             appRouter.use('/docs/components/', '/docs/components/index.html');
             appRouter.use('/docs/examples/', '/docs/examples/index.html');
             appRouter.use('/docs/router/', '/docs/router.html');
+            appRouter.use('/docs/cdom.html');
 
             // Wildcard Routes - path replacement with automatic fetch
             appRouter.use('/docs/api/*');

package/jprx/LICENSE

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

package/jprx/README.md

@@ -0,0 +1,130 @@
+# JPRX (JSON Reactive Path eXpressions)
+
+**JPRX** is a declarative, reactive expression syntax designed for JSON-based data structures. It extends [JSON Pointer (RFC 6901)](https://www.rfc-editor.org/rfc/rfc6901) with reactivity, relative paths, operator syntax, and a rich library of helper functions.
+
+## Overview
+
+JPRX is a **syntax** and an **expression engine**. While this repository provides the parser and core helper functions, JPRX is intended to be integrated into UI libraries or state management systems that can "hydrate" these expressions into active reactive bindings.
+
+### Why JPRX?
+
+- **Declarative Power**: Define relationships between data points as easily as writing an Excel formula.
+- **Security**: JPRX strictly avoids `eval()`. Expressions are handled by a custom high-performance Pratt parser and a registry of pre-defined helpers, making it safe for dynamic content.
+- **Portability**: Because JPRX expressions are strings within JSON structures, they are easily serialized, stored, and sent over the wire.
+- **Platform Agnostic**: While Lightview is the first implementation, JPRX can be used in any environment that manages reactive state.
+
+## Syntax & Features
+
+JPRX extends the base JSON Pointer syntax with:
+
+| Feature | Syntax | Description |
+|---------|--------|-------------|
+| **Global Path** | `$/user/name` | Access global state via an absolute path. |
+| **Relative Path** | `./count` | Access properties relative to the current context. |
+| **Parent Path** | `../id` | Traverse up the state hierarchy. |
+| **Functions** | `$sum(/items...price)` | Call registered core helpers. |
+| **Explosion** | `/items...name` | Extract a property from every object in an array (spread). |
+| **Operators** | `$++/count`, `$/a + $/b` | Familiar JS-style prefix, postfix, and infix operators. |
+| **Placeholders** | `_` (item), `$event` | Context-aware placeholders for iteration and interaction. |
+
+## Human & AI Utility
+
+JPRX is uniquely positioned to bridge the gap between human developers and AI coding assistants:
+
+### For Humans: "The Excel Paradigm"
+Humans are often familiar with the "recalculation" model of spreadsheets. JPRX brings this to UI development. Instead of writing complex "glue code" (event listeners, state updates, DOM manipulation), developers specify the *formula* for a UI element once, and it stays updated forever.
+
+### For AI: Structured & Concise
+Large Language Models (LLMs) are exceptionally good at generating structured data (JSON) and formulaic expressions. They are often prone to errors when generating large blocks of imperative JavaScript logic. JPRX provides a high-level, declarative "target" for AI to aim at, resulting in:
+- **Higher Accuracy**: Less boilerplate means fewer places for the AI to hallucinate.
+- **Safety**: AI can generate UI logic that remains sandboxed and secure.
+- **Compactness**: Entire interactive components can be described in a few lines of JSON.
+
+## Operators
+
+JPRX supports a wide range of operators that provide a more concise and familiar syntax than function calls.
+
+### Arithmetic & Logic (Infix)
+Infix operators require surrounding whitespace in JPRX to avoid ambiguity with path separators.
+
+- **Arithmetic**: `+`, `-`, `*`, `/`, `mod`, `pow`
+- **Comparison**: `>`, `<`, `>=`, `<=`, `==`, `!=`
+- **Logic**: `&&`, `||`
+
+*Example:* `$/a + $/b * 10 > $/threshold`
+
+### Mutation & Unary (Prefix/Postfix)
+These operators are typically used in event handlers or for immediate state transformation.
+
+- **Increment**: `$++/count` (prefix) or `$/count++` (postfix)
+- **Decrement**: `$--/count` (prefix) or `$/count--` (postfix)
+- **Toggle**: `$!!/enabled` (logical NOT/toggle)
+
+## Helper Functions
+
+JPRX includes a comprehensive library of built-in helpers. For security, only registered helpers are available—there is no access to the global JavaScript environment.
+
+### Math
+`add`, `sub`, `mul`, `div`, `mod`, `pow`, `sqrt`, `abs`, `round`, `ceil`, `floor`, `min`, `max`
+
+### Stats
+`sum`, `avg`, `min`, `max`, `median`, `stdev`, `var`
+
+### String
+`upper`, `lower`, `trim`, `capitalize`, `titleCase`, `contains`, `startsWith`, `endsWith`, `replace`, `split`, `join`, `concat`, `len`, `default`
+
+### Array
+`count`, `map`, `filter`, `find`, `unique`, `sort`, `reverse`, `first`, `last`, `slice`, `flatten`, `join`, `len`
+
+### Logic & Comparison
+`if`, `and`, `or`, `not`, `eq`, `neq`, `gt`, `lt`, `gte`, `lte`, `between`, `in`
+
+### Formatting
+`number`, `currency`, `percent`, `thousands`
+
+### DateTime
+`now`, `today`, `date`, `formatDate`, `year`, `month`, `day`, `weekday`, `addDays`, `dateDiff`
+
+### Lookup
+`lookup`, `vlookup`, `index`, `match`
+
+### State Mutation
+`set`, `increment`, `decrement`, `toggle`, `push`, `pop`, `assign`, `clear`
+
+### Network
+`fetch(url, options?)` - *Auto-serializes JSON bodies and handles content-types.*
+
+## Example
+
+A simple reactive counter described in JPRX syntax:
+
+```json
+{
+  "div": {
+    "cdom-state": { "count": 0 },
+    "children": [
+      { "h2": "Counter" },
+      { "p": ["Current Count: ", "$/count"] },
+      { "button": { "onclick": "$increment(/count)", "children": ["+"] } },
+      { "button": { "onclick": "$decrement(/count)", "children": ["-"] } }
+    ]
+  }
+}
+```
+
+## Reference Implementation: Lightview
+
+JPRX was originally developed for [Lightview](https://github.com/anywhichway/lightview) to power its **Computational DOM (cDOM)**. Lightview serves as the primary example of how a UI library can hydrate JPRX expressions into a live, reactive interface.
+
+If you are building a UI library and want to support reactive JSON structures, this parser provides the foundation.
+
+## Getting Started
+
+The JPRX package contains:
+1. `parser.js`: The core Pratt parser and path resolution logic.
+2. `helpers/`: A comprehensive library of math, logic, string, array, formatting, and state helpers.
+
+To use JPRX, you typically register your state-management primitives (like Signals or Proxies) with the parser's registry, and then call `hydrate()` or `resolveExpression()` to activate the logic.
+
+---
+© 2026 Simon Y. Blackwell, AnyWhichWay LLC. Licensed under MIT.

package/jprx/helpers/array.js

@@ -0,0 +1,75 @@
+/**
+ * cdom ARRAY HELPERS
+ */
+
+export const count = (...args) => args.length;
+
+export const filter = (arr, predicate) => {
+    if (!Array.isArray(arr)) return [];
+    if (typeof predicate === 'function' && predicate.isLazy) {
+        return arr.filter(item => predicate.resolve(item));
+    }
+    return arr.filter(item => !!item);
+};
+
+export const map = (arr, transform) => {
+    if (!Array.isArray(arr)) return [];
+    if (typeof transform === 'string') {
+        return arr.map(item => (item && typeof item === 'object') ? item[transform] : item);
+    }
+    // Check for LazyValue (has isLazy property and resolve method)
+    if (transform && transform.isLazy && typeof transform.resolve === 'function') {
+        return arr.map(item => transform.resolve(item));
+    }
+    // If it's a plain function
+    if (typeof transform === 'function') {
+        return arr.map(transform);
+    }
+    return arr;
+};
+
+export const find = (arr, predicate) => {
+    if (!Array.isArray(arr)) return undefined;
+    if (predicate && predicate.isLazy) {
+        return arr.find(item => predicate.resolve(item));
+    }
+    return arr.find(item => !!item);
+};
+
+export const unique = (arr) => Array.isArray(arr) ? [...new Set(arr)] : [];
+
+export const sort = (arr, order = 'asc') => {
+    if (!Array.isArray(arr)) return [];
+    const sorted = [...arr];
+    sorted.sort((a, b) => {
+        if (a < b) return order === 'asc' ? -1 : 1;
+        if (a > b) return order === 'asc' ? 1 : -1;
+        return 0;
+    });
+    return sorted;
+};
+
+export const reverse = (arr) => Array.isArray(arr) ? [...arr].reverse() : [];
+export const first = (arr) => Array.isArray(arr) ? arr[0] : undefined;
+export const last = (arr) => Array.isArray(arr) ? arr[arr.length - 1] : undefined;
+export const slice = (arr, start, end) => Array.isArray(arr) ? arr.slice(start, end) : [];
+export const flatten = (arr) => Array.isArray(arr) ? arr.flat(Infinity) : [];
+export const join = (arr, sep = ',') => Array.isArray(arr) ? arr.join(String(sep)) : '';
+export const length = (arg) => Array.isArray(arg) ? arg.length : (arg ? String(arg).length : 0);
+
+export const registerArrayHelpers = (register) => {
+    register('count', count);
+    register('filter', filter, { lazyAware: true });
+    register('map', map, { lazyAware: true });
+    register('find', find, { lazyAware: true });
+    register('unique', unique);
+    register('sort', sort);
+    register('reverse', reverse);
+    register('first', first);
+    register('last', last);
+    register('slice', slice);
+    register('flatten', flatten);
+    register('join', join);
+    register('len', length);
+    register('length', length);
+};

package/jprx/helpers/compare.js

@@ -0,0 +1,26 @@
+/**
+ * cdom COMPARISON HELPERS
+ */
+
+export const gt = (a, b) => a > b;
+export const lt = (a, b) => a < b;
+export const gte = (a, b) => a >= b;
+export const lte = (a, b) => a <= b;
+export const neq = (a, b) => a !== b;
+export const between = (val, min, max) => val >= min && val <= max;
+export const contains = (arr, val) => Array.isArray(arr) && arr.includes(val);
+
+export const registerCompareHelpers = (register) => {
+    register('gt', gt);
+    register('>', gt);
+    register('lt', lt);
+    register('<', lt);
+    register('gte', gte);
+    register('>=', gte);
+    register('lte', lte);
+    register('<=', lte);
+    register('neq', neq);
+    register('!=', neq);
+    register('between', between);
+    register('in', contains);
+};

package/jprx/helpers/conditional.js

@@ -0,0 +1,34 @@
+/**
+ * cdom CONDITIONAL AGGREGATE HELPERS
+ */
+
+export const sumIf = (arr, predicate) => {
+    if (!Array.isArray(arr)) return 0;
+    const filtered = (predicate && predicate.isLazy)
+        ? arr.filter(item => predicate.resolve(item))
+        : arr;
+    return filtered.reduce((a, b) => a + (Number(b) || 0), 0);
+};
+
+export const countIf = (arr, predicate) => {
+    if (!Array.isArray(arr)) return 0;
+    if (predicate && predicate.isLazy) {
+        return arr.filter(item => predicate.resolve(item)).length;
+    }
+    return arr.filter(item => !!item).length;
+};
+
+export const avgIf = (arr, predicate) => {
+    if (!Array.isArray(arr)) return 0;
+    const filtered = (predicate && predicate.isLazy)
+        ? arr.filter(item => predicate.resolve(item))
+        : arr;
+    if (filtered.length === 0) return 0;
+    return filtered.reduce((a, b) => a + (Number(b) || 0), 0) / filtered.length;
+};
+
+export const registerConditionalHelpers = (register) => {
+    register('sumIf', sumIf);
+    register('countIf', countIf);
+    register('avgIf', avgIf);
+};

package/jprx/helpers/datetime.js

@@ -0,0 +1,54 @@
+/**
+ * cdom DATE/TIME HELPERS
+ */
+
+export const now = () => new Date().getTime();
+export const today = () => {
+    const d = new Date();
+    d.setHours(0, 0, 0, 0);
+    return d.getTime();
+};
+
+export const date = (val) => new Date(val).getTime();
+
+export const formatDate = (val, format) => {
+    const d = new Date(val);
+    if (isNaN(d.getTime())) return '';
+
+    // Minimal formatter, can be expanded
+    const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
+    if (format === 'long') options.month = 'long';
+    return d.toLocaleDateString(undefined, options);
+};
+
+export const year = (val) => new Date(val).getFullYear();
+export const month = (val) => new Date(val).getMonth() + 1;
+export const day = (val) => new Date(val).getDate();
+export const weekday = (val) => new Date(val).getDay();
+
+export const addDays = (val, days) => {
+    const d = new Date(val);
+    d.setDate(d.getDate() + Number(days));
+    return d.getTime();
+};
+
+export const dateDiff = (d1, d2, unit = 'days') => {
+    const diff = Math.abs(new Date(d1) - new Date(d2));
+    if (unit === 'seconds') return diff / 1000;
+    if (unit === 'minutes') return diff / (1000 * 60);
+    if (unit === 'hours') return diff / (1000 * 60 * 60);
+    return diff / (1000 * 60 * 60 * 24);
+};
+
+export const registerDateTimeHelpers = (register) => {
+    register('now', now);
+    register('today', today);
+    register('date', date);
+    register('formatDate', formatDate);
+    register('year', year);
+    register('month', month);
+    register('day', day);
+    register('weekday', weekday);
+    register('addDays', addDays);
+    register('dateDiff', dateDiff);
+};