lightview 2.1.0 → 2.2.2

package/docs/components/radio.html

@@ -613,41 +613,52 @@ $('#example').content(reactiveDemo);</code></pre>
                     </table>
                 </div>
 
-                <!-- Colors Example -->
-                <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Colors</h2>
-                <div style="display: flex; gap: 0.5rem; margin-bottom: 2rem;">
-                    <input type="radio" class="radio" checked name="color-demo" />
-                    <input type="radio" class="radio radio-primary" checked name="color-demo2" />
-                    <input type="radio" class="radio radio-secondary" checked name="color-demo3" />
-                    <input type="radio" class="radio radio-accent" checked name="color-demo4" />
-                    <input type="radio" class="radio radio-success" checked name="color-demo5" />
-                    <input type="radio" class="radio radio-warning" checked name="color-demo6" />
-                    <input type="radio" class="radio radio-info" checked name="color-demo7" />
-                    <input type="radio" class="radio radio-error" checked name="color-demo8" />
+                <!-- Custom Element Gallery -->
+                <h2 class="text-xl font-bold" style="margin-top: 2rem; margin-bottom: 1rem;">Radio Gallery</h2>
+                <p class="text-sm" style="opacity: 0.7; margin-bottom: 1.5rem;">
+                    Live examples using <code>&lt;lv-radio&gt;</code> and <code>&lt;lv-radio-group&gt;</code> custom
+                    elements.
+                </p>
+
+                <script type="module" src="/components/data-input/radio.js"></script>
+
+                <!-- Colors -->
+                <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-radio label="Default" checked name="color-gallery"></lv-radio>
+                    <lv-radio label="Primary" color="primary" checked name="color-gallery-1"></lv-radio>
+                    <lv-radio label="Secondary" color="secondary" checked name="color-gallery-2"></lv-radio>
+                    <lv-radio label="Accent" color="accent" checked name="color-gallery-3"></lv-radio>
+                    <lv-radio label="Success" color="success" checked name="color-gallery-4"></lv-radio>
+                    <lv-radio label="Warning" color="warning" checked name="color-gallery-5"></lv-radio>
+                    <lv-radio label="Info" color="info" checked name="color-gallery-6"></lv-radio>
+                    <lv-radio label="Error" color="error" checked name="color-gallery-7"></lv-radio>
                 </div>
 
-                <!-- Sizes Example -->
-                <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Sizes</h2>
-                <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;">
-                    <input type="radio" class="radio radio-xs" checked name="size-demo" />
-                    <input type="radio" class="radio radio-sm" checked name="size-demo2" />
-                    <input type="radio" class="radio radio-md" checked name="size-demo3" />
-                    <input type="radio" class="radio radio-lg" checked name="size-demo4" />
+                <!-- Sizes -->
+                <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Sizes</h3>
+                <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem;">
+                    <lv-radio size="xs" label="Extra Small" checked name="size-gallery-1"></lv-radio>
+                    <lv-radio size="sm" label="Small" checked name="size-gallery-2"></lv-radio>
+                    <lv-radio size="md" label="Medium" checked name="size-gallery-3"></lv-radio>
+                    <lv-radio size="lg" label="Large" checked name="size-gallery-4"></lv-radio>
                 </div>
 
-                <!-- With Label -->
-                <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">With Label</h2>
-                <div style="display: flex; flex-direction: column; width: 13rem; margin-bottom: 2rem;">
-                    <label
-                        style="display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 0.5rem 0;">
-                        <span style="font-size: 0.875rem;">Option 1</span>
-                        <input type="radio" name="label-demo" class="radio radio-primary" checked />
-                    </label>
-                    <label
-                        style="display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 0.5rem 0;">
-                        <span style="font-size: 0.875rem;">Option 2</span>
-                        <input type="radio" name="label-demo" class="radio radio-primary" />
-                    </label>
+                <!-- Radio Groups -->
+                <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Radio Groups</h3>
+                <div style="display: flex; flex-direction: column; gap: 2rem; margin-bottom: 2rem; max-width: 28rem;">
+                    <lv-radio-group label="Vertical Group (Default)" name="vertical-gallery"
+                        options='["Option 1", "Option 2", "Option 3"]' color="primary">
+                    </lv-radio-group>
+
+                    <lv-radio-group label="Horizontal Group" name="horizontal-gallery" horizontal="true"
+                        options='["Small", "Medium", "Large"]' color="secondary">
+                    </lv-radio-group>
+
+                    <lv-radio-group label="With Descriptions" name="desc-gallery"
+                        options='[{"value":"standard","label":"Standard","description":"Ships in 3-5 days"},{"value":"express","label":"Express","description":"Ships in 1-2 days"}]'
+                        color="accent">
+                    </lv-radio-group>
                 </div>
             </div>
         </div>

