lightview 2.2.2 → 2.3.4

package/docs/cdom.html

@@ -53,7 +53,7 @@
 
 <script>
     globalThis.switchCDOMTab = (tabId) => {
-        const tabs = ['jprx', 'jprxc', 'operators'];
+        const tabs = ['jprx', 'jprxc', 'operators', 'embedded'];
         tabs.forEach(t => {
             const btn = document.getElementById(`tab-btn-${t}`);
             const pane = document.getElementById(`pane-${t}`);
@@ -77,6 +77,22 @@
             A declarative, expression-based way to build reactive UIs.
         </p>
 
+        <div class="experimental-notice"
+            style="margin: 1.5rem 0; padding: 1.25rem; border-radius: var(--site-radius); background: var(--site-accent-light); border: 1px solid var(--site-warning); color: var(--site-text);">
+            <div style="display: flex; gap: 0.75rem; align-items: flex-start;">
+                <span style="font-size: 1.5rem;">⚠️</span>
+                <div>
+                    <strong style="display: block; margin-bottom: 0.25rem; font-size: 1.1rem;">Experimental
+                        Feature</strong>
+                    <p style="margin: 0; font-size: 0.95rem; opacity: 0.9;">
+                        cDOM and JPRX are currently in an <strong>experimental</strong> phase. The expression syntax,
+                        helper functions, and integration patterns are subject to change as we continue to evolve the
+                        library. Use with caution in production environments.
+                    </p>
+                </div>
+            </div>
+        </div>
+
         <!-- ===== OVERVIEW ===== -->
         <h2 id="overview">Overview</h2>
         <p>
@@ -92,44 +108,57 @@
         <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>.
+            with reactivity, relative paths, and helper functions. It also provides deep integration with
+            <a href="https://json-schema.org/" target="_blank">JSON Schema</a> (Standard Draft 7+) for
+            industrial-strength data validation and automatic type coercion.
         </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 id="simple-counter-demo">
+            <pre><script>
+                examplify(document.currentScript.nextElementSibling, {
+                    at: document.currentScript.parentElement,
+                    scripts: ['/lightview.js', '/lightview-x.js', '/lightview-cdom.js'],
+                    type: 'module',
+                    height: '200px',
+                    autoRun: true,
+                    controls: false
+                });
+            </script><code>await import('/lightview-cdom.js');
+const { parseJPRX, hydrate } = globalThis.LightviewCDOM;
+const { $ } = Lightview;
+
+const cdom = `{
     div: {
-        "cdom-state": { count: 0 },
+        onmount: =state({ count: 0 }, { name: 'local', schema: 'auto', scope: $this }),
         children: [
             { h2: "Counter" },
-            { p: ["Count: ", $/count] },
-            { button: { onclick: $increment(/count), children: ["+"] } },
-            { button: { onclick: $decrement(/count), children: ["-"] } }
+            { p: ["Count: ", =/local/count] },
+            { button: { onclick: =++/local/count, children: ["+"] } },
+            { button: { onclick: =--/local/count, children: ["-"] } }
         ]
     }
-}</code></pre>
+}`;
+
+$('#example').content(hydrate(parseJPRX(cdom)));</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>
+            <li><code>onmount</code> — A Lightview lifecycle hook where we initialize state.</li>
+            <li><code>=state(...)</code> — An initializer that creates local reactive state.</li>
+            <li><code>scope: $this</code> — Explicitly attaches the state to the current element.</li>
+            <li><code>=/local/count</code> — A path that reactively displays the count value.</li>
         </ul>
         <p>
             The UI automatically updates whenever <code>count</code> changes — no manual DOM manipulation required.
         </p>
+        <p>
+            The UI automatically updates whenever <code>count</code> changes — no manual DOM manipulation required.
+        </p>
 
         <!-- ===== ADVANTAGES ===== -->
         <h2 id="advantages">Advantages</h2>
@@ -162,7 +191,7 @@
 
         <h3 id="JPRX-delimiters">Delimiters</h3>
         <p>
-            JPRX expressions begin with a <code>$</code> delimiter:
+            JPRX expressions begin with a <code>=</code> delimiter:
         </p>
         <table class="api-table">
             <thead>
@@ -174,20 +203,40 @@
             </thead>
             <tbody>
                 <tr>
-                    <td><code>$/</code></td>
+                    <td><code>=/</code></td>
                     <td>Access a path in the global registry</td>
-                    <td><code>$/users/0/name</code></td>
+                    <td><code>=/users/0/name</code></td>
                 </tr>
                 <tr>
-                    <td><code>$function(</code></td>
+                    <td><code>=function(</code></td>
                     <td>Call a helper function</td>
-                    <td><code>$sum(/items...price)</code></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.
+            Once inside a JPRX expression, paths follow <strong>JSON Pointer</strong> syntax. The <code>=</code>
+            is only needed at the start of the expression for paths or function names.
+        </p>
+
+        <h3 id="JPRX-escaping">Escaping the <code>=</code> Delimiter</h3>
+        <p>
+            When using <strong>oDOM</strong> or <strong>vDOM</strong> (Object DOM), any string value starting with
+            <code>=</code> is interpreted as a JPRX expression. If you need a literal string that begins with
+            an equals sign (e.g., a mathematical equation or status message), you can escape it by prefixing
+            with a single quote:
+        </p>
+        <div class="code-block" style="margin-bottom: 1rem;">
+            <pre><code>// Interpreted as JPRX expression:
+{ "p": "=/user/name" }  // Resolves the path /user/name
+
+// Escaped to produce a literal string:
+{ "p": "'=E=mc²" }      // Renders as "=E=mc²"
+{ "p": "'=42" }         // Renders as "=42"</code></pre>
+        </div>
+        <p>
+            The single-quote escape (<code>'=</code>) at the start of a string tells the parser to treat
+            the rest of the string (including the <code>=</code>) as literal content.
         </p>
 
         <h3 id="JPRX-anatomy">Anatomy of a Path</h3>
@@ -236,7 +285,7 @@
             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>
+            <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>
@@ -244,7 +293,7 @@
             <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>
+            <li><strong>=currency(...)</strong>: Format as currency string</li>
         </ul>
 
         <h3 id="JPRX-placeholders">Placeholders</h3>
@@ -260,12 +309,12 @@
                 <tr>
                     <td><code>_</code></td>
                     <td>Current item during iteration</td>
-                    <td><code>$map(/items, _/name)</code></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>
+                    <td><code>=set(=/selected, $event/target/value)</code></td>
                 </tr>
             </tbody>
         </table>
@@ -298,12 +347,12 @@
                 <tr>
                     <td><strong>Formulas</strong></td>
                     <td><code>=SUM(A1:A10)</code></td>
-                    <td><code>$sum(/items...price)</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>
+                    <td>JSON Pointer paths (./name, =/global)</td>
                 </tr>
                 <tr>
                     <td><strong>Recalculation</strong></td>
@@ -317,79 +366,204 @@
         <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:
+            in any of Lightview's hypermedia formats just by loading <code>lightview-cdom.js</code>:
         </p>
-
         <h3>vDOM (Virtual DOM)</h3>
-        <p>JPRX expressions work directly in vDOM arrays:</p>
+        <p>JPRX expressions work directly in vDOM arrays or objects:</p>
         <div class="code-block">
-            <pre><code>["div", { class: "counter" },
-    ["p", "Count: ", "$/count"],
-    ["button", { onclick: "$increment(/count)" }, "+"]
-]</code></pre>
+            <pre><code>// vDOM formal object
+{
+    tag: "div",
+    attributes: { class: "counter" },
+    children: [
+        { tag: "p", children: ["Count: ", "=/local/count"] },
+        { tag: "button", attributes: { onclick: "=++/local/count }, children: ["+"] }
+    ]
+}</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: ["+"] }
-    ]
+    div: {
+        class: "counter",
+        children: [
+            { p: { children: ["Count: ", "=/local/count] } },
+            { button: { onclick: =++/local/count, children: ["+"] } }
+        ]
+    }
 }</code></pre>
         </div>
 
-        <h3>cDOM Shorthand</h3>
-        <p>cDOM's concise shorthand syntax:</p>
+        <h3>cDOM Shorthand with JPRX</h3>
+        <p>cDOM's concise shorthand syntax. Note that cDOM does not require quoting attribute names or JPRX
+            expressions like vDOM and oDOM do and you can include comments:</p>
         <div class="code-block">
             <pre><code>{
     div: {
         class: "counter",
+        // This is a JPRX comment
         children: [
-            { p: ["Count: ", $/count] },
-            { button: { onclick: "$increment(/count)", children: ["+"] } }
+            { p: ["Count: ", =/local/count] },
+            { button: { onclick: =++/local/count, children: ["+"] } }
         ]
     }
 }</code></pre>
         </div>
 
-        <!-- ===== DIRECTIVES ===== -->
-        <h2 id="directives">Directives</h2>
+        <!-- ===== DOM PATCHES ===== -->
+        <h2 id="dom-patches">DOM Patches & Decentralized Layouts</h2>
         <p>
-            cDOM provides custom attributes (directives) to bridge static HTML and reactive state.
+            cDOM supports <strong>Decentralized Layouts</strong>, allowing components to "move themselves" to their
+            rightful
+            home in the DOM upon being created. This is especially powerful for LLM-driven streaming UIs.
         </p>
 
-        <h3 id="cdom-state">cdom-state</h3>
+        <h3 id="helpers-move">=move(target, location?)</h3>
         <p>
-            Defines local reactive state on an element. Children can access this state using relative paths.
+            The <code>=move</code> helper (typically used in <code>onmount</code>) teleports the host element to a
+            different part of the document.
         </p>
         <div class="code-block">
+            <pre><code>{
+    div: {
+        id: "weather-widget",
+        onmount: =move('#sidebar', 'afterbegin'),
+        content: "Sunny, 75°F"
+    }
+}</code></pre>
+        </div>
+
+        <h4>Identity & Patching</h4>
+        <p>
+            If the moving element has a unique <code>id</code> and an element with that same ID already exists at the
+            destination,
+            the existing element is <strong>replaced</strong>. This turns <code>=move</code> into an idempotent
+            <strong>patch</strong>
+            command — simply stream the new version of the component with the same ID, and it will update the UI
+            automatically.
+        </p>
+
+        <h4>Placement Locations</h4>
+        <table class="api-table">
+            <thead>
+                <tr>
+                    <th>Location</th>
+                    <th>Result</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><code>inner</code> / <code>shadow</code></td>
+                    <td>Replaces all children of the target.</td>
+                </tr>
+                <tr>
+                    <td><code>afterbegin</code> / <code>prepend</code></td>
+                    <td>Inserts at the start of the target.</td>
+                </tr>
+                <tr>
+                    <td><code>beforeend</code> / <code>append</code></td>
+                    <td>Inserts at the end of the target (default).</td>
+                </tr>
+                <tr>
+                    <td><code>outer</code> / <code>replace</code></td>
+                    <td>Replaces the target node itself.</td>
+                </tr>
+                <tr>
+                    <td><code>beforebegin</code> / <code>afterend</code></td>
+                    <td>Inserts before or after the target node.</td>
+                </tr>
+            </tbody>
+        </table>
+
+
+        <h2 id="state-binding">State & Binding</h2>
+        <p>
+            cDOM does not use attribute directives for state it uses lifecycle events and helpers instead.
+        </p>
+
+        <h3 id="lifecycle-state">Lifecycle State</h3>
+        <p>
+            In Lightview, you initialize state within the <code>onmount</code> hook. The <code>=state</code> and
+            <code>=signal</code> helpers accept an options object where you can specify a <code>scope</code>,
+            as well as <code>schema</code> requirements.
+        </p>
+
+        <h4>Using a Registered Schema</h4>
+        <div class="code-block" style="margin-bottom: 1rem;">
+            <pre><code>// 1. Register centrally in JS
+Lightview.registerSchema('User', { name: 'string', age: 'number' });
+
+// 2. Use in cDOM
+{ "onmount": "=state({}, { name: 'profile', schema: 'User', scope: $this })" }</code></pre>
+        </div>
+
+        <h4>Standard Schema Behaviors</h4>
+        <p>
+            When using the <code>schema</code> option, you can use these standard behaviors:
+        </p>
+        <ul style="margin-bottom: 2rem;">
+            <li><strong>"auto"</strong>: Infers a fixed schema from the initial value. Strict type checking (throws on
+                mismatch).</li>
+            <li><strong>"dynamic"</strong>: Like auto, but allows adding new properties to the state object.</li>
+            <li><strong>"polymorphic"</strong>: The most powerful setting. It includes <strong>"dynamic"</strong>
+                behavior and automatically <strong>coerces</strong> values to match the inferred type (e.g., "50" ->
+                50).
+            </li>
+        </ul>
+
+        <h4>Example: Polymorphic Coercion</h4>
+        <div class="code-block" style="margin-bottom: 2rem;">
             <pre><code>{ 
     div: { 
-        "cdom-state": { count: 0, name: "Guest" }, 
+        "onmount": "=state({ count: 0 }, { 
+            name: 'local', 
+            schema: 'polymorphic',
+            scope: $this 
+        })", 
         children: [
-            { p: ["Hello, ", $/name] },
-            { p: ["Count: ", $/count] }
+            { p: ["Typing '10' into a bind will save it as the number 10."] }
         ]
     }
 }</code></pre>
         </div>
+        <p>
+            By scoping the state to the element, you can create multiple independent instances of components.
+            Lightview uses a high-performance <strong>up-tree search</strong> to resolve these names.
+        </p>
 
-        <h3 id="cdom-bind">cdom-bind</h3>
+        <h3 id="bind-helper">Two-Way Binding ($bind)</h3>
         <p>
-            Creates two-way data binding between an input and a reactive path.
+            Two-way data binding is achieved via the <code>=bind(path)</code> helper.
         </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>
+            <pre><code>{ input: { type: "text", value: "=bind(/profile/name)", placeholder: "Enter name" } }
+{ input: { type: "checkbox", checked: "=bind(/settings/enabled)" } }</code></pre>
         </div>
+
+        <h4 id="binding-transformations">Handling Transformations</h4>
         <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.
+            Because <code>=bind</code> is strict (it only accepts direct paths), you cannot pass a computation
+            like <code>=bind(upper(/name))</code>. To transform data during binding, you have two choices:
         </p>
+        <ul>
+            <li>
+                <strong>Manual Transformation:</strong> Use an <code>oninput</code> handler:
+                <code>{ oninput: "=set(/name, upper($event/target/value))" }</code>
+            </li>
+            <li>
+                <strong>Schema Transformation:</strong> Define a <code>transform</code> in your schema:
+                <div class="code-block" style="margin-top: 0.5rem;">
+                    <pre><code>Lightview.registerSchema('Profile', { 
+    name: { type: 'string', transform: 'upper' } 
+});</code></pre>
+                </div>
+                The state manager will automatically apply the <a
+                    href="/docs/api/state.html#transformations">transformation</a>
+                during the write-back phase of <code>=bind</code>.
+            </li>
+        </ul>
 
         <!-- ===== SHOPPING CART EXAMPLE ===== -->
         <h2 id="shopping-cart">Shopping Cart Example</h2>
@@ -401,7 +575,7 @@
                     at: document.currentScript.parentElement,
                     scripts: ['/lightview.js', '/lightview-x.js', '/lightview-cdom.js'],
                     type: 'module',
-                    height: '350px',
+                    height: '250px',
                     autoRun: true
                 });
             </script><code contenteditable="true">// Shopping Cart: Demonstrating $map and $currency helpers
@@ -411,22 +585,22 @@ const { $ } = Lightview;
 
 const cdomString = `{ 
     div: {
-        "cdom-state": {
+        "onmount": "=state({
             cart: {
                 items: [
-                    { name: "Apple", price: 1.00 },
-                    { name: "Orange", price: 2.00 }
+                    { name: 'Apple', price: 1.00 },
+                    { name: 'Orange', price: 2.00 }
                 ]
             }
-        },
+        }, 'store')",
         children: [
             { h3: "Shopping Cart" },
             { ul: { 
-                children: $map(/cart/items, { li: { children: [_/name, " - ", $currency(_/price)] } })
+                children: =map(/store/cart/items, { li: { children: [_/name, " - ", =currency(_/price)] } })
             }},
             { p: { 
                 style: "font-weight: bold; margin-top: 1rem;",
-                children: ["Total: ", $currency(sum(/cart/items...price))]
+                children: ["Total: ", =currency(sum(/store/cart/items...price))]
             }}
         ]
     }
@@ -434,8 +608,7 @@ const cdomString = `{
 
 const hydrated = hydrate(parseJPRX(cdomString));
 $('#example').content(hydrated);
-globalThis.LightviewCDOM.activate(hydrated.domEl);
-</code></pre>
+</code></pre></code></pre>
         </div>
 
         <!-- ===== INTERACTIVE EXAMPLE ===== -->
@@ -450,6 +623,8 @@ globalThis.LightviewCDOM.activate(hydrated.domEl);
                 (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>
+            <button id="tab-btn-embedded" class="syntax-tab" onclick="switchCDOMTab('embedded')">Embedded
+                Signals</button>
         </div>
 
         <!-- JPRX Pane -->
@@ -473,10 +648,10 @@ const cdomString = `{
     "div": {
         "children": [
             { "h3": ["Standard JPRX Counter"] },
-            { "p": { "children": ["Count: ", "$/count"] }},
+            { "p": { "children": ["Count: ", "=/count"] }},
             { "div": { "children": [
-                { "button": { "onclick": "$decrement(/count)", "children": ["-"] } },
-                { "button": { "onclick": "$increment(/count)", "children": ["+"] } }
+                { "button": { "onclick": "=decrement(/count)", "children": ["-"] } },
+                { "button": { "onclick": "=increment(/count)", "children": ["+"] } }
             ]}}
         ]
     }
@@ -508,10 +683,10 @@ const cdomString = `{
     div: {
         children: [
             { h3: ["Concise Counter"] },
-            { p: { children: ["Count: ", $/count] }},
+            { p: { children: ["Count: ", =/count] }},
             { div: { children: [
-                { button: { onclick: $decrement(/count), children: ["-"] } },
-                { button: { onclick: $increment(/count), children: ["+"] } }
+                { button: { onclick: =decrement(/count), children: ["-"] } },
+                { button: { onclick: =increment(/count), children: ["+"] } }
             ]}}
         ]
     }
@@ -532,7 +707,7 @@ globalThis.LightviewCDOM.activate(hydrated.domEl);
                     type: 'module',
                     height: '250px'
                 });
-            </script><code contenteditable="true">// Operators: Using $++/path and $--/path
+            </script><code contenteditable="true">// Operators: Using =++/path and =--/path
 await import('/lightview-cdom.js');
 const { parseJPRX, hydrate } = globalThis.LightviewCDOM;
 const { signal, $ } = Lightview;
@@ -543,11 +718,11 @@ const cdomString = `{
     div: {
         children: [
             { h3: ["Operator Counter"] },
-            { p: { children: ["Count: ", $/count] }},
+            { p: { children: ["Count: ", =/count] }},
             { div: { children: [
-                // Prefix operators: $-- and $++
-                { button: { onclick: $--/count, children: ["-"] } },
-                { button: { onclick: $++/count, children: ["+"] } }
+                // Prefix operators: =-- and =++
+                { button: { onclick: =--/count, children: ["-"] } },
+                { button: { onclick: =++/count, children: ["+"] } }
             ]}}
         ]
     }
@@ -559,10 +734,44 @@ globalThis.LightviewCDOM.activate(hydrated.domEl);
 </code></pre>
         </div>
 
+        <!-- Embedded Pane -->
+        <div id="pane-embedded" 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">// Embedded Signals: Using onmount to initialize local state
+await import('/lightview-cdom.js');
+const { parseJPRX, hydrate } = globalThis.LightviewCDOM;
+const { $ } = Lightview;
+
+const cdomString = `{
+    div: {
+        // Initialize a named signal explicitly scoped to '$this' element.
+        onmount: =signal(0, { name: 'count', scope: $this }),
+        children: [
+            { h3: ["Embedded Counter"] },
+            { p: ["Count: ", =/count] },
+            { div: { children: [
+                { button: { onclick: =--/count, children: ["-"] } },
+                { button: { onclick: =++/count, children: ["+"] } }
+            ]}}
+        ]
+    }
+}`;
+
+const hydrated = hydrate(parseJPRX(cdomString));
+$('#example').content(hydrated);
+</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
+            JPRX 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>
@@ -578,18 +787,18 @@ globalThis.LightviewCDOM.activate(hydrated.domEl);
             </thead>
             <tbody>
                 <tr>
-                    <td><code>$increment(/count)</code></td>
-                    <td><code>$++/count</code> or <code>$/count++</code></td>
+                    <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><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><code>=toggle(/enabled)</code></td>
+                    <td><code>=!!/enabled</code></td>
                     <td>Toggle boolean (prefix only)</td>
                 </tr>
             </tbody>
@@ -608,24 +817,31 @@ globalThis.LightviewCDOM.activate(hydrated.domEl);
             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>
+            <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:
+            LLMs can generate event handlers to register interest in user actions or trigger UI updates:
         </p>
         <div class="code-block">
-            <pre><code>{ 
-    button: {
-        onclick: $fetch('/api/notify', { method: 'POST', body: $event }),
-        children: ["Notify LLM"]
-    }
-}</code></pre>
+            <pre><code>// 1. Notify LLM of an event
+{ button: { onclick: =fetch('/api/notify', { method: 'POST', body: $event }), children: ["Notify"] } }
+
+// 2. Request a UI Patch from LLM
+{ button: { onclick: =mount('/api/update', { method: 'POST', body: $event }), children: ["Update UI"] } }</code></pre>
         </div>
         <p>
-            The <code>$event</code> placeholder gives the LLM full context of the interaction.
+            The <code>$event</code> placeholder gives the LLM full context of the interaction. When using
+            <code>=mount</code>, the server should respond with cDOM, vDOM, or oDOM content (see the
+            <a href="#helpers-network">Network section</a> for more details).
+        </p>
+        <p>
+            By default, <code>=mount</code> will <strong>append</strong> the response to the <code>body</code> and
+            then let it "rip itself out" and <strong>teleport</strong> to its final destination if the response
+            contains a <code>=move</code> helper. This "Safe Landing" strategy ensures decentralized layouts
+            work seamlessly without the patcher needing to know the exact destination.
         </p>
 
         <h3 id="events-lifecycle">The Interaction Lifecycle</h3>
@@ -675,7 +891,7 @@ LightviewCDOM.activate(document.getElementById('myApp'));</code></pre>
             Converts <code>$</code>-prefixed strings into reactive computed signals.
         </p>
         <div class="code-block">
-            <pre><code>const config = { title: "Dashboard", total: "$/cart/items...price" };
+            <pre><code>const config = { title: "Dashboard", total: "=/cart/items...price" };
 const liveConfig = LightviewCDOM.hydrate(config);</code></pre>
         </div>
 
@@ -684,7 +900,18 @@ const liveConfig = LightviewCDOM.hydrate(config);</code></pre>
             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>
+            <pre><code>const obj = LightviewCDOM.parseJPRX(`{ div: { children: [=/name] } }`);</code></pre>
+        </div>
+
+        <h3 id="api-registerSchema">registerSchema(name, definition)</h3>
+        <p>
+            Registers a reusable schema for state validation and initialization. Supported behaviors include
+            <code>"auto"</code> (strict/fixed), <code>"dynamic"</code> (strict/expandable), and
+            <code>"polymorphic"</code> (coerce/expandable).
+        </p>
+        <div class="code-block">
+            <pre><code>Lightview.registerSchema('User', { name: 'string', age: 'number' });
+// Usable in JPRX: =state({}, { name: 'profile', schema: 'User' })</code></pre>
         </div>
 
         <h3 id="api-registerHelper">registerHelper(name, fn, options?)</h3>
@@ -693,7 +920,7 @@ const liveConfig = LightviewCDOM.hydrate(config);</code></pre>
         </p>
         <div class="code-block">
             <pre><code>LightviewCDOM.registerHelper('double', (x) => x * 2);
-// Now usable: $double($/count)</code></pre>
+// Now usable: =double(/count)</code></pre>
         </div>
 
         <!-- ===== JPRX HELPERS ===== -->
@@ -741,7 +968,7 @@ const liveConfig = LightviewCDOM.hydrate(config);</code></pre>
         </div>
 
         <p class="text-sm italic opacity-80" style="margin-top: 1rem;">
-            Example: <code>$if(gt($/count, 10), 'Large', 'Small')</code>
+            Example: <code>=if(gt(=/count, 10), 'Large', 'Small')</code>
         </p>
 
         <h3 id="helpers-conditional">Conditional Aggregates</h3>
@@ -757,7 +984,7 @@ const liveConfig = LightviewCDOM.hydrate(config);</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.
+            (e.g., <code>=/items...price</code>) to expand arrays into arguments.
         </p>
 
         <h3 id="helpers-datetime">DateTime</h3>
@@ -772,21 +999,63 @@ const liveConfig = LightviewCDOM.hydrate(config);</code></pre>
             <pre><code>lookup, vlookup, index, match</code></pre>
         </div>
 
-        <h3 id="helpers-mutation">State Mutation</h3>
-        <p>Modify reactive state from event handlers.</p>
+        <h3 id="helpers-mutation">State & Lifecycle</h3>
+        <p>Initialize and modify reactive state.</p>
         <div class="code-block">
-            <pre><code>set, increment (++), decrement (--), toggle (!!), push, pop, assign, clear</code></pre>
+            <pre><code>state, signal, bind, 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>
+            <pre><code>fetch(url, options?)
+<span id="helpers-mount"></span>mount(url, options?)</span></code></pre>
         </div>
-        <p>
-            The <code>fetch</code> helper auto-serializes object bodies to JSON and sets
-            <code>Content-Type: application/json</code>.
+        <table class="api-table">
+            <thead>
+                <tr>
+                    <th>Option</th>
+                    <th>Default</th>
+                    <th>Description</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><code>method</code></td>
+                    <td><code>"GET"</code></td>
+                    <td>HTTP method (GET, POST, etc.)</td>
+                </tr>
+                <tr>
+                    <td><code>body</code></td>
+                    <td><code>undefined</code></td>
+                    <td>Request body. If an <strong>object</strong>, it is automatically stringified to JSON and the
+                        <code>Content-Type</code> is set to <code>application/json</code>.
+                    </td>
+                </tr>
+                <tr>
+                    <td><code>headers</code></td>
+                    <td><code>{}</code></td>
+                    <td>Additional HTTP headers.</td>
+                </tr>
+                <tr>
+                    <td><code>target</code></td>
+                    <td><code>"body"</code></td>
+                    <td>(<code>mount</code> only) CSS selector for destination.</td>
+                </tr>
+                <tr>
+                    <td><code>location</code></td>
+                    <td><code>"beforeend"</code></td>
+                    <td>(<code>mount</code> only) Placement relative to target.</td>
+                </tr>
+            </tbody>
+        </table>
+        <p style="margin-top: 1rem;">
+            The <code>mount</code> helper is the primary mechanism for **Hypermedia updates**. It fetches content
+            (cDOM, vDOM, or oDOM) and injects it into the DOM. If the content contains a <code>=move</code>
+            helper, it will automatically relocate itself upon mounting.
         </p>
 
+
+
     </main>
-</div>
+</div>