lightview 2.4.7 → 2.5.0

package/AI-GUIDANCE.md

@@ -151,9 +151,11 @@ Lightview X allows embedded `${}` expressions in attributes for simple reactivit
 
 **cDOM (Computed DOM)** and **JPRX (JSON Reactive Expressions)** allow you to build fully reactive UIs using **only JSON**.
 
-### Syntax Prefixes
-*   **`=` (JPRX)**: Navigates **reactive state** (Signals/States). Starts with `=/` for absolute paths.
-*   **`#` (cDOM XPath)**: Navigates the **DOM tree** during construction. Use `#../../@id` to skip the text node parent and reach an ancestor's attribute.
+### Expression Syntax
+*   **`=(expr)` (JPRX)**: Wraps reactive expressions that navigate **reactive state** (Signals/States). Use `=(/path)` for paths, `=(function(...))` for helpers.
+*   **`#(xpath)` (cDOM XPath)**: Wraps XPath expressions that navigate the **DOM tree** during construction. Use `#(../../@id)` to navigate ancestors and access attributes.
+
+**Note**: For initialization functions like `state()` and `signal()`, use `=function(...)` without the outer wrapper, as they execute once on mount rather than being reactive expressions.
 
 ### Name Resolution & Scoping
 JPRX uses an **up-tree search** to find signals or states:
@@ -178,7 +180,7 @@ Use `{ scope: $this }` in `=state` or `=signal` to register data specifically at
 | **Stats** | `sum`, `avg`, `min`, `max`, `median`, `stdev`, `variance` |
 | **Data** | `lookup(val, searchArr, resultArr)` (VLOOKUP-style) |
 | **State** | `state(val, opts)`, `set(path, val)`, `bind(path)`, `increment`, `decrement`, `toggle` |
-| **DOM** | `#path` (XPath Navigation), `move(target, loc)` |
+| **DOM** | `#(path)` (XPath Navigation), `move(target, loc)` |
 | **Net** | `fetchHelper(url, opts)`, `mount(url, opts)` |
 
 ### The "Decentralized Layout" Pattern (AI Strategy)