package/docs/components/select.html

@@ -625,70 +625,59 @@ $('#example').content(reactiveDemo);</code></pre>
                         </table>
                     </div>
 
-                    <!-- Sizes Example -->
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Sizes</h2>
+                    <!-- Custom Element Gallery -->
+                    <h2 class="text-xl font-bold" style="margin-top: 2rem; margin-bottom: 1rem;">Select Gallery</h2>
+                    <p class="text-sm" style="opacity: 0.7; margin-bottom: 1.5rem;">
+                        Live examples using <code>&lt;lv-select&gt;</code> custom elements.
+                    </p>
+
+                    <script type="module" src="/components/data-input/select.js"></script>
+
+                    <!-- Sizes -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Sizes</h3>
+                    <div
+                        style="display: flex; flex-direction: column; gap: 1rem; max-width: 20rem; margin-bottom: 2rem;">
+                        <lv-select size="xs" options='["Extra Small"]'></lv-select>
+                        <lv-select size="sm" options='["Small"]'></lv-select>
+                        <lv-select options='["Medium (default)"]'></lv-select>
+                        <lv-select size="lg" options='["Large"]'></lv-select>
+                    </div>
+
+                    <!-- Colors -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Colors</h3>
                     <div
-                        style="display: flex; flex-direction: column; gap: 0.5rem; max-width: 20rem; margin-bottom: 2rem;">
-                        <select class="select select-xs">
-                            <option>Extra Small</option>
-                        </select>
-                        <select class="select select-sm">
-                            <option>Small</option>
-                        </select>
-                        <select class="select">
-                            <option>Medium</option>
-                        </select>
-                        <select class="select select-lg">
-                            <option>Large</option>
-                        </select>
+                        style="display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; margin-bottom: 2rem;">
+                        <lv-select color="primary" options='["Primary"]'></lv-select>
+                        <lv-select color="secondary" options='["Secondary"]'></lv-select>
+                        <lv-select color="accent" options='["Accent"]'></lv-select>
+                        <lv-select color="info" options='["Info"]'></lv-select>
+                        <lv-select color="success" options='["Success"]'></lv-select>
+                        <lv-select color="warning" options='["Warning"]'></lv-select>
+                        <lv-select color="error" options='["Error"]'></lv-select>
+                        <lv-select ghost="true" options='["Ghost Style"]'></lv-select>
                     </div>
 
-                    <!-- Colors Example -->
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Colors</h2>
-                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 2rem;">
-                        <select class="select select-primary">
-                            <option>Primary</option>
-                        </select>
-                        <select class="select select-secondary">
-                            <option>Secondary</option>
-                        </select>
-                        <select class="select select-accent">
-                            <option>Accent</option>
-                        </select>
-                        <select class="select select-info">
-                            <option>Info</option>
-                        </select>
-                        <select class="select select-success">
-                            <option>Success</option>
-                        </select>
-                        <select class="select select-warning">
-                            <option>Warning</option>
-                        </select>
-                        <select class="select select-error">
-                            <option>Error</option>
-                        </select>
-                        <select class="select select-ghost">
-                            <option>Ghost</option>
-                        </select>
+                    <!-- Labels and Helpers -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Labels & Assistance</h3>
+                    <div
+                        style="display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; max-width: 28rem;">
+                        <lv-select label="Country" placeholder="Select your country"
+                            options='["United States", "United Kingdom", "Canada", "Other"]'
+                            helper="Used for shipping calculations.">
+                        </lv-select>
+                        <lv-select label="Required Field" placeholder="Must choose one"
+                            options='["Choice A", "Choice B"]' required="true">
+                        </lv-select>
+                        <lv-select label="Error State" options='["Option 1", "Option 2"]'
+                            error="Selection is required.">
+                        </lv-select>
                     </div>
 
