lightview 2.0.9 → 2.2.1

package/docs/api/hypermedia.html

@@ -217,7 +217,8 @@ button({ href: '/api/items.html#details', target: '#content' }, 'View Details')<
 
         <h2 id="template-literals">Template Literals</h2>
         <p>
-            External HTML, .vdom and .odom files, can reference named signals or state with template syntax:
+            External HTML, <code>.vdom</code> and <code>.odom</code> files, can reference named signals or state with
+            template syntax:
         </p>
         <pre><code>// main.js - Register named signals and state
 const count = signal(0, 'count');
@@ -225,7 +226,10 @@ const userName = signal('Guest', 'userName');
 const userPrefs = state({ theme: 'dark', lang: 'en' }, 'userPrefs');
 
 // Load template that uses them
-div({ src: '/partials/dashboard.html' })</code></pre>
+div({ src: '/partials/dashboard.html' })
+div({ src: '/partials/dashboard.vdom' })
+div({ src: '/partials/dashboard.odom' })</code></pre>
+
         <pre><code>&lt;!-- /partials/dashboard.html --&gt;
 &lt;div class="dashboard"&gt;
     &lt;h1&gt;Welcome, ${signal.get('userName').value}!&lt;/h1&gt;
@@ -233,6 +237,29 @@ div({ src: '/partials/dashboard.html' })</code></pre>
     &lt;p&gt;Theme: ${state.get('userPrefs').theme}&lt;/p&gt;
 &lt;/div&gt;</code></pre>
 
+        <pre><code>// /partials/dashboard.vdom (JSON Array)
+[
+    { 
+        "tag": "div", 
+        "attributes": { "class": "dashboard" }, 
+        "children": [
+             { "tag": "h1", "children": ["Welcome, ${signal.get('userName').value}!"] },
+             { "tag": "p", "children": ["Theme: ${state.get('userPrefs').theme}"] }
+        ]
+    }
+]</code></pre>
+
+        <pre><code>// /partials/dashboard.odom (Object DOM)
+{
+    "div": {
+        "class": "dashboard",
+        "children": [
+             { "h1": { "children": ["Welcome, ${signal.get('userName').value}!"] } },
+             { "p": { "children": ["Theme: ${state.get('userPrefs').theme}"] } }
+        ]
+    }
+}</code></pre>
+
         <h2 id="shadow-dom">Shadow DOM</h2>
         <p>
             Load content into shadow DOM for style isolation using <code>location="shadow"</code> or the

package/docs/api/index.html

@@ -149,10 +149,14 @@ const { state } = LightviewX; // Deep state (lightview-x)</code></pre>
                     Side effects. Do things when state changes.
                 </p>
             </a>
-            <a href="/docs/syntax.html" class="feature-card" style="text-decoration: none; color: inherit;">
+            <a href="./elements.html" class="feature-card" style="text-decoration: none; color: inherit;">
                 <h3 class="feature-title">Syntax Styles</h3>
                 <p class="feature-description">
-                    Four ways to build UI: tag functions, vDOM, Object DOM, and Custom Elements.
+                    Five ways to build UI: tag functions, vDOM, Object DOM, Custom Elements, and the experimental cDOM.
+                </p>
+                <p style="margin-top: 1rem; font-style: italic;">
+                    An exciting 5th option is coming: the <strong>Computational DOM</strong>, a.k.a. <strong><a
+                            href="/docs/cdom.html">cDOM</a></strong>.
                 </p>
             </a>
             <a href="./enhance" class="feature-card" style="text-decoration: none; color: inherit;">

package/docs/api/nav.html

@@ -1,4 +1,22 @@
 <nav class="docs-nav">
+    <div class="docs-nav-section">
+        <div class="docs-nav-title">Elements</div>
+        <a href="./elements.html" class="docs-nav-link">Comparison</a>
+        <a href="./elements.html#tagged-api" class="docs-nav-link">Tagged API</a>
+        <a href="./elements.html#vdom" class="docs-nav-link">vDOM</a>
+        <a href="./elements.html#object-dom" class="docs-nav-link">Object DOM (oDOM)</a>
+        <a href="./elements.html#custom-elements" class="docs-nav-link">Custom Elements</a>
+        <div class="docs-nav-item">
+            <a href="./elements.html#pseudo-elements" class="docs-nav-link">Pseudo-elements</a>
+            <div class="docs-nav-subsection" style="margin-left: 1rem; border-left: 1px solid var(--site-border);">
+                <a href="./elements.html#shadowdom" class="docs-nav-link" style="font-size: 0.85em;">shadowDOM</a>
+                <a href="./elements.html#text" class="docs-nav-link" style="font-size: 0.85em;">text</a>
+            </div>
+        </div>
+        <a href="./elements.html#attributes-events" class="docs-nav-link">Attributes & Events</a>
+        <a href="./elements.html#children" class="docs-nav-link">Children</a>
+        <a href="./elements.html#dom-el" class="docs-nav-link">The domEl Property</a>
+    </div>
     <div class="docs-nav-section">
         <div class="docs-nav-title">Reactivity</div>
 
