lightview 2.4.4 → 2.5.0

package/docs/dom-benchmark.html

@@ -161,9 +161,14 @@
                                 class="btn btn-outline btn-benchmark border-slate-300">Run Raw oDOM</button>
                             <button onclick="runBenchmark('vDOM')"
                                 class="btn btn-outline btn-benchmark border-slate-300">Run Lightview vDOM</button>
+                            <button onclick="runBenchmark('JurisODOM')"
+                                class="btn btn-outline btn-benchmark border-slate-300">Run JurisJS oDOM</button>
                             <button onclick="runBenchmark('TaggedScript')"
                                 class="btn btn-outline btn-benchmark border-slate-300">Run Lightview Tagged
                                 Script</button>
+                            <button onclick="runBenchmark('BauTaggedScript')"
+                                class="btn btn-outline btn-benchmark border-slate-300">Run Bau Tagged
+                                Script</button>
                             <div class="divider"></div>
                             <button onclick="runAll()" class="btn btn-primary text-white">Run All Benchmarks</button>
                             <button onclick="clearTarget()" class="btn btn-ghost">Clear Target</button>
@@ -303,6 +308,31 @@
                         </div>
                     </div>
 
+                    <div class="result-card" id="res-JurisODOM">
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="font-bold text-slate-500 uppercase text-xs tracking-widest">JurisJS oDOM</h3>
+                            <div class="flex flex-col items-end gap-1">
+                                <div class="badge badge-outline badge-xs opacity-50"><span class="size">--</span> KB
+                                </div>
+                                <div class="badge badge-accent badge-xs text-white opacity-70"><span
+                                        class="gzip-size">--</span> KB gzip</div>
+                                <div class="badge badge-ghost badge-sm opacity-50">ms</div>
+                            </div>
+                        </div>
+                        <div class="text-3xl font-black text-slate-800 mb-4"><span class="time">--</span></div>
+
+                        <div class="grid grid-cols-4 gap-2 text-[10px] uppercase font-bold text-slate-400 mb-3">
+                            <div>Min <span class="min block text-slate-600">--</span></div>
+                            <div>Avg <span class="avg block text-slate-600">--</span></div>
+                            <div>Max <span class="max block text-slate-600">--</span></div>
+                            <div class="text-right">±SD <span class="std block text-slate-600">--</span></div>
+                        </div>
+
+                        <div class="progress-bar-custom">
+                            <div class="progress-fill" id="fill-JurisODOM"></div>
+                        </div>
+                    </div>
+
                     <div class="result-card" id="res-TaggedScript">
                         <div class="flex justify-between items-start mb-2">
                             <h3 class="font-bold text-slate-500 uppercase text-xs tracking-widest">Lightview Tagged
@@ -328,6 +358,32 @@
                             <div class="progress-fill" id="fill-TaggedScript"></div>
                         </div>
                     </div>
+
+                    <div class="result-card" id="res-BauTaggedScript">
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="font-bold text-slate-500 uppercase text-xs tracking-widest">Bau Tagged
+                                Script</h3>
+                            <div class="flex flex-col items-end gap-1">
+                                <div class="badge badge-outline badge-xs opacity-50"><span class="size">--</span> KB
+                                </div>
+                                <div class="badge badge-accent badge-xs text-white opacity-70"><span
+                                        class="gzip-size">--</span> KB gzip</div>
+                                <div class="badge badge-ghost badge-sm opacity-50">ms</div>
+                            </div>
+                        </div>
+                        <div class="text-3xl font-black text-slate-800 mb-4"><span class="time">--</span></div>
+
+                        <div class="grid grid-cols-4 gap-2 text-[10px] uppercase font-bold text-slate-400 mb-3">
+                            <div>Min <span class="min block text-slate-600">--</span></div>
+                            <div>Avg <span class="avg block text-slate-600">--</span></div>
+                            <div>Max <span class="max block text-slate-600">--</span></div>
+                            <div class="text-right">±SD <span class="std block text-slate-600">--</span></div>
+                        </div>
+
+                        <div class="progress-bar-custom">
+                            <div class="progress-fill" id="fill-BauTaggedScript"></div>
+                        </div>
+                    </div>
                 </div>
 
                 <div class="card bg-white shadow-sm border border-slate-200">
@@ -347,6 +403,7 @@
     <!-- Core Libraries -->
     <script src="/lightview.js"></script>
     <script src="/lightview-x.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/juris@0.9.0/juris.min.js"></script>
 
     <script>
         function generateHTML(count) {
@@ -468,6 +525,27 @@
             return el;
         }
 