-                    <!-- With Fieldset -->
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">With Label (Fieldset Pattern)</h2>
-                    <div style="max-width: 28rem; margin-bottom: 2rem;">
-                        <fieldset
-                            style="display: flex; flex-direction: column; gap: 0.5rem; border: none; padding: 0.5rem 0;">
-                            <legend
-                                style="font-size: 0.875rem; font-weight: 700; color: oklch(var(--bc)/0.8); padding: 0 0.5rem;">
-                                Country</legend>
-                            <select class="select" style="width: 100%;">
-                                <option disabled selected>Select your country</option>
-                                <option>United States</option>
-                                <option>United Kingdom</option>
-                                <option>Canada</option>
-                            </select>
-                            <p style="font-size: 0.875rem; color: oklch(var(--bc)/0.6); padding: 0 0.5rem;">Used for
-                                shipping calculations.</p>
-                        </fieldset>
+                    <!-- States -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">States</h3>
+                    <div
+                        style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; max-width: 28rem;">
+                        <lv-select label="Disabled Select" options='["Locked value"]' disabled="true"></lv-select>
                     </div>
                 </div>
             </div>

package/docs/components/toggle.html

@@ -528,35 +528,54 @@ $('#example').content(demo);</code></pre>
                         </table>
                     </div>
 
-                    <!-- Colors Example -->
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Colors</h2>
-                    <div class="example-flex" style="margin-bottom: 2rem;">
-                        <input type="checkbox" class="toggle" checked />
-                        <input type="checkbox" class="toggle toggle-primary" checked />
-                        <input type="checkbox" class="toggle toggle-secondary" checked />
-                        <input type="checkbox" class="toggle toggle-accent" checked />
-                        <input type="checkbox" class="toggle toggle-success" checked />
-                        <input type="checkbox" class="toggle toggle-warning" checked />
-                        <input type="checkbox" class="toggle toggle-info" checked />
-                        <input type="checkbox" class="toggle toggle-error" checked />
+                    <!-- Custom Element Gallery -->
+                    <h2 class="text-xl font-bold" style="margin-top: 2rem; margin-bottom: 1rem;">Toggle Gallery</h2>
+                    <p class="text-sm" style="opacity: 0.7; margin-bottom: 1.5rem;">
+                        Live examples using <code>&lt;lv-toggle&gt;</code> custom elements.
+                    </p>
+
+                    <script type="module" src="/components/data-input/toggle.js"></script>
+
+                    <!-- Colors -->
+                    <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-toggle label="Default" checked="true"></lv-toggle>
+                        <lv-toggle label="Primary" color="primary" checked="true"></lv-toggle>
+                        <lv-toggle label="Secondary" color="secondary" checked="true"></lv-toggle>
+                        <lv-toggle label="Accent" color="accent" checked="true"></lv-toggle>
+                        <lv-toggle label="Success" color="success" checked="true"></lv-toggle>
+                        <lv-toggle label="Warning" color="warning" checked="true"></lv-toggle>
+                        <lv-toggle label="Info" color="info" checked="true"></lv-toggle>
+                        <lv-toggle label="Error" color="error" checked="true"></lv-toggle>
+                    </div>
+
+                    <!-- Sizes -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Sizes</h3>
+                    <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem;">
+                        <lv-toggle size="xs" label="Extra Small" checked="true"></lv-toggle>
+                        <lv-toggle size="sm" label="Small" checked="true"></lv-toggle>
+                        <lv-toggle size="md" label="Medium" checked="true"></lv-toggle>
+                        <lv-toggle size="lg" label="Large" checked="true"></lv-toggle>
                     </div>
 