@@ -27,9 +45,5 @@
                     Apps</a>
             </div>
         </div>
-        <div class="docs-nav-section">
-            <div class="docs-nav-title">Elements</div>
-            <a href="./elements.html" class="docs-nav-link">Creating Elements</a>
-        </div>
     </div>
 </nav>

package/docs/assets/js/examplify.js

@@ -2,7 +2,7 @@
 var examplifyIdCounter = globalThis.examplifyIdCounter || 0;
 globalThis.examplifyIdCounter = examplifyIdCounter;
 
-function examplify(target, options = {}) {
+globalThis.examplify = function examplify(target, options = {}) {
     const { scripts, styles, modules, html, at, location = 'beforeBegin', type, height, minHeight = 100, maxHeight = Infinity, allowSameOrigin = false, useOrigin = null, language = 'js', autoRun = false } = options;
     const originalContent = target.textContent;
     const autoResize = !height; // Auto-resize if no explicit height is provided

package/docs/cdom-nav.html

@@ -0,0 +1,55 @@
+<nav class="docs-nav">
+    <div class="docs-nav-section">
+        <div class="docs-nav-title">cDOM</div>
+        <a href="#overview" class="docs-nav-link">Overview</a>
+        <a href="#simple-example" class="docs-nav-link">Simple Example</a>
+        <a href="#advantages" class="docs-nav-link">Advantages</a>
+    </div>
+    <div class="docs-nav-section">
+        <div class="docs-nav-title">JPRX</div>
+        <a href="#JPRX" class="docs-nav-link">Introduction</a>
+        <a href="#JPRX-delimiters" class="docs-nav-link">Delimiters</a>
+        <a href="#JPRX-anatomy" class="docs-nav-link">Anatomy of a Path</a>
+        <a href="#JPRX-placeholders" class="docs-nav-link">Placeholders</a>
+    </div>
+    <div class="docs-nav-section">
+        <div class="docs-nav-title">Concepts</div>
+        <a href="#comparison" class="docs-nav-link">Comparison to Excel</a>
+        <a href="#integration" class="docs-nav-link">Lightview Integration</a>
+        <a href="#directives" class="docs-nav-link">Directives</a>
+    </div>
+    <div class="docs-nav-section">
+        <div class="docs-nav-title">Examples</div>
+        <a href="#shopping-cart" class="docs-nav-link">Shopping Cart</a>
+        <a href="#interactive-example" class="docs-nav-link">Interactive Counter</a>
+        <a href="#operator-syntax" class="docs-nav-link">Operator Syntax</a>
+    </div>
+    <div class="docs-nav-section">
+        <div class="docs-nav-title">Events</div>
+        <a href="#events" class="docs-nav-link">Events & Interaction</a>
+        <a href="#events-manual" class="docs-nav-link">Manual Implementation</a>
+        <a href="#events-llm" class="docs-nav-link">LLM-Generated</a>
+        <a href="#events-lifecycle" class="docs-nav-link">Interaction Lifecycle</a>
+    </div>
+    <div class="docs-nav-section">
+        <div class="docs-nav-title">API</div>
+        <a href="#js-api" class="docs-nav-link">JavaScript API</a>
+        <div class="docs-nav-item">
+            <a href="#helpers" class="docs-nav-link">JPRX Helpers</a>
+            <div class="docs-nav-subsection" style="margin-left: 1rem; border-left: 1px solid var(--site-border);">
+                <a href="#helpers-math" class="docs-nav-link" style="font-size: 0.85em;">Math</a>
+                <a href="#helpers-stats" class="docs-nav-link" style="font-size: 0.85em;">Stats</a>
+                <a href="#helpers-string" class="docs-nav-link" style="font-size: 0.85em;">String</a>
+                <a href="#helpers-array" class="docs-nav-link" style="font-size: 0.85em;">Array</a>
+                <a href="#helpers-logic" class="docs-nav-link" style="font-size: 0.85em;">Logic & Comparison</a>
+                <a href="#helpers-conditional" class="docs-nav-link" style="font-size: 0.85em;">Conditional
+                    Aggregates</a>
+                <a href="#helpers-formatting" class="docs-nav-link" style="font-size: 0.85em;">Formatting</a>
+                <a href="#helpers-datetime" class="docs-nav-link" style="font-size: 0.85em;">DateTime</a>
+                <a href="#helpers-lookup" class="docs-nav-link" style="font-size: 0.85em;">Lookup</a>
+                <a href="#helpers-mutation" class="docs-nav-link" style="font-size: 0.85em;">State Mutation</a>
+                <a href="#helpers-network" class="docs-nav-link" style="font-size: 0.85em;">Network</a>
+            </div>
+        </div>
+    </div>
+</nav>