@@ -192,7 +194,7 @@ Use `{ scope: $this }` in `=state` or `=signal` to register data specifically at
   div: {
     id: "widget-1",
     onmount: ["=state({val:0}, {name:'w1', scope:$this})", "=move('#sidebar')"],
-    children: [ { p: "Val: =/w1/val" } ]
+    children: [ { p: ["Val: ", =(/w1/val)] } ]
   }
 }
 ```

package/README.md

@@ -43,17 +43,17 @@ Traditional UI development requires AI agents to generate imperative JavaScript
 
 ```json
 {
-  "state": { "count": 0 },
   "div": {
+    "onmount": "=state({ count: 0 }, 'counter')",
     "children": [
-      { "p": "{$count}" },
-      { "button": { "onclick": "{set('count', add(count, 1))}", "children": ["Increment"] } }
+      { "p": ["Count: ", "=(/counter/count)"] },
+      { "button": { "onclick": "=(++/counter/count)", "children": ["Increment"] } }
     ]
   }
 }
 ```
 
-This JSON is **the entire application**. The `{...}` expressions are JPRX—a sandboxed, spreadsheet-like formula language (inspired by **XPath** and **JSON Pointers**) that resolves paths, calls registered helpers, and triggers reactivity automatically.
+This JSON is **the entire application**. The `=()` expressions are JPRX—a sandboxed, spreadsheet-like formula language (inspired by **XPath** and **JSON Pointers**) that resolves paths, calls registered helpers, and triggers reactivity automatically.
 
 ### Learn More
 

package/docs/cdom-xpath.html

@@ -69,9 +69,9 @@ const cdom = `{
             { h3: "User Profile" },
             { button: { 
                 id: "7", 
-                // XPath #@id gets "7" from this button's id
-                // XPath #../@id gets "profile-container" from the parent div
-                children: ["Button ", #@id, " in section ", #../@id] 
+                // XPath #(@id) gets "7" from this button's id
+                // XPath #(../@id) gets "profile-container" from the parent div
+                children: ["Button ", #(@id), " in section ", #(../@id)] 
             }}
         ]
     }
@@ -116,17 +116,35 @@ $('#example').content(hydrate(parseJPRX(cdom)));</code></pre>
             <strong>Forbidden:</strong> <code>child::</code>, <code>descendant::</code>, and <code>following::</code>
             axes are disabled as they could create infinite loops or reference nodes that do not exist yet.
         </p>
+        <div
+            style="margin-top: 1rem; padding: 1rem; background: var(--site-bg-secondary); border-left: 4px solid var(--site-primary); border-radius: var(--site-radius);">
+            <p style="margin: 0; font-size: 0.95rem;">
+                <strong>💡 Need Forward-Looking XPath?</strong> For advanced use cases requiring <code>child::</code>,
+                <code>descendant::</code>, or <code>following::</code> axes, use the reactive <code>=xpath()</code>
+                helper
+                in JPRX instead of static <code>#()</code> in cDOM. The reactive helper evaluates XPath expressions
+                after the DOM is fully constructed and can access any part of the tree. See the
+                <a href="#reactive-xpath">Reactive XPath section</a> below for details.
+            </p>
+        </div>
 
         <h2 id="reactive-xpath">Reactive XPath (<code>=xpath()</code>)</h2>
         <p>
-            If you need an XPath expression to update reactively if attributes elsewhere in the DOM change,
-            use the <code>=xpath()</code> helper within a JPRX expression.
+            If you need an XPath expression to update reactively when attributes elsewhere in the DOM change,
+            or if you need to use <strong>forward-looking axes</strong> (like <code>child::</code>,
+            <code>descendant::</code>,
+            or <code>following::</code>), use the <code>=xpath()</code> helper within a JPRX expression.
+        </p>
+        <p>
+            Unlike static <code>#()</code> expressions which are evaluated once during construction,
+            <code>=xpath()</code> creates a reactive computed signal that re-evaluates whenever its dependencies change,
+            and it has <strong>no axis restrictions</strong> since the DOM is already fully constructed.
         </p>
         <div class="code-block">
             <pre><code>{
     div: {
-        title: "=xpath('../@data-section')",
-        class: "=concat('item ', xpath('../@theme'))"
+        title: "=(xpath('../@data-section'))",
+        class: "=(concat('item ', xpath('../@theme')))"
     }
 }</code></pre>
         </div>
@@ -142,12 +160,12 @@ $('#example').content(hydrate(parseJPRX(cdom)));</code></pre>
 { 
     button: { 
         id: "7", 
-        children: [#../@id] 
+        children: [#(../@id)] 
     } 
 }
 
 // Support for complex paths with predicates
-{ span: [#ancestor::div[@data-role='container']/@title] }</code></pre>
+{ span: [#(ancestor::div[@data-role='container']/@title)] }</code></pre>
         </div>
 
         <h2 id="safety">Security & Safety</h2>

package/docs/cdom.html

@@ -89,6 +89,20 @@
                         helper functions, and integration patterns are subject to change as we continue to evolve the
                         library. Use with caution in production environments.
                     </p>
+                    <p
+                        style="margin: 0.75rem 0 0 0; padding-top: 0.75rem; border-top: 1px solid var(--site-border); font-size: 0.95rem; opacity: 0.9;">
+                        <strong>v2.5.0 Syntax Update:</strong> Starting with Lightview v2.5.0 and JPRX v1.4.0,
+                        expressions use a new wrapper syntax:
+                        <code
+                            style="background: var(--site-bg-secondary); padding: 0.125rem 0.375rem; border-radius: 3px;">=(expr)</code>
+                        for JPRX and
+                        <code
+                            style="background: var(--site-bg-secondary); padding: 0.125rem 0.375rem; border-radius: 3px;">#(xpath)</code>
+                        for XPath.
+                        The legacy prefix-only syntax (e.g., <code
+                            style="background: var(--site-bg-secondary); padding: 0.125rem 0.375rem; border-radius: 3px;">=path</code>)
+                        will be <strong>fully deprecated after March 31, 2026</strong>.
+                    </p>
                 </div>
             </div>
         </div>
@@ -136,10 +150,10 @@ const cdom = `{
         "id": "Counter",
         "onmount": "=state({ count: 0 }, { name: 'local', schema: 'auto', scope: $this })",
         "children": [
-            { "h2": "#../../@id" }, // XPath shorthand: text node -> h2 -> div
-            { "p": ["Count: ", "=/local/count"] },
-            { "button": { "onclick": "=++/local/count", "children": ["+"] } },
-            { "button": { "onclick": "=--/local/count", "children": ["-"] } }
+            { "h2": "#(../../@id)" }, // XPath: text node -> h2 -> div
+            { "p": ["Count: ", "=(/local/count)"] },
+            { "button": { "onclick": "=(++/local/count)", "children": ["+"] } },
+            { "button": { "onclick": "=(--/local/count)", "children": ["-"] } }
         ]
     }
 }`;
@@ -158,10 +172,11 @@ $('#example').content(hydrate(parseJPRX(cdom)));</code></pre>
             <li><code>=/local/count</code> — A path that reactively displays the count value.</li>
         </ul>
         <p style="font-size: 0.95rem; font-style: italic; color: var(--site-text-secondary);">
-            <strong>Note:</strong> In cDOM, <code>#</code> is the prefix for <strong>XPath</strong> expressions that
-            navigate and extract data from the DOM, while <code>=</code> is the prefix for <strong>JPRX</strong>
-            expressions that navigate or apply functions to
-            reactive state.
+            <strong>Note:</strong> In cDOM, expressions use a wrapper syntax for clarity: <code>#(xpath)</code> for
+            <strong>XPath</strong> expressions that
+            navigate and extract data from the DOM, and <code>=(expr)</code> for <strong>JPRX</strong>
+            expressions that navigate or apply functions to reactive state. Legacy syntax without parentheses is still
+            supported.
         </p>
         <p>
             The UI automatically updates whenever <code>count</code> changes — no manual DOM manipulation required. It
@@ -226,9 +241,9 @@ const cdom = `{
             { h3: "User Profile" },
             { button: { 
                 id: "7", 
-                // XPath #../@id gets the "7" from this button's id
-                // XPath #../../@id gets "profile-container" from the g-parent div
-                children: ["Button ", #../@id, " in section ", #../../@id] 
+                // XPath #(../@id) gets the "7" from this button's id
+                // XPath #(../../@id) gets "profile-container" from the g-parent div
+                children: ["Button ", #(../@id), " in section ", #(../../@id)] 
             }}
         ]
     }
@@ -238,7 +253,7 @@ $('#example').content(hydrate(parseJPRX(cdom)));</code></pre>
         </div>
         <p>
             In the example above, the button's text is derived entirely from its own <code>id</code> and its
-            parent's <code>id</code> using <code>#../@id</code> and <code>#../../@id</code>.
+            parent's <code>id</code> using <code>#(../@id)</code> and <code>#(../../@id)</code>.
         </p>
         <p>
             For more details, see the <a href="/docs/cdom-xpath.html">Full XPath Documentation</a>.
@@ -252,54 +267,61 @@ $('#example').content(hydrate(parseJPRX(cdom)));</code></pre>
             with reactivity, relative paths, and helper functions.
         </p>
 
-        <h3 id="JPRX-delimiters">Delimiters</h3>
+        <h3 id="JPRX-delimiters">Expression Syntax</h3>
         <p>
-            JPRX expressions begin with a <code>=</code> delimiter:
+            JPRX expressions use a <strong>wrapper syntax</strong> for unambiguous parsing. The recommended syntax is
+            <code>=(expression)</code>:
         </p>
         <table class="api-table">
             <thead>
                 <tr>
-                    <th>Delimiter</th>
+                    <th>Syntax</th>
                     <th>Purpose</th>
                     <th>Example</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
-                    <td><code>=/</code></td>
+                    <td><code>=(/path)</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>
+                <tr>
+                    <td><code>#(xpath)</code></td>
+                    <td>XPath expression for DOM navigation</td>
+                    <td><code>#(../../@id)</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 for paths or function names.
+            The wrapper syntax <code>=()</code> and <code>#()</code> makes expressions unambiguous and eliminates
+            conflicts with literal strings.
+            Legacy syntax without parentheses (e.g., <code>=/path</code>) is still supported for backward compatibility.
         </p>
 
-        <h3 id="JPRX-escaping">Escaping the <code>=</code> Delimiter</h3>
+        <h3 id="JPRX-literal-strings">Literal Strings</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:
+            With the new wrapper syntax, you no longer need escape sequences. Any string that doesn't match the wrapper
+            pattern
+            is treated as a literal:
         </p>
         <div class="code-block" style="margin-bottom: 1rem;">
-            <pre><code>// Interpreted as JPRX expression:
-{ "p": "=/user/name" }  // Resolves the path /user/name
+            <pre><code>// JPRX expression (wrapped):
+{ "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>
+// Literal strings (no wrapper):
+{ "p": "=E=mc²" }         // Renders as "=E=mc²"
+{ "p": "=42" }            // Renders as "=42"
+{ "p": "#ff0000" }        // Renders as "#ff0000" (hex color)</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.
+            The wrapper syntax eliminates ambiguity: <code>=(expr)</code> is always an expression, while strings without
+            the wrapper pattern are always literals.
         </p>
 
         <h3 id="JPRX-anatomy">Anatomy of a Path</h3>
@@ -723,11 +745,11 @@ const cdomString = `{
         children: [
             { h3: "Shopping Cart" },
             { ul: { 
-                children: =map(/store/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(/store/cart/items...price))]
+                children: ["Total: ", =(currency(sum(/store/cart/items...price)))]
             }}
         ]
     }
@@ -772,10 +794,10 @@ const cdomString = `{
         onmount: "=signal(0, 'count')",
         "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": ["+"] } }
             ]}}
         ]
     }
@@ -806,10 +828,10 @@ const cdomString = `{
         onmount: =signal(0, 'count'),
         children: [
             { h3: ["Compressed 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: ["+"] } }
             ]}}
         ]
     }
@@ -840,11 +862,11 @@ const cdomString = `{
         onmount: =signal(0, 'count'),
         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: =(--/count) and =(++/count)
+                { button: { onclick: =(--/count), children: ["-"] } },
+                { button: { onclick: =(++/count), children: ["+"] } }
             ]}}
         ]
     }

package/docs/dom-benchmark.html

@@ -533,42 +533,14 @@
             // Create a temporary container for Juris to render into
             const tempContainer = document.createElement('div');
 
-            // Temporarily disable all console methods to prevent Juris logging from affecting benchmark
-            const originalConsole = {
-                log: console.log,
-                dir: console.dir,
-                warn: console.warn,
-                error: console.error,
-                info: console.info,
-                debug: console.debug
-            };
-            const noop = () => { };
-            console.log = noop;
-            console.dir = noop;
-            console.warn = noop;
-            console.error = noop;
-            console.info = noop;
-            console.debug = noop;
-
-            try {
-                // Create a Juris instance with the oDOM structure as the layout
-                const jurisInstance = new Juris({
-                    debug: false,  // Disable logging for performance
-                    layout: onode
-                });
-
-                // Render to the temporary container
-                jurisInstance.render(tempContainer);
-            } finally {
-                // Restore original console methods
-                console.log = originalConsole.log;
-                console.dir = originalConsole.dir;
-                console.warn = originalConsole.warn;
-                console.error = originalConsole.error;
-                console.info = originalConsole.info;
-                console.debug = originalConsole.debug;
-            }
+            // Create a Juris instance with the oDOM structure as the layout
+            const jurisInstance = new Juris({
+                debug: false,  // Disable logging for performance
+                layout: onode
+            });
 
+            // Render to the temporary container
+            jurisInstance.render(tempContainer);
             // Return the first child (the actual rendered content)
             return tempContainer.firstChild || tempContainer;
         }

package/jprx/README.md

@@ -2,6 +2,8 @@
 
 **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.
 
+> **v1.4.0 Syntax Update**: JPRX now uses a wrapper syntax `=(expr)` for unambiguous expression parsing. Legacy prefix-only syntax (e.g., `=/path`) is still supported but will be deprecated after March 31, 2026.
+
 ## 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.
@@ -26,17 +28,17 @@ 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 (UP-tree search). |
-| **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. |
+| **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 (UP-tree search). |
+| **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), `$this`, `$event` | Context-aware placeholders for iteration and interaction. |
-| **Two-Way Binding**| `=bind(/user/name)`| Create a managed, two-way reactive link for inputs. |
-| **DOM Patches**    | `=move(target, loc)`| Decentralized layout: Move/replace host element into a target. |
+| **Two-Way Binding**| `=(bind(/user/name))`| Create a managed, two-way reactive link for inputs. |
+| **DOM Patches**    | `=(move(target, loc))`| Decentralized layout: Move/replace host element into a target. |
 
-Once inside a JPRX expression, the `=` prefix is only needed at the start of the expression for paths or function names.
+**Note**: For initialization functions like `state()` and `signal()`, use `=function(...)` without the outer wrapper, as they execute once on mount rather than being reactive expressions.
 
 
 ## State Management
@@ -104,7 +106,7 @@ To ensure unambiguous data flow, `=bind` only accepts direct paths. It cannot be
 
 ### Handling Transformations
 If you need to transform data during a two-way binding, there are two primary approaches:
-1. **Event-Based**: Use a manual `oninput` handler to apply the transformation, e.g., `=set(/name, upper($event/target/value))`.
+1. **Event-Based**: Use a manual `oninput` handler to apply the transformation, e.g., `=(set(/name, upper($event/target/value)))`.
 2. **Schema-Based**: Define a `transform` or `pattern` in the schema for the path. The `=bind` helper will respect the schema rules during the write-back phase.
 
 ---
@@ -159,9 +161,9 @@ A modern, lifecycle-based reactive counter:
     "onmount": "=state({ count: 0 }, { name: 'counter', schema: 'auto', scope: $this })",
     "children": [
       { "h2": "Modern JPRX Counter" },
-      { "p": ["Current Count: ", "=/counter/count"] },
-      { "button": { "onclick": "=++/counter/count", "children": ["+"] } },
-      { "button": { "onclick": "=--/counter/count", "children": ["-"] } }
+      { "p": ["Current Count: ", "=(/counter/count)"] },
+      { "button": { "onclick": "=(++/counter/count)", "children": ["+"] } },
+      { "button": { "onclick": "=(--/counter/count)", "children": ["-"] } }
     ]
   }
 }

package/jprx/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jprx",
-    "version": "1.3.1",
+    "version": "1.4.0",
     "description": "JSON Path Reactive eXpressions - A reactive expression language for JSON data",
     "main": "index.js",
     "type": "module",

package/jprx/parser.js

@@ -1730,7 +1730,44 @@ export const parseJPRX = (input) => {
             continue;
         }
 
-        // Handle JPRX expressions starting with = (MUST come before word handler!)
+        // Handle JPRX expressions starting with = or #
+        // New wrapper syntax: =(expr) or #(xpath)
+        if ((char === '=' || char === '#') && input[i + 1] === '(') {
+            const prefix = char;
+            let expr = prefix;
+            i++; // skip = or #
+            let parenDepth = 0;
+            let inExprQuote = null;
+
+            while (i < len) {
+                const c = input[i];
+
+                if (inExprQuote) {
+                    if (c === inExprQuote && input[i - 1] !== '\\') inExprQuote = null;
+                } else if (c === '"' || c === "'") {
+                    inExprQuote = c;
+                } else {
+                    if (c === '(') parenDepth++;
+                    else if (c === ')') {
+                        parenDepth--;
+                        if (parenDepth === 0) {
+                            expr += c;
+                            i++;
+                            break;
+                        }
+                    }
+                }
+
+                expr += c;
+                i++;
+            }
+
+            // Use JSON.stringify to safely quote and escape the expression
+            result += JSON.stringify(expr);
+            continue;
+        }
+
+        // Handle legacy JPRX expressions starting with = (without parentheses)
         if (char === '=') {
             let expr = '';
             let parenDepth = 0;
@@ -1792,6 +1829,53 @@ export const parseJPRX = (input) => {
             continue;
         }
 
+        // Handle XPath expressions starting with # (legacy syntax)
+        if (char === '#') {
+            let expr = '';
+            let parenDepth = 0;
+            let bracketDepth = 0;
+            let inExprQuote = null;
+
+            while (i < len) {
+                const c = input[i];
+
+                if (inExprQuote) {
+                    if (c === inExprQuote && input[i - 1] !== '\\') inExprQuote = null;
+                } else if (c === '"' || c === "'") {
+                    inExprQuote = c;
+                } else {
+                    // Check for break BEFORE updating depth
+                    if (parenDepth === 0 && bracketDepth === 0) {
+                        // Break on structural characters at depth 0
+                        if (/[}[\],:]/.test(c) && expr.length > 1) break;
+                        // For whitespace, peek ahead
+                        if (/\s/.test(c)) {
+                            let j = i + 1;
+                            while (j < len && /\s/.test(input[j])) j++;
+                            if (j < len) {
+                                const nextChar = input[j];
+                                if (nextChar === '}' || nextChar === ',' || nextChar === ']') {
+                                    break;
+                                }
+                            }
+                        }
+                    }
+
+                    if (c === '(') parenDepth++;
+                    else if (c === ')') parenDepth--;
+                    else if (c === '[') bracketDepth++;
+                    else if (c === ']') bracketDepth--;
+                }
+
+                expr += c;
+                i++;
+            }
+
+            // Use JSON.stringify to safely quote and escape the expression
+            result += JSON.stringify(expr);
+            continue;
+        }
+
         // Handle unquoted property names, identifiers, paths, and FUNCTION CALLS
         if (/[a-zA-Z_$\/.\/]/.test(char)) {
             let word = '';