-                    <!-- Sizes Example -->
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Sizes</h2>
-                    <div class="example-flex" style="margin-bottom: 2rem;">
-                        <input type="checkbox" class="toggle toggle-xs" checked />
-                        <input type="checkbox" class="toggle toggle-sm" checked />
-                        <input type="checkbox" class="toggle toggle-md" checked />
-                        <input type="checkbox" class="toggle toggle-lg" checked />
+                    <!-- Labels and Descriptions -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Labels & Descriptions</h3>
+                    <div
+                        style="display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; max-width: 28rem;">
+                        <lv-toggle label="Notifications" description="Enable push notifications for new messages."
+                            color="primary" checked="true">
+                        </lv-toggle>
+                        <lv-toggle label="Public Profile" label-position="right"
+                            description="Allow others to see your active status." color="secondary">
+                        </lv-toggle>
                     </div>
 
-                    <!-- With Label -->
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">With Label</h2>
-                    <div class="form-control w-52" style="margin-bottom: 2rem;">
-                        <label class="label cursor-pointer">
-                            <span class="label-text">Remember me</span>
-                            <input type="checkbox" class="toggle toggle-primary" checked />
-                        </label>
+                    <!-- States -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">States</h3>
+                    <div
+                        style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; max-width: 28rem;">
+                        <lv-toggle label="Disabled Off" disabled="true"></lv-toggle>
+                        <lv-toggle label="Disabled On" checked="true" disabled="true"></lv-toggle>
                     </div>
                 </div>
             </div>

package/docs/getting-started/index.html