+        function odomToDOM_Juris(onode) {
+            if (typeof onode !== 'object' || onode === null) {
+                return document.createTextNode(onode);
+            }
+
+            // Create a temporary container for Juris to render into
+            const tempContainer = document.createElement('div');
+
+            // 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;
+        }
+
+
         async function getGzipSize(str) {
             try {
                 const stream = new Blob([str]).stream();
@@ -518,7 +596,7 @@
         function clearTarget() {
             target.replaceChildren();
             target.innerHTML = '<div class="p-8 text-center text-slate-400 italic">Target is empty.</div>';
-            ['innerHTML', 'DOMParser', 'vDOM', 'RawVDOM', 'RawoDOM', 'TaggedScript'].forEach(id => {
+            ['innerHTML', 'DOMParser', 'vDOM', 'RawVDOM', 'RawoDOM', 'JurisODOM', 'TaggedScript', 'BauTaggedScript'].forEach(id => {
                 const card = document.getElementById(`res-${id}`);
                 card.classList.remove('active');
                 card.querySelector('.time').innerText = '--';
@@ -568,6 +646,12 @@
                 const domEl = odomToDOM(json);
                 target.replaceChildren(domEl);
                 time = performance.now() - start;
+            } else if (type === 'JurisODOM') {
+                const start = performance.now();
+                const json = JSON.parse(data);
+                const domEl = odomToDOM_Juris(json);
+                target.replaceChildren(domEl);
+                time = performance.now() - start;
             } else if (type === 'TaggedScript') {
                 const existing = document.getElementById('tagged-script-tag');
                 if (existing) existing.remove();
@@ -580,6 +664,19 @@
                     document.body.appendChild(script);
                 });
                 time = window.__taggedBenchmarkTime;
+            } else if (type === 'BauTaggedScript') {
+                const existing = document.getElementById('bau-tagged-script-tag');
+                if (existing) existing.remove();
+
+                await new Promise(resolve => {
+                    window.__resolveBauTaggedBenchmark = resolve;
+                    const script = document.createElement('script');
+                    script.type = 'module';
+                    script.id = 'bau-tagged-script-tag';
+                    script.src = `./benchmarks/bau-tagged-fragment.js?count=${count}&t=${Date.now()}`;
+                    document.body.appendChild(script);
+                });
+                time = window.__bauTaggedBenchmarkTime;
             }
             return time;
         }
@@ -592,10 +689,10 @@
             let data = preGeneratedData;
 
             // 1. Preparation phase (outside of timing)
-            if (!data && type !== 'TaggedScript') {
+            if (!data && type !== 'TaggedScript' && type !== 'BauTaggedScript') {
                 if (type === 'innerHTML' || type === 'DOMParser') data = generateHTML(count);
                 if (type === 'vDOM' || type === 'RawVDOM') data = generateVDOM(count);
-                if (type === 'RawoDOM') data = generateODOM(count);
+                if (type === 'RawoDOM' || type === 'JurisODOM') data = generateODOM(count);
             }
 
             console.log(`Starting ${cycles} cycles for ${type}...`);
@@ -628,7 +725,9 @@
                 { id: 'RawVDOM', data: vdomData },
                 { id: 'RawoDOM', data: odomData },
                 { id: 'vDOM', data: vdomData },
-                { id: 'TaggedScript', data: null }
+                { id: 'JurisODOM', data: odomData },
+                { id: 'TaggedScript', data: null },
+                { id: 'BauTaggedScript', data: null }
             ];
 
             for (const config of configs) {

package/docs/getting-started/index.html

@@ -15,6 +15,7 @@
             <button class="btn btn-secondary step-btn" onclick="switchStep(4)">4. Hypermedia</button>
             <button class="btn btn-secondary step-btn" onclick="switchStep(5)">5. Components</button>
             <button class="btn btn-secondary step-btn" onclick="switchStep(6)">6. Gating</button>
+            <button class="btn btn-secondary step-btn" onclick="switchStep(7)">7. cDOM</button>
         </div>
 
         <!-- Tutorial Layout: Preview on top, Code & Concepts below -->
@@ -679,6 +680,45 @@ $('#app').content(App);`,
                     <li style="margin-bottom: 0.75rem;"><strong>Write your own</strong> — Write your own functions and add the to <code>globalThis</code> to make them available to all templates. They have access to <code>this</code> (the element) and can accept arguments like <code>event</code>.</li>
                 </ul>
                 <p><strong>Try it:</strong> Click the Spam Me button rapidly, or type quickly into the search box to see the limiters in action!</p>`
+            },
+            7: {
+                options: {
+                    autoRun: true
+                },
+                code: `// STEP 7: cDOM - Compressed DOM & JPRX
+await import('/lightview-cdom.js');
+const { parseJPRX, hydrate } = globalThis.LightviewCDOM;
+const { $ } = Lightview;
+
+const cdomString = \`{
+    div: {
+        onmount: =signal(0,"count"),        
+        children: [
+            { h3: ["Standard JPRX Counter"] },
+            { p: { children: ["Count: ", =/count] }},
+            { div: { children: [
+                { button: { onclick: =decrement(/count), children: ["-"] } },
+                { button: { onclick: =/count++, children: ["+"] } }
+            ]}}
+        ]
+    }
+}\`;
+
+const hydrated = hydrate(parseJPRX(cdomString));
+$('#app').content(hydrated);`,
+                concepts: `
+                <h3 style="margin-top: 0; color: var(--site-primary);">Step 7: cDOM & JPRX</h3>
+                <p><strong><a href="/docs/cdom.html">cDOM</a></strong> (compressed DOM) combined with <strong><a href="/docs/cdom.html#JPRX">JPRX</a></strong> (JSON Path Reactive eXpressions) allows you to define entire reactive UIs as pure JSON-compatible strings.</p>
+                
+                <h4>Key Concepts:</h4>
+                <ul style="padding-left: 1.25rem; color: var(--site-text-secondary);">
+                    <li style="margin-bottom: 0.75rem;"><strong>Portability</strong> — Since the UI is a string, it can be easily stored in databases, sent over the wire, or generated by an LLM without security risks of <code>eval()</code>.</li>
+                    <li style="margin-bottom: 0.75rem;"><strong>JPRX Expressions</strong> — Use <code>=</code> to denote reactive expressions within the string. For example, <code>=/count</code> binds to a signal.</li>
+                    <li style="margin-bottom: 0.75rem;"><strong>Flexible Syntax</strong> — Operators and helpers can be called as functions (<code>=decrement(/count)</code>) or using prefix (<code>=--/count</code>), infix (<code>=/count - 1</code>), or postfix (<code>=/count--</code>) notation.</li>
+                    <li style="margin-bottom: 0.75rem;"><strong>Hydration</strong> — <code>hydrate()</code> turns the parsed JPRX into a live, reactive DOM tree.</li>
+                </ul>
+                <p><strong>Try it:</strong> Edit the <code>cdomString</code> to change the labels or add new elements!</p>
+            `
             }
         };
 

package/docs/index.html

@@ -11,7 +11,7 @@
             More power. Less energy.
             <br>
             <a id="link-hero-ai-safe" href="#ai-safe"
-                style="color: var(--site-primary); font-size: 1.25rem; font-weight: 700; text-decoration: none; display: inline-block; margin-top: 0.5rem; border-bottom: 2px solid var(--site-primary); padding-bottom: 2px;">AI
+                style="color: var(--site-primary); font-size: 1.25rem; font-weight: 700; text-decoration: none; display: inline-block; margin-top: 0.25rem; border-bottom: 2px solid var(--site-primary); padding-bottom: 2px;">AI
                 Safe</a>
         </p>
         <div class="hero-actions">
@@ -23,12 +23,15 @@
                 <div class="hero-stat-label">Build Steps</div>
             </div>
             <div class="hero-stat">
-                <div class="hero-stat-value">4</div>
+                <div class="hero-stat-value"><a id="link-hero-ways-to-build"
+                        href="http://localhost:3000/docs/api/elements"
+                        style="color: inherit; text-decoration: none;">5</a></div>
                 <div class="hero-stat-label">Ways to Build</div>
             </div>
             <div class="hero-stat">
                 <div class="hero-stat-value">40+</div>
-                <div class="hero-stat-label">Components</div>
+                <div class="hero-stat-label"><a id="link-hero-components" href="http://localhost:3000/docs/components/"
+                        style="color: inherit; text-decoration: none;">Components</a></div>
             </div>
         </div>
     </div>
@@ -38,79 +41,84 @@
 <section class="section">
     <div class="section-content">
         <div class="section-header">
-            <h2 class="section-title">Heavy? Not Our Thing.</h2>
-            <p class="section-subtitle">
-                Have fun, stay light.
-            </p>
+            <h2 class="section-title">Why Lightview</h2>
         </div>
         <div class="feature-grid">
-            <div class="feature-card">
+            <a id="link-feature-signals" href="./api/signals.html" class="feature-card">
                 <div class="feature-icon">
                     <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
                         <circle cx="12" cy="12" r="10" />
                         <path d="M12 6v6l4 2" />
                     </svg>
                 </div>
-                <h3><a id="link-feature-signals" href="./api/signals.html" class="feature-title">Signals and Object
-                        State Reactivity</a></h3>
+                <h3 class="feature-title">Signals and Object State Reactivity</h3>
                 <p class="feature-description">
-                    Fine-grained reactivity with signals and obejct state. Updates propagate automatically—no virtual
-                    DOM diffing needed. As a bonus, session and local storage are also supported.
+                    Fine-grained reactivity with signals and object state. Updates propagate automatically—no virtual
+                    DOM diffing needed. Arrays and Dates are directly reactive without destructing or copying. As a
+                    bonus, session and local storage are also supported.
                 </p>
-            </div>
-            <div class="feature-card">
+            </a>
+            <a id="link-feature-elements" href="./api/elements.html" class="feature-card">
                 <div class="feature-icon">
                     <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
                         <rect x="3" y="3" width="18" height="18" rx="2" />
                         <path d="M3 9h18M9 21V9" />
                     </svg>
                 </div>
-                <h3><a id="link-feature-elements" href="./api/elements.html" class="feature-title">Multiple Syntaxes</a>
-                </h3>
+                <h3 class="feature-title">Multiple Syntaxes</h3>
                 <p class="feature-description">
                     Tagged API, vDOM, Object DOM, HTML. Pick your style—they all work together.
                 </p>
-            </div>
-            <div class="feature-card">
+            </a>
+            <a id="link-feature-hypermedia" href="/docs/hypermedia/" class="feature-card">
                 <div class="feature-icon">
                     <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
                         <path
                             d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.66 0 3-4 3-9s-1.34-9-3-9m0 18c-1.66 0-3-4-3-9s1.34-9 3-9" />
                     </svg>
                 </div>
-                <h3><a id="link-feature-hypermedia" href="/docs/hypermedia/" class="feature-title">Hypermedia
-                        Ready</a></h3>
+                <h3 class="feature-title">Hypermedia Ready</h3>
                 <p class="feature-description">
                     Fetch HTML, vDOM, or Object DOM with the <code>src</code> attribute. HTMX-like patterns for
                     <code>src</code> and <code>href</code> built right
                     in.
                 </p>
-            </div>
-            <div class="feature-card">
+            </a>
+            <a id="link-feature-components" href="./components/index.html" class="feature-card">
                 <div class="feature-icon">
                     <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
                         <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
                     </svg>
                 </div>
-                <h3><a id="link-feature-components" href="./components/index.html" class="feature-title">Component
-                        Library</a></h3>
+                <h3 class="feature-title">Component Library</h3>
                 <p class="feature-description">
                     Beautiful, accessible components ready to use. Buttons, modals, forms, charts, and more.
                 </p>
-            </div>
-            <div class="feature-card">
+            </a>
+            <a id="link-feature-zerobuild" href="./getting-started/index.html" class="feature-card">
                 <div class="feature-icon">
                     <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
                         <path
                             d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z" />
                     </svg>
                 </div>
-                <h3><a id="link-feature-zerobuild" href="./getting-started/index.html" class="feature-title">Zero Build
-                        Step</a></h3>
+                <h3 class="feature-title">Zero Build Step</h3>
                 <p class="feature-description">
                     No bundler required. Drop in a script tag and start building. Works everywhere.
                 </p>
-            </div>
+            </a>
+            <a id="link-feature-aisafe" href="#ai-safe" class="feature-card">
+                <div class="feature-icon">
+                    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+                    </svg>
+                </div>
+                <h3 class="feature-title">AI Safe</h3>
+                <p class="feature-description">
+                    Build reactive UIs with pure JSON or JSON like data. No eval(), no risky code generation. Safe for
+                    AI agents.
+                </p>
+            </a>
 
         </div>
     </div>
@@ -150,7 +158,8 @@
                     <h3 style="color: white; font-size: 1.5rem; margin-bottom: 1rem;">Execution Safety</h3>
                     <p style="color: rgba(255, 255, 255, 0.75); line-height: 1.6;">AI-generated UIs usually require
                         risky JavaScript strings. cDOM creates reactive interfaces using <strong>pure JSON
-                            data</strong> and <a id="link-ai-safe-cdom-helpers" href="/docs/cdom.html#helpers"
+                            or JSON like data</strong> and <a id="link-ai-safe-cdom-helpers"
+                            href="/docs/cdom.html#helpers"
                             style="color: #a78bfa; text-decoration: underline; font-weight: 600;">over 50 built-in
                             functions</a> that bring spreadsheet-like
                         functionality to the DOM. No <code>eval()</code>, no <code>new Function()</code>, and <strong>no
@@ -223,7 +232,7 @@
 <section class="section">
     <div class="section-content">
         <div class="section-header">
-            <h2 class="section-title">Heavy, Complex Frameworks? Lighten Up.</h2>
+            <h2 class="section-title">Lighten Up.</h2>
             <p class="section-subtitle">
                 Get started in minutes. No npm install. No webpack or vite build process. Just code.
             </p>

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 = '';