lightview 2.0.9 → 2.2.1

package/docs/cdom.html

@@ -0,0 +1,792 @@
+<script src="/lightview-router.js?base=/index.html"></script>
+
+<style>
+    /* Syntax Tabs */
+    .syntax-tabs {
+        display: inline-flex;
+        gap: 0.25rem;
+        padding: 0.25rem;
+        background: #f1f5f9;
+        border-radius: 8px;
+        border: 1px solid #e2e8f0;
+        margin-bottom: 1rem;
+    }
+
+    [data-theme="dark"] .syntax-tabs {
+        background: #1e293b;
+        border-color: #334155;
+    }
+
+    .syntax-tab {
+        padding: 0.5rem 1rem;
+        font-size: 0.875rem;
+        font-weight: 500;
+        border: none;
+        background: transparent;
+        border-radius: 6px;
+        cursor: pointer;
+        color: #64748b;
+        transition: all 0.2s;
+    }
+
+    .syntax-tab:hover {
+        background: #ffffff;
+        color: #1e293b;
+    }
+
+    [data-theme="dark"] .syntax-tab:hover {
+        background: #334155;
+        color: #f1f5f9;
+    }
+
+    .syntax-tab-active {
+        background: #ffffff !important;
+        color: #6366f1 !important;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    }
+
+    [data-theme="dark"] .syntax-tab-active {
+        background: #0f172a !important;
+        color: #818cf8 !important;
+    }
+</style>
+
+<script>
+    globalThis.switchCDOMTab = (tabId) => {
+        const tabs = ['jprx', 'jprxc', 'operators'];
+        tabs.forEach(t => {
+            const btn = document.getElementById(`tab-btn-${t}`);
+            const pane = document.getElementById(`pane-${t}`);
+            if (t === tabId) {
+                btn.classList.add('syntax-tab-active');
+                pane.style.display = 'block';
+            } else {
+                btn.classList.remove('syntax-tab-active');
+                pane.style.display = 'none';
+            }
+        });
+    };
+</script>
+
+<div class="docs-layout">
+    <aside class="docs-sidebar" src="/docs/cdom-nav.html"></aside>
+
+    <main class="docs-content">
+        <h1>cDOM (Computational DOM)</h1>
+        <p class="text-secondary" style="font-size: 1.125rem;">
+            A declarative, expression-based way to build reactive UIs.
+        </p>
+
+        <!-- ===== OVERVIEW ===== -->
+        <h2 id="overview">Overview</h2>
+        <p>
+            The <strong>Computational DOM (cDOM)</strong> is a way to describe user interfaces using reactive
+            expressions
+            that feel as natural as spreadsheet formulas. Instead of writing JavaScript logic to update your UI,
+            you define the <em>relationships</em> between your data and your elements.
+        </p>
+        <p>
+            cDOM was designed so that both developers and LLMs can generate safe user interfaces that humans
+            can interact with across platforms.
+        </p>
+        <p>
+            cDOM uses <strong>JPRX (JSON Pointer Reactive eXpressions)</strong> as its expression language. JPRX
+            extends <a href="https://www.rfc-editor.org/rfc/rfc6901" target="_blank">JSON Pointer (RFC 6901)</a>
+            with reactivity, relative paths, and helper functions.
+        </p>
+        <p>
+            If you wish to explore the implementation further, you can visit the <a
+                href="https://github.com/anywhichway/lightview" target="_blank">GitHub repository</a>, browse the <a
+                href="https://github.com/anywhichway/lightview/tree/main/cdom" target="_blank">cdom directory</a>, and
+            check out the <a href="https://github.com/anywhichway/lightview/tree/main/tests/cdom" target="_blank">cdom
+                unit tests</a>.
+        </p>
+
+        <!-- ===== SIMPLE EXAMPLE ===== -->
+        <h2 id="simple-example">Simple Example</h2>
+        <p>Here's a simple counter in cDOM. Notice how the UI is purely declarative — no JavaScript logic:</p>
+        <div class="code-block">
+            <pre><code>{
+    div: {
+        "cdom-state": { count: 0 },
+        children: [
+            { h2: "Counter" },
+            { p: ["Count: ", $/count] },
+            { button: { onclick: $increment(/count), children: ["+"] } },
+            { button: { onclick: $decrement(/count), children: ["-"] } }
+        ]
+    }
+}</code></pre>
+        </div>
+        <p>
+            This defines a counter with:
+        </p>
+        <ul>
+            <li><code>cdom-state</code> — Local reactive state with <code>count: 0</code></li>
+            <li><code>$/count</code> — A path that reactively displays the count value</li>
+            <li><code>$increment(/count)</code> — Increment the count when clicked</li>
+            <li><code>$decrement(/count)</code> — Decrement the count when clicked</li>
+        </ul>
+        <p>
+            The UI automatically updates whenever <code>count</code> changes — no manual DOM manipulation required.
+        </p>
+
+        <!-- ===== ADVANTAGES ===== -->
+        <h2 id="advantages">Advantages</h2>
+        <div class="feature-grid" style="margin: 2rem 0;">
+            <div class="feature-card">
+                <h3 class="feature-title">🛡️ Enhanced Security</h3>
+                <p>
+                    cDOM strictly avoids <code>eval()</code> and direct HTML injection. By using a custom
+                    high-performance parser and a registry of pre-defined helper functions, it provides a safe sandbox
+                    for dynamic content, making it highly resistant to XSS attacks.
+                </p>
+            </div>
+            <div class="feature-card">
+                <h3 class="feature-title">🤖 LLM Friendly</h3>
+                <p>
+                    Large Language Models excel at generating structured data and formulaic expressions. cDOM's
+                    declarative nature and concise syntax make it far easier for AI to generate correct,
+                    bug-free UI components compared to traditional JavaScript-heavy frameworks.
+                </p>
+            </div>
+        </div>
+
+        <!-- ===== JPRX INTRODUCTION ===== -->
+        <h2 id="JPRX">JPRX (JSON Pointer Reactive eXpressions)</h2>
+        <p>
+            <strong>JPRX</strong> is the expression language that powers cDOM. It extends
+            <a href="https://www.rfc-editor.org/rfc/rfc6901" target="_blank">JSON Pointer (RFC 6901)</a>
+            with reactivity, relative paths, and helper functions.
+        </p>
+
+        <h3 id="JPRX-delimiters">Delimiters</h3>
+        <p>
+            JPRX expressions begin with a <code>$</code> delimiter:
+        </p>
+        <table class="api-table">
+            <thead>
+                <tr>
+                    <th>Delimiter</th>
+                    <th>Purpose</th>
+                    <th>Example</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><code>$/</code></td>
+                    <td>Access a path in the global registry</td>
+                    <td><code>$/users/0/name</code></td>
+                </tr>
+                <tr>
+                    <td><code>$function(</code></td>
+                    <td>Call a helper function</td>
+                    <td><code>$sum(/items...price)</code></td>
+                </tr>
+            </tbody>
+        </table>
+        <p>
+            Once inside a JPRX expression, paths follow <strong>JSON Pointer</strong> syntax. The <code>$</code>
+            is only needed at the start of the expression.
+        </p>
+
+        <h3 id="JPRX-anatomy">Anatomy of a Path</h3>
+        <p>
+            Inside a JPRX expression, paths follow JSON Pointer with these extensions:
+        </p>
+        <table class="api-table">
+            <thead>
+                <tr>
+                    <th>Path</th>
+                    <th>Description</th>
+                    <th>Origin</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><code>/users/0/name</code></td>
+                    <td>Absolute path (property access)</td>
+                    <td>JSON Pointer</td>
+                </tr>
+                <tr>
+                    <td><code>/items[2]</code></td>
+                    <td>Array index (bracket notation)</td>
+                    <td>JPRX extension</td>
+                </tr>
+                <tr>
+                    <td><code>./child</code></td>
+                    <td>Relative to current context</td>
+                    <td>JPRX extension</td>
+                </tr>
+                <tr>
+                    <td><code>../sibling</code></td>
+                    <td>Parent context access</td>
+                    <td>JPRX extension</td>
+                </tr>
+                <tr>
+                    <td><code>/items...price</code></td>
+                    <td>Extract <code>price</code> from all items (explosion)</td>
+                    <td>JPRX extension</td>
+                </tr>
+            </tbody>
+        </table>
+
+        <h4>Function Calls</h4>
+        <p>
+            Paths can contain function calls to transform data:
+        </p>
+        <div class="code-block">
+            <pre><code>$currency(sum(map(filter(/orders, eq(_/status, 'paid')), _/total)...))</code></pre>
+        </div>
+        <ul>
+            <li><strong>/orders</strong>: Access the <code>orders</code> collection (JSON Pointer)</li>
+            <li><strong>filter(..., eq(...))</strong>: Keep only "paid" orders</li>
+            <li><strong>map(..., _/total)</strong>: Extract the <code>total</code> from each order</li>
+            <li><strong>...</strong>: Explode the array into individual arguments</li>
+            <li><strong>sum(...)</strong>: Add up all the totals</li>
+            <li><strong>$currency(...)</strong>: Format as currency string</li>
+        </ul>
+
+        <h3 id="JPRX-placeholders">Placeholders</h3>
+        <table class="api-table">
+            <thead>
+                <tr>
+                    <th>Placeholder</th>
+                    <th>Description</th>
+                    <th>Example</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><code>_</code></td>
+                    <td>Current item during iteration</td>
+                    <td><code>$map(/items, _/name)</code></td>
+                </tr>
+                <tr>
+                    <td><code>$event</code></td>
+                    <td>Event object in handlers</td>
+                    <td><code>$set($/selected, $event/target/value)</code></td>
+                </tr>
+            </tbody>
+        </table>
+
+        <!-- ===== COMPARISON TO EXCEL ===== -->
+        <h2 id="comparison">Comparison to Excel</h2>
+        <p>
+            Think of your UI as a spreadsheet. In Excel, if Cell C1 has the formula <code>=A1+B1</code>, C1
+            updates automatically whenever A1 or B1 changes.
+        </p>
+        <p>
+            cDOM brings this exact paradigm to the web. Every attribute and text node can be a "cell" that
+            computes its value based on other "cells" (reactive signals).
+        </p>
+
+        <table class="api-table">
+            <thead>
+                <tr>
+                    <th>Feature</th>
+                    <th>Excel</th>
+                    <th>cDOM / JPRX</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><strong>Reactive Unit</strong></td>
+                    <td>Cell</td>
+                    <td>Signal / State Proxy</td>
+                </tr>
+                <tr>
+                    <td><strong>Formulas</strong></td>
+                    <td><code>=SUM(A1:A10)</code></td>
+                    <td><code>$sum(/items...price)</code></td>
+                </tr>
+                <tr>
+                    <td><strong>Path Resolution</strong></td>
+                    <td>Cell References (A1, $B$2)</td>
+                    <td>JSON Pointer paths (./name, $/global)</td>
+                </tr>
+                <tr>
+                    <td><strong>Recalculation</strong></td>
+                    <td>Automatic on change</td>
+                    <td>Automatic on change</td>
+                </tr>
+            </tbody>
+        </table>
+
+        <!-- ===== LIGHTVIEW INTEGRATION ===== -->
+        <h2 id="integration">Lightview Integration</h2>
+        <p>
+            cDOM integrates seamlessly with Lightview's existing DOM formats. You can use JPRX expressions
+            in any of Lightview's hypermedia formats:
+        </p>
+
+        <h3>vDOM (Virtual DOM)</h3>
+        <p>JPRX expressions work directly in vDOM arrays:</p>
+        <div class="code-block">
+            <pre><code>["div", { class: "counter" },
+    ["p", "Count: ", "$/count"],
+    ["button", { onclick: "$increment(/count)" }, "+"]
+]</code></pre>
+        </div>
+
+        <h3>oDOM (Object DOM)</h3>
+        <p>JPRX expressions work in oDOM objects:</p>
+        <div class="code-block">
+            <pre><code>{
+    tag: "div",
+    attributes: { class: "counter" },
+    children: [
+        { tag: "p", children: ["Count: ", "$/count"] },
+        { tag: "button", attributes: { onclick: "$increment(/count)" }, children: ["+"] }
+    ]
+}</code></pre>
+        </div>
+
+        <h3>cDOM Shorthand</h3>
+        <p>cDOM's concise shorthand syntax:</p>
+        <div class="code-block">
+            <pre><code>{
+    div: {
+        class: "counter",
+        children: [
+            { p: ["Count: ", $/count] },
+            { button: { onclick: "$increment(/count)", children: ["+"] } }
+        ]
+    }
+}</code></pre>
+        </div>
+
+        <!-- ===== DIRECTIVES ===== -->
+        <h2 id="directives">Directives</h2>
+        <p>
+            cDOM provides custom attributes (directives) to bridge static HTML and reactive state.
+        </p>
+
+        <h3 id="cdom-state">cdom-state</h3>
+        <p>
+            Defines local reactive state on an element. Children can access this state using relative paths.
+        </p>
+        <div class="code-block">
+            <pre><code>{ 
+    div: { 
+        "cdom-state": { count: 0, name: "Guest" }, 
+        children: [
+            { p: ["Hello, ", $/name] },
+            { p: ["Count: ", $/count] }
+        ]
+    }
+}</code></pre>
+        </div>
+
+        <h3 id="cdom-bind">cdom-bind</h3>
+        <p>
+            Creates two-way data binding between an input and a reactive path.
+        </p>
+        <div class="code-block">
+            <pre><code>{ input: { type: "text", "cdom-bind": "$/user/name", placeholder: "Enter name" } }
+{ input: { type: "checkbox", "cdom-bind": "$/settings/enabled" } }</code></pre>
+        </div>
+        <p>
+            <strong>Smart Initialization:</strong> If the state is <code>undefined</code>,
+            <code>cdom-bind</code> will use the input's initial value to populate the state.
+        </p>
+
+        <!-- ===== SHOPPING CART EXAMPLE ===== -->
+        <h2 id="shopping-cart">Shopping Cart Example</h2>
+        <p>A more complete example showing reactive expressions with data transformations:</p>
+
+        <div id="shopping-cart-example">
+            <pre><script>
+                examplify(document.currentScript.nextElementSibling, {
+                    at: document.currentScript.parentElement,
+                    scripts: ['/lightview.js', '/lightview-x.js', '/lightview-cdom.js'],
+                    type: 'module',
+                    height: '350px',
+                    autoRun: true
+                });
+            </script><code contenteditable="true">// Shopping Cart: Demonstrating $map and $currency helpers
+await import('/lightview-cdom.js');
+const { parseJPRX, hydrate } = globalThis.LightviewCDOM;
+const { $ } = Lightview;
+
+const cdomString = `{ 
+    div: {
+        "cdom-state": {
+            cart: {
+                items: [
+                    { name: "Apple", price: 1.00 },
+                    { name: "Orange", price: 2.00 }
+                ]
+            }
+        },
+        children: [
+            { h3: "Shopping Cart" },
+            { ul: { 
+                children: $map(/cart/items, { li: { children: [_/name, " - ", $currency(_/price)] } })
+            }},
+            { p: { 
+                style: "font-weight: bold; margin-top: 1rem;",
+                children: ["Total: ", $currency(sum(/cart/items...price))]
+            }}
+        ]
+    }
+}`;
+
+const hydrated = hydrate(parseJPRX(cdomString));
+$('#example').content(hydrated);
+globalThis.LightviewCDOM.activate(hydrated.domEl);
+</code></pre>
+        </div>
+
+        <!-- ===== INTERACTIVE EXAMPLE ===== -->
+        <h2 id="interactive-example">Interactive Example</h2>
+        <p>
+            Choose a syntax to see how the same reactive counter can be defined using standard JSON, concise JPRXC, or
+            operator syntax.
+        </p>
+
+        <div role="tablist" class="syntax-tabs">
+            <button id="tab-btn-jprx" class="syntax-tab syntax-tab-active" onclick="switchCDOMTab('jprx')">JPRX
+                (Standard)</button>
+            <button id="tab-btn-jprxc" class="syntax-tab" onclick="switchCDOMTab('jprxc')">JPRXC (Concise)</button>
+            <button id="tab-btn-operators" class="syntax-tab" onclick="switchCDOMTab('operators')">Operators</button>
+        </div>
+
+        <!-- JPRX Pane -->
+        <div id="pane-jprx">
+            <pre><script>
+                examplify(document.currentScript.nextElementSibling, {
+                    at: document.currentScript.parentElement,
+                    scripts: ['/lightview.js', '/lightview-x.js', '/lightview-cdom.js'],
+                    type: 'module',
+                    height: '250px',
+                    autoRun: true
+                });
+            </script><code contenteditable="true">// JPRX: Standard JSON format (strict)
+await import('/lightview-cdom.js');
+const { parseJPRX, hydrate } = globalThis.LightviewCDOM;
+const { signal, $ } = Lightview;
+
+const count = signal(0, 'count');
+
+const cdomString = `{
+    "div": {
+        "children": [
+            { "h3": ["Standard JPRX Counter"] },
+            { "p": { "children": ["Count: ", "$/count"] }},
+            { "div": { "children": [
+                { "button": { "onclick": "$decrement(/count)", "children": ["-"] } },
+                { "button": { "onclick": "$increment(/count)", "children": ["+"] } }
+            ]}}
+        ]
+    }
+}`;
+
+const hydrated = hydrate(parseJPRX(cdomString));
+$('#example').content(hydrated);
+globalThis.LightviewCDOM.activate(hydrated.domEl);
+</code></pre>
+        </div>
+
+        <!-- JPRXC Pane -->
+        <div id="pane-jprxc" style="display: none;">
+            <pre><script>
+                examplify(document.currentScript.nextElementSibling, {
+                    at: document.currentScript.parentElement,
+                    scripts: ['/lightview.js', '/lightview-x.js', '/lightview-cdom.js'],
+                    type: 'module',
+                    height: '250px'
+                });
+            </script><code contenteditable="true">// JPRXC: Concise format (unquoted keys, comments)
+await import('/lightview-cdom.js');
+const { parseJPRX, hydrate } = globalThis.LightviewCDOM;
+const { signal, $ } = Lightview;
+
+const count = signal(0, 'count');
+
+const cdomString = `{
+    div: {
+        children: [
+            { h3: ["Concise Counter"] },
+            { p: { children: ["Count: ", $/count] }},
+            { div: { children: [
+                { button: { onclick: $decrement(/count), children: ["-"] } },
+                { button: { onclick: $increment(/count), children: ["+"] } }
+            ]}}
+        ]
+    }
+}`;
+
+const hydrated = hydrate(parseJPRX(cdomString));
+$('#example').content(hydrated);
+globalThis.LightviewCDOM.activate(hydrated.domEl);
+</code></pre>
+        </div>
+
+        <!-- Operators Pane -->
+        <div id="pane-operators" style="display: none;">
+            <pre><script>
+                examplify(document.currentScript.nextElementSibling, {
+                    at: document.currentScript.parentElement,
+                    scripts: ['/lightview.js', '/lightview-x.js', '/lightview-cdom.js'],
+                    type: 'module',
+                    height: '250px'
+                });
+            </script><code contenteditable="true">// Operators: Using $++/path and $--/path
+await import('/lightview-cdom.js');
+const { parseJPRX, hydrate } = globalThis.LightviewCDOM;
+const { signal, $ } = Lightview;
+
+const count = signal(0, 'count');
+
+const cdomString = `{
+    div: {
+        children: [
+            { h3: ["Operator Counter"] },
+            { p: { children: ["Count: ", $/count] }},
+            { div: { children: [
+                // Prefix operators: $-- and $++
+                { button: { onclick: $--/count, children: ["-"] } },
+                { button: { onclick: $++/count, children: ["+"] } }
+            ]}}
+        ]
+    }
+}`;
+
+const hydrated = hydrate(parseJPRX(cdomString));
+$('#example').content(hydrated);
+globalThis.LightviewCDOM.activate(hydrated.domEl);
+</code></pre>
+        </div>
+
+        <!-- ===== OPERATOR SYNTAX EXAMPLE ===== -->
+        <h2 id="operator-syntax">Operator Syntax</h2>
+        <p>
+            JPRX now supports <strong>prefix</strong> and <strong>postfix</strong> operator syntax as alternatives to
+            function calls.
+            This makes expressions more concise and familiar to JavaScript developers.
+        </p>
+
+        <h3>Equivalent Expressions</h3>
+        <table class="api-table">
+            <thead>
+                <tr>
+                    <th>Function Syntax</th>
+                    <th>Operator Syntax</th>
+                    <th>Description</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><code>$increment(/count)</code></td>
+                    <td><code>$++/count</code> or <code>$/count++</code></td>
+                    <td>Increment by 1</td>
+                </tr>
+                <tr>
+                    <td><code>$decrement(/count)</code></td>
+                    <td><code>$--/count</code> or <code>$/count--</code></td>
+                    <td>Decrement by 1</td>
+                </tr>
+                <tr>
+                    <td><code>$toggle(/enabled)</code></td>
+                    <td><code>$!!/enabled</code></td>
+                    <td>Toggle boolean (prefix only)</td>
+                </tr>
+            </tbody>
+        </table>
+
+
+
+        <!-- ===== EVENTS ===== -->
+        <h2 id="events">Events and Interaction</h2>
+        <p>
+            cDOM handles user interactions gracefully, whether in standalone applications or LLM-driven environments.
+        </p>
+
+        <h3 id="events-manual">Manual Implementation</h3>
+        <p>
+            Use standard event attributes with JPRX expressions:
+        </p>
+        <div class="code-block">
+            <pre><code>{ button: { onclick: $(++, $/count), children: ["Click Me"] } }
+{ input: { oninput: $set($/name, $event/target/value) } }</code></pre>
+        </div>
+
+        <h3 id="events-llm">LLM-Generated Interaction</h3>
+        <p>
+            LLMs can generate event handlers to register interest in user actions:
+        </p>
+        <div class="code-block">
+            <pre><code>{ 
+    button: {
+        onclick: $fetch('/api/notify', { method: 'POST', body: $event }),
+        children: ["Notify LLM"]
+    }
+}</code></pre>
+        </div>
+        <p>
+            The <code>$event</code> placeholder gives the LLM full context of the interaction.
+        </p>
+
+        <h3 id="events-lifecycle">The Interaction Lifecycle</h3>
+        <div class="feature-grid" style="margin: 2rem 0;">
+            <div class="feature-card">
+                <h4 class="feature-title">🤖 LLM-Driven Flow</h4>
+                <ol style="margin-top: 1rem; font-size: 0.9em; line-height: 1.6;">
+                    <li><strong>LLM</strong> generates UI structure as JSON</li>
+                    <li><strong>Server</strong> serves the JSON to the client</li>
+                    <li><strong>Client</strong> renders cDOM and activates reactivity</li>
+                    <li><strong>User</strong> interacts (e.g., clicks a button)</li>
+                    <li><strong>Client</strong> sends interaction data to server</li>
+                    <li><strong>Server</strong> relays event to LLM</li>
+                    <li><strong>LLM</strong> sends UI patch back</li>
+                    <li><strong>Client</strong> merges update, UI refreshes</li>
+                </ol>
+            </div>
+            <div class="feature-card">
+                <h4 class="feature-title">🏠 Standalone Flow</h4>
+                <ol style="margin-top: 1rem; font-size: 0.9em; line-height: 1.6;">
+                    <li><strong>cDOM</strong> defined in source code</li>
+                    <li><strong>Client</strong> activates UI on page load</li>
+                    <li><strong>User</strong> interacts (e.g., toggles a switch)</li>
+                    <li><strong>State</strong> updates immediately</li>
+                    <li><strong>UI</strong> recalculates reactively (0 latency)</li>
+                    <li><strong>Server</strong> only for persistence/APIs</li>
+                </ol>
+            </div>
+        </div>
+
+        <!-- ===== JAVASCRIPT API ===== -->
+        <h2 id="js-api">JavaScript API</h2>
+        <p>Interact with cDOM programmatically using the <code>LightviewCDOM</code> global object.</p>
+
+        <h3 id="api-activate">activate(root)</h3>
+        <p>
+            Scans the DOM from <code>root</code> (defaults to <code>document.body</code>) and
+            initializes all cDOM directives.
+        </p>
+        <div class="code-block">
+            <pre><code>LightviewCDOM.activate();
+LightviewCDOM.activate(document.getElementById('myApp'));</code></pre>
+        </div>
+
+        <h3 id="api-hydrate">hydrate(object)</h3>
+        <p>
+            Converts <code>$</code>-prefixed strings into reactive computed signals.
+        </p>
+        <div class="code-block">
+            <pre><code>const config = { title: "Dashboard", total: "$/cart/items...price" };
+const liveConfig = LightviewCDOM.hydrate(config);</code></pre>
+        </div>
+
+        <h3 id="api-parseJPRX">parseJPRX(string)</h3>
+        <p>
+            Parses cDOM's concise syntax (unquoted keys, JPRX expressions) into a JavaScript object.
+        </p>
+        <div class="code-block">
+            <pre><code>const obj = LightviewCDOM.parseJPRX(`{ div: { children: [$/name] } }`);</code></pre>
+        </div>
+
+        <h3 id="api-registerHelper">registerHelper(name, fn, options?)</h3>
+        <p>
+            Registers a custom helper function for use in JPRX expressions.
+        </p>
+        <div class="code-block">
+            <pre><code>LightviewCDOM.registerHelper('double', (x) => x * 2);
+// Now usable: $double($/count)</code></pre>
+        </div>
+
+        <!-- ===== JPRX HELPERS ===== -->
+        <h2 id="helpers">JPRX Helper Functions</h2>
+        <p>
+            cDOM includes a rich set of built-in helpers for common transformations.
+            For security, only registered helpers are available — no access to <code>globalThis</code>.
+        </p>
+
+        <h3 id="helpers-math">Math</h3>
+        <p>Basic arithmetic operations.</p>
+        <div class="code-block">
+            <pre><code>+, add, -, sub, *, mul, /, div, round, ceil, floor, abs, mod, pow, sqrt</code></pre>
+        </div>
+
+        <h3 id="helpers-stats">Stats</h3>
+        <p>Aggregate calculations.</p>
+        <div class="code-block">
+            <pre><code>sum, avg, min, max, median, stdev, var</code></pre>
+        </div>
+
+        <h3 id="helpers-string">String</h3>
+        <p>Text manipulation.</p>
+        <div class="code-block">
+            <pre><code>upper, lower, trim, capitalize, titleCase, contains, startsWith, endsWith, replace, split, len, join, concat, default</code></pre>
+        </div>
+
+        <h3 id="helpers-array">Array</h3>
+        <p>Collection processing.</p>
+        <div class="code-block">
+            <pre><code>count, map, filter, find, unique, sort, reverse, first, last, slice, flatten, join, len, length</code></pre>
+        </div>
+
+        <h3 id="helpers-logic">Logic & Comparison</h3>
+        <p>Boolean logic and comparisons.</p>
+
+        <h4 class="text-xs font-bold opacity-60 uppercase mb-2">Named Operators</h4>
+        <div class="code-block mb-4">
+            <pre><code>if, and, or, not, eq, neq, gt, lt, gte, lte, between, in</code></pre>
+        </div>
+
+        <h4 class="text-xs font-bold opacity-60 uppercase mb-2">Aliases</h4>
+        <div class="code-block mb-4">
+            <pre><code>&&, ||, !, ==, ===, !=, >, <, >=, <=</code></pre>
+        </div>
+
+        <p class="text-sm italic opacity-80" style="margin-top: 1rem;">
+            Example: <code>$if(gt($/count, 10), 'Large', 'Small')</code>
+        </p>
+
+        <h3 id="helpers-conditional">Conditional Aggregates</h3>
+        <p>Statistical functions with predicates.</p>
+        <div class="code-block">
+            <pre><code>sumIf, countIf, avgIf</code></pre>
+        </div>
+
+        <h3 id="helpers-formatting">Formatting</h3>
+        <p>Display formatting.</p>
+        <div class="code-block">
+            <pre><code>number, currency, percent, thousands</code></pre>
+        </div>
+        <p class="text-xs italic opacity-70" style="margin-top: 0.5rem;">
+            <strong>Explosion Operator:</strong> In JPRX, <code>...</code> is placed at the end of a path
+            (e.g., <code>$/items...price</code>) to expand arrays into arguments.
+        </p>
+
+        <h3 id="helpers-datetime">DateTime</h3>
+        <p>Date operations.</p>
+        <div class="code-block">
+            <pre><code>now, today, date, formatDate, year, month, day, weekday, addDays, dateDiff</code></pre>
+        </div>
+
+        <h3 id="helpers-lookup">Lookup</h3>
+        <p>Data retrieval from indexed structures.</p>
+        <div class="code-block">
+            <pre><code>lookup, vlookup, index, match</code></pre>
+        </div>
+
+        <h3 id="helpers-mutation">State Mutation</h3>
+        <p>Modify reactive state from event handlers.</p>
+        <div class="code-block">
+            <pre><code>set, increment (++), decrement (--), toggle (!!), push, pop, assign, clear</code></pre>
+        </div>
+
+        <h3 id="helpers-network">Network</h3>
+        <p>HTTP requests.</p>
+        <div class="code-block">
+            <pre><code>fetch(url, options?)</code></pre>
+        </div>
+        <p>
+            The <code>fetch</code> helper auto-serializes object bodies to JSON and sets
+            <code>Content-Type: application/json</code>.
+        </p>
+
+    </main>
+</div>