@@ -380,7 +380,7 @@ $('#app').content(App);`,
                                     {
                                         button: {
                                             class: 'format-btn html',
-                                            href: './reviews.html',
+                                            href: '/docs/getting-started/reviews.html',
                                             target: '#reviews-box',
                                             onclick: () => loadFormat('HTML', './reviews.html'),
                                             children: ['📄 HTML']
@@ -389,7 +389,7 @@ $('#app').content(App);`,
                                     {
                                         button: {
                                             class: 'format-btn vdom',
-                                            href: './reviews.vdom',
+                                            href: '/docs/getting-started/reviews.vdom',
                                             target: '#reviews-box',
                                             onclick: () => loadFormat('VDOM', './reviews.vdom'),
                                             children: ['🔷 VDOM']
@@ -398,7 +398,7 @@ $('#app').content(App);`,
                                     {
                                         button: {
                                             class: 'format-btn odom',
-                                            href: './reviews.odom',
+                                            href: '/docs/getting-started/reviews.odom',
                                             target: '#reviews-box',
                                             onclick: () => loadFormat('ODOM', './reviews.odom'),
                                             children: ['🔶 Object DOM']
@@ -678,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/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/{cdom → jprx}/helpers/array.js

@@ -17,9 +17,14 @@ export const map = (arr, transform) => {
     if (typeof transform === 'string') {
         return arr.map(item => (item && typeof item === 'object') ? item[transform] : item);
     }
-    if (transform && transform.isLazy) {
+    // 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;
 };
 
@@ -54,9 +59,9 @@ export const length = (arg) => Array.isArray(arg) ? arg.length : (arg ? String(a
 
 export const registerArrayHelpers = (register) => {
     register('count', count);
-    register('filter', filter);
-    register('map', map);
-    register('find', find);
+    register('filter', filter, { lazyAware: true });
+    register('map', map, { lazyAware: true });
+    register('find', find, { lazyAware: true });
     register('unique', unique);
     register('sort', sort);
     register('reverse', reverse);

package/{cdom → jprx}/helpers/state.js

@@ -14,19 +14,22 @@ export const set = (target, val) => {
 };
 
 export const increment = (target, by = 1) => {
-    const current = (target && typeof target === 'object' && 'value' in target) ? target.value : 0;
+    const hasValue = target && (typeof target === 'object' || typeof target === 'function') && 'value' in target;
+    const current = hasValue ? target.value : 0;
     const next = Number(current) + Number(by);
     return set(target, next);
 };
 
 export const decrement = (target, by = 1) => {
-    const current = (target && typeof target === 'object' && 'value' in target) ? target.value : 0;
+    const hasValue = target && (typeof target === 'object' || typeof target === 'function') && 'value' in target;
+    const current = hasValue ? target.value : 0;
     const next = Number(current) - Number(by);
     return set(target, next);
 };
 
 export const toggle = (target) => {
-    const current = (target && typeof target === 'object' && 'value' in target) ? target.value : false;
+    const hasValue = target && (typeof target === 'object' || typeof target === 'function') && 'value' in target;
+    const current = hasValue ? target.value : false;
     return set(target, !current);
 };
 

package/jprx/index.js

@@ -0,0 +1,69 @@
+/**
+ * JPRX - JSON Reactive Path eXpressions
+ * A reactive expression language for JSON data.
+ * 
+ * JPRX extends JSON Pointer syntax with:
+ * - Reactive path resolution ($/path/to/value)
+ * - Helper functions (sum, map, filter, etc.)
+ * - Operators (++, --, +, -, *, /, etc.)
+ * - Explosion operator for array spreading (...prop)
+ * - Relative paths (../, ./)
+ */
+
+// Core parser and expression resolution
+export {
+    registerHelper,
+    registerOperator,
+    parseExpression,
+    resolvePath,
+    resolvePathAsContext,
+    resolveExpression,
+    parseCDOMC,
+    parseJPRX,
+    unwrapSignal,
+    getRegistry,
+    BindingTarget
+} from './parser.js';
+
+// Helper modules - these export registration functions
+export { registerMathHelpers } from './helpers/math.js';
+export { registerLogicHelpers } from './helpers/logic.js';
+export { registerStringHelpers } from './helpers/string.js';
+export { registerArrayHelpers } from './helpers/array.js';
+export { registerCompareHelpers } from './helpers/compare.js';
+export { registerConditionalHelpers } from './helpers/conditional.js';
+export { registerDateTimeHelpers } from './helpers/datetime.js';
+export { registerFormatHelpers } from './helpers/format.js';
+export { registerLookupHelpers } from './helpers/lookup.js';
+export { registerStatsHelpers } from './helpers/stats.js';
+export { registerStateHelpers, set } from './helpers/state.js';
+export { registerNetworkHelpers } from './helpers/network.js';
+
+// Convenience function to register all standard helpers
+export const registerAllHelpers = (registerFn) => {
+    const { registerMathHelpers } = require('./helpers/math.js');
+    const { registerLogicHelpers } = require('./helpers/logic.js');
+    const { registerStringHelpers } = require('./helpers/string.js');
+    const { registerArrayHelpers } = require('./helpers/array.js');
+    const { registerCompareHelpers } = require('./helpers/compare.js');
+    const { registerConditionalHelpers } = require('./helpers/conditional.js');
+    const { registerDateTimeHelpers } = require('./helpers/datetime.js');
+    const { registerFormatHelpers } = require('./helpers/format.js');
+    const { registerLookupHelpers } = require('./helpers/lookup.js');
+    const { registerStatsHelpers } = require('./helpers/stats.js');
+    const { registerStateHelpers } = require('./helpers/state.js');
+    const { registerNetworkHelpers } = require('./helpers/network.js');
+
+    registerMathHelpers(registerFn);
+    registerLogicHelpers(registerFn);
+    registerStringHelpers(registerFn);
+    registerArrayHelpers(registerFn);
+    registerCompareHelpers(registerFn);
+    registerConditionalHelpers(registerFn);
+    registerDateTimeHelpers(registerFn);
+    registerFormatHelpers(registerFn);
+    registerLookupHelpers(registerFn);
+    registerStatsHelpers(registerFn);
+    registerStateHelpers((name, fn) => registerFn(name, fn, { pathAware: true }));
+    registerNetworkHelpers(registerFn);
+};