lightview 2.3.8 → 2.4.4

package/.gemini/CODE_ANALYSIS_AND_IMPROVEMENT_PLAN.md

@@ -0,0 +1,56 @@
+# cDOM / JPRX Code Analysis and Improvement Recommendations
+
+## 1. Executive Summary
+This document outlines the analysis of the current JPRX (JSON Reactive Path eXpressions) and cDOM implementation within Lightview. While the system is powerful and integral to the framework's reactivity, its core logic (`jprx/parser.js`) has grown into a monolithic module that mixes tokenization, parsing, evaluation, and runtime state management. The primary recommendation is to refactor this into distinct layers to improve maintainability, performance, and testability.
+
+## 2. Current State Analysis
+
+### 2.1 Code Structure
+*   **Monolithic Design**: `jprx/parser.js` is approximately 1,900 lines long. It encapsulates:
+    *   **Tokenizer**: Regex-based lexer (`tokenize`).
+    *   **Pratt Parser**: Top-down operator precedence parser.
+    *   **Evaluator**: `evaluateAST` and `resolvePath` logic.
+    *   **Runtime Types**: `BindingTarget`, `LazyValue`.
+    *   **Global Registry**: Storage for helpers and operators.
+*   **Coupling**: The parser is tightly coupled with Lightview's specific reactivity model (Signals/Proxies) via direct imports and assumption of `Lightview.state` structure.
+
+### 2.2 Performance
+*   **Repeated Parsing**: Currently, there is no visible caching mechanism for parsed ASTs. Every time an expression is evaluated (unless manually memoized externally), it goes through the tokenization and parsing steps.
+*   **Object Creation**: The heavy use of intermediate objects during AST traversals and resolution could trigger frequent garbage collection in high-frequency updates.
+
+### 2.3 DX and Reliability
+*   **Error Reporting**: Syntax errors in JPRX expressions often result in generic failures or silent returns, making debugging difficult for the end-user.
+*   **Complexity**: Adding new operators or features requires modifying the central file, increasing the risk of regressions.
+
+## 3. Improvement Recommendations
+
+### Phase 1: Modularization (High Priority)
+Decompose `jprx/parser.js` into focused modules under a `jprx/core/` directory:
+
+1.  **`tokenization.js`**: Pure functions handling string-to-token conversion.
+2.  **`grammar.js`**: Definition of operators, precedence levels, and AST node types.
+3.  **`parser.js`**: The Pratt parser implementation that outputs a pure AST.
+4.  **`runtime.js`**: The `evaluateAST` logic and `BindingTarget`/`LazyValue` classes.
+5.  **`registry.js`**: Singleton or context-based registry for helpers and operators.
+
+### Phase 2: Performance Enhancements
+1.  **LRU Cache for ASTs**: Implement a Least Recently Used cache for the `tokenize -> parse` pipeline. If an expression string `count + 1` is seen again, serve the cached AST immediately.
+2.  **Fast-Path for Simple Paths**: 90% of expressions are likely simple property access (e.g., `user.name`). Implement a proper regex check to bypass the full parser for these cases and use direct traversal.
+3.  **Instruction Caching**: For repeated evaluations of the same AST, consider compiling to a closure (similar to how `new Function` works, but safe and sandboxed) if performance bottlenecks appear.
+
+### Phase 3: Robustness and Validation
+1.  **Fuzz Testing**: Implement grammar-based fuzz testing to ensure the parser does not crash on malformed inputs.
+2.  **Strict Mode**: Introduce a strict mode that throws descriptive errors for undefined paths or invalid operations, rather than silently failing.
+3.  **Type Safety**: If possible, add JSDoc type definitions to all internal AST nodes to aid tooling and potential future TypeScript migration.
+
+## 4. Code Specific Observations
+
+*   **`BindingTarget` Implementation**: The current "duck-typing" (`isBindingTarget = true`) is practical but could be cleaner using `Symbol.for('jprx.bindingTarget')` to avoid property collision.
+*   **Operator Registration**: The dynamic `registerOperator` is powerful but allows overwriting core behavior. Consider locking core operators (math, logic) after initialization.
+*   **Reactivity Integration**: The dependency on `Lightview.state` could be abstracted behind an interface (e.g., `IReactiveSource`), allowing JPRX to be used with other state management libraries if desired.
+
+## 5. Next Steps
+1.  Create the `jprx/core` directory structure.
+2.  Move `BindingTarget` and `LazyValue` to a `types.js` file.
+3.  Extract the `tokenize` function and unit test it in isolation.
+4.  Draft the `AST` cache mechanism.

package/AI-GUIDANCE.md

@@ -0,0 +1,259 @@
+# Lightview AI Guidance
+
+This document is the **definitive guide** for Large Language Models (LLMs) on how to effectively use the Lightview library. It covers all development workflows, particularly emphasizing correct source file usage, hypermedia patterns, and dynamic generation.
+
+## Table of Contents
+1.  [Critical: Source Files vs Modules](#source-files)
+2.  [The Four UI Syntaxes](#the-four-ui-syntaxes)
+3.  [Hypermedia & Lightview X](#hypermedia-lightview-x)
+4.  [JPRX & cDOM (AI-Safe Generation)](#jprx-cdom)
+5.  [Component System](#component-system)
+6.  [Routing & Navigation](#routing-navigation)
+7.  [AI Development Strategies](#ai-development-strategies)
+8.  [Deep Links & Resources](#deep-links)
+
+---
+
+<a name="source-files"></a>
+## 1. Critical: Source Files vs Modules
+
+**PAY CAREFUL ATTENTION TO FILE TYPES.**
+
+*   **Standard Scripts (`.js`)**: These files exist in the root and are suitable for direct browser inclusion via script tags or simple bundling.
+    *   `lightview.js`: The core reactive engine (Signals, State, $, Effect).
+    *   `lightview-x.js`: The "Extension" module (Hypermedia, src fetching, simple validation, vDOM/oDOM conversion).
+    *   `lightview-router.js`: The Router implementation.
+    *   `lightview-cdom.js`: The parser for JPRX and cDOM.
+
+*   **ES Modules (in subdirectories)**: Files in `jprx/`, `components/`, etc., are ES modules.
+    *   **Do not** reference these directly in a generic HTML script tag without `type="module"`.
+    *   **Do** import them in your application logic files (e.g., `import { ... } from './jprx/parser.js'`).
+
+**Guidance**: When helping a user set up a new project, prefer importing from the root standard scripts for simplicity, or set up a proper `build.js` if deep module imports are needed.
+
+**Note on Syntaxes**:
+- **Tagged API**: Supported in `lightview.js`.
+- **vDOM**: Supported in `lightview.js` (standard `{ tag: ... }` objects).
+- **oDOM**: Requires `lightview-x.js` (converts `{ div: ... }` usage).
+
+---
+
+<a name="the-four-ui-syntaxes"></a>
+## 2. The Four UI Syntaxes
+
+Choose the syntax that matches your goal.
+
+### A. Tagged API (Best for Logic)
+Javascript functions representing HTML tags. Best for building applications with complex logic.
+```javascript
+const { div, h1, button } = Lightview.tags;
+const count = signal(0);
+
+const view = div({ class: "p-4" },
+  h1("Counter"),
+  button({ onclick: () => count.value++ }, () => `Count: ${count.value}`)
+);
+```
+
+### B. vDOM (Best for Structured Data)
+Explicit JSON structure. Use this when you need a standard, serializable format.
+```javascript
+const view = {
+  tag: "div",
+  attributes: { class: "p-4" },
+  children: [
+    { tag: "h1", children: ["Counter"] },
+    { tag: "button", attributes: { onclick: () => count.value++ }, children: [() => `Count: ${count.value}`] }
+  ]
+};
+```
+
+### C. oDOM (Best for Compact Templates)
+"Object DOM" uses keys as tags. It is significantly more concise. **Preferred for configuration-based UIs.**
+```javascript
+const view = {
+  div: {
+    class: "p-4",
+    children: [
+      { h1: "Counter" },
+      { button: { onclick: "...", children: ["Increment"] } }
+    ]
+  }
+};
+```
+
+### D. Custom Elements (Best for Hybrid Apps)
+Standard HTML tags powered by Lightview. Use these when enhancing an existing HTML page.
+```html
+<lv-button onclick="alert('clicked')">Click Me</lv-button>
+```
+
+---
+
+<a name="hypermedia-lightview-x"></a>
+## 3. Hypermedia & Lightview X
+
+Lightview X adds powerful **Hypermedia** capabilities to standard HTML elements.
+
+### The `src` and `href` Attributes (Hypermedia)
+*   **`src`**: Fetches content and replaces the element or its content.
+    *   **Support**: `.html`, `.json`, `.vdom`, `.odom`, `.cdom`, `.cdomc`
+    *   **Usage**: `<div src="/components/user-card.vdom"></div>`
+*   **`href`**: Non-standard tags (like `div`) with `href` act as "Links".
+    *   **Behavior**: Clicking them fetches the content at the URL and replaces the element's `src`.
+    *   **Targeting**: Use `target="#dest:beforeend"` to direct the content elsewhere.
+    *   **Usage**: `<div href="/api/next-page" target="#content:beforeend">Load More</div>`
+
+### Advanced Fetches (`data-method` & `data-body`)
+Customize HTTP requests for `src` and `href` actions.
+
+*   **`data-method`**: Specify the HTTP verb (e.g., `POST`, `PUT`, `DELETE`). Defaults to `GET`.
+*   **`data-body`**: The data to send with the request.
+    *   **CSS Selector (Default)**: Grabs the data from the DOM.
+        *   `form`: Serialized as `FormData`.
+        *   `input`/`select`/`textarea`: Sends the current `value`.
+        *   `checkbox`/`radio`: Sends `value` only if checked.
+        *   Other elements: Sends `innerText`.
+    *   **`javascript:expr`**: Evaluates a Javascript expression (has access to `state` and `signal`).
+    *   **`json:{...}`**: Sends a literal JSON string (sets `Content-Type: application/json`).
+    *   **`text:...`**: Sends raw text (sets `Content-Type: text/plain`).
+*   **GET Requests**: If the method is `GET`, the data from `data-body` is automatically converted into **URL Query Parameters**.
+
+**Usage**:
+```html
+<!-- Post a form -->
+<button href="/api/user/save" data-method="POST" data-body="#user-form">Save</button>
+
+<!-- Fetch with query params from an input -->
+<button href="/api/search" data-body="#search-input" target="#results">Search</button>
+```
+
+*   **Template Literals**: Supported in HTML, vDOM, and oDOM strings (e.g., `class="${ val > 10 ? 'red' : 'blue' }"`) via `lightview-x.js`.
+*   **Gating**: 
+    1.  **`Lightview.hooks.validateUrl`**: Intercept/block URLs.
+    2.  **`lv-before`**: Attribute that gates events (e.g., `lv-before="click: throttle(500)"` or custom functions).
+
+### Logic in Attributes (`template literals`)
+Lightview X allows embedded `${}` expressions in attributes for simple reactivity
+```javascript
+{
+  div: {
+    class: "${ count.value > 10 ? 'text-red-500' : 'text-green-500' }",
+    children: ["Status"]
+  }
+}
+```
+
+---
+
+<a name="jprx-cdom"></a>
+## 4. JPRX & cDOM (Safe Dynamic UI Generation For Humans and AIs)
+
+**cDOM (Computed DOM)** and **JPRX (JSON Reactive Expressions)** allow you to build fully reactive UIs using **only JSON**.
+
+### JPRX Helper Reference
+JPRX supports a wide range of helpers. AI agents should use these instead of trying to write JS when builing streaming UIs at runtime.
+
+| Category | Helpers |
+| :--- | :--- |
+| **Math** | `add`, `subtract`, `multiply`, `divide`, `mod`, `pow`, `abs`, `round`, `ceil`, `floor`, `sqrt`, `negate`, `toPercent` |
+| **Logic** | `and`, `or`, `not`, `if`, `eq`, `neq`, `gt`, `lt`, `gte`, `lte` |
+| **String** | `join`, `concat`, `upper`, `lower`, `trim`, `len`, `split`, `replace`, `capitalize`, `contains` |
+| **Array** | `map`, `filter`, `reduce`, `push`, `pop`, `sort`, `reverse`, `slice`, `find` |
+| **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** | `xpath(expr)` (Backward-looking only), `move(target, loc)` |
+| **Net** | `fetchHelper(url, opts)`, `mount(url, opts)` |
+
+### The "Decentralized Layout" Pattern (AI Strategy)
+1.  **Define**: Create a self-contained component with state.
+2.  **Move**: Use `=move('#target')` in `onmount` to teleport it.
+3.  **Stream**: Determine the update needed, generate the `.cdomc`, and let it patch itself.
+
+```javascript
+/* .cdomc format */
+{
+  div: {
+    id: "widget-1",
+    onmount: ["=state({val:0}, {name:'w1', scope:$this})", "=move('#sidebar')"],
+    children: [ { p: "Val: =/w1/val" } ]
+  }
+}
+```
+
+---
+
+<a name="component-system"></a>
+## 5. Component System
+
+Built on **DaisyUI** and **Tailwind CSS**.
+
+*   **Import**: `import { Button } from './components/index.js';`
+*   **Init**: `LightviewX.initComponents()` (Shadow DOM).
+*   **Theming**: `Lightview.setTheme('dark')` or `localStorage.setItem('lightview-theme', 'dark')`.
+
+---
+
+<a name="routing-navigation"></a>
+## 6. Routing & Navigation
+
+The `LightviewRouter` uses a pipeline (chain) architecture.
+
+### Advanced: Middleware Chains
+You can chain multiple handlers for a single route. This is powerful for authentication or data pre-loading.
+```javascript
+const checkAuth = async (ctx) => {
+    const user = await getUser();
+    if (!user) {
+        LightviewRouter.navigate('/login');
+        return null; // Stop chain
+    }
+    return { ...ctx, user }; // Pass data to next handler
+};
+
+router.use(
+  '/admin/*', 
+  checkAuth,            // 1. Guard
+  '/views/admin.html'   // 2. Render
+);
+```
+
+### Route Patterns
+*   **Static**: `router.use('/about', 'about.html')`
+*   **Wildcard**: `router.use('/docs/*', handler)` -> matches `/docs/api/v1`
+*   **Parameters**: `router.use('/users/:id', handler)` -> `ctx.params.id`
+*   **Replacement**: `router.use('/blog/:slug', '/content/posts/:slug.html')` -> Maps URL params to file path automatically.
+
+---
+
+<a name="ai-development-strategies"></a>
+## 7. AI Development Strategies
+
+**Scenario A: "I need a full web application."**
+*   **Strategy**: Use **Tagged API** + **lightview-router.js**.
+*   **Output**: Generate `.js` files.
+
+**Scenario B: "I need a dynamic dashboard widget of unknown nature at app development time."**
+*   **Strategy**: Use **cDOM/JPRX**.
+*   **Output**: Stream `.cdomc` chunks.
+
+**Scenario C: "I need a config-driven UI."**
+*   **Strategy**: Use **oDOM**.
+*   **Output**: Generate `.json` config files.
+
+---
+
+<a name="deep-links"></a>
+## 8. Deep Links & Resources
+
+*   **Documentation Home**: [/docs/index.html](file:///c:/Users/Owner/AntigravityProjects/lightview/docs/index.html)
+*   **Core Logic**: [/lightview.js](file:///c:/Users/Owner/AntigravityProjects/lightview/lightview.js)
+*   **Extension (Hypermedia)**: [/lightview-x.js](file:///c:/Users/Owner/AntigravityProjects/lightview/lightview-x.js)
+*   **Router**: [/lightview-router.js](file:///c:/Users/Owner/AntigravityProjects/lightview/lightview-router.js)
+*   **CDOM/JPRX Parser**: [/lightview-cdom.js](file:///c:/Users/Owner/AntigravityProjects/lightview/lightview-cdom.js)
+*   **Component Index**: [/components/index.js](file:///c:/Users/Owner/AntigravityProjects/lightview/components/index.js)
+*   **JPRX Helpers**: [/jprx/helpers/](file:///c:/Users/Owner/AntigravityProjects/lightview/jprx/helpers/)
+
+---
+© 2026 AnyWhichWay LLC.

package/README.md

@@ -4,6 +4,8 @@ A lightweight reactive UI library with signal-based reactivity and a clean API.
 
 Access the full documentation and interactive examples at [lightview.dev](https://lightview.dev).
 
+LLMs should read [AI-GUIDANCE.md](AI-GUIDANCE.md) for instructions on how to use Lightview.
+
 ## Modular Architecture
 
 **Core Library**: ~7.75KB | **Extended (Hypermedia + Components)**: ~20KB | **Router**: ~3KB
@@ -25,6 +27,39 @@ Lightview supports multiple ways to build UIs, allowing you to pick the style th
 
 All syntaxes share the same underlying reactive engine based on **Signals** and **State**.
 
+## cDOM & JPRX: AI-Assisted Declarative UIs
+
+Lightview includes **cDOM** (Computed DOM) powered by **JPRX** (JSON Pointer Reactive eXpressions)—a fully declarative UI layer that requires **zero custom JavaScript**. Much like **XPath** provides a powerful query language for XML, JPRX provides a reactive, formula-based language for JSON state.
+
+### Why This Matters for AI Collaboration
+
+Traditional UI development requires AI agents to generate imperative JavaScript code, which introduces security risks (XSS, code injection) and unpredictable behavior. cDOM flips this model:
+
+- **Pure Data, No Code**: UIs are defined as JSON structures with reactive expressions—no `eval()`, no `new Function()`, no executable strings.
+- **Safe by Design**: AI agents can generate, modify, and compose UIs without producing potentially harmful code.
+- **Auditable Output**: Every generated UI is a transparent data structure that can be validated, diffed, and sandboxed.
+
+### Example: A Reactive Counter (No JavaScript)
+
+```json
+{
+  "state": { "count": 0 },
+  "div": {
+    "children": [
+      { "p": "{$count}" },
+      { "button": { "onclick": "{set('count', add(count, 1))}", "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.
+
+### Learn More
+
+- [cDOM Documentation](https://lightview.dev/docs/cdom)
+- [JPRX Expression Reference](https://lightview.dev/docs/cdom#jprx)
+
 ## Quick Start
 
 ### 1. Tagged API (Concise & Expressive)

package/components/data-display/diff.js

@@ -20,7 +20,7 @@ const Diff = (props = {}, ...children) => {
     const { div, shadowDOM } = tags;
 
     const {
-        aspectRatio = 'aspect-16/9',
+        aspectRatio = 'aspect-video',
         useShadow,
         class: className = '',
         ...rest
@@ -67,7 +67,7 @@ Diff.Item1 = (props = {}, ...children) => {
 
     if (src) {
         return tags.div({ class: `diff-item-1 ${className}`.trim(), role: 'img', ...rest },
-            tags.img({ src, alt })
+            tags.img({ src, alt, style: 'width: 100%; height: 100%; object-fit: cover; display: block;' })
         );
     }
 
@@ -85,7 +85,7 @@ Diff.Item2 = (props = {}, ...children) => {
 
     if (src) {
         return tags.div({ class: `diff-item-2 ${className}`.trim(), role: 'img', tabindex: '0', ...rest },
-            tags.img({ src, alt })
+            tags.img({ src, alt, style: 'width: 100%; height: 100%; object-fit: cover; display: block;' })
         );
     }
 
@@ -99,7 +99,15 @@ Diff.Resizer = (props = {}) => {
     const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
-    return tags.div({ class: 'diff-resizer', ...props });
+    return tags.input({
+        type: 'range',
+        min: '0',
+        max: '100',
+        value: '50',
+        class: 'diff-resizer',
+        oninput: "this.parentElement.style.setProperty('--diff-offset', this.value + '%')",
+        ...props
+    });
 };
 
 const tags = globalThis.Lightview.tags;
@@ -108,4 +116,28 @@ tags['Diff.Item1'] = Diff.Item1;
 tags['Diff.Item2'] = Diff.Item2;
 tags['Diff.Resizer'] = Diff.Resizer;
 
+// Register as Custom Elements using customElementWrapper
+if (globalThis.LightviewX && typeof customElements !== 'undefined') {
+    const { customElementWrapper } = globalThis.LightviewX;
+
+    if (!customElements.get('lv-diff')) {
+        customElements.define('lv-diff', customElementWrapper(Diff, {
+            attributeMap: { aspectRatio: String }
+        }));
+    }
+    if (!customElements.get('lv-diff-item1')) {
+        customElements.define('lv-diff-item1', customElementWrapper(Diff.Item1, {
+            attributeMap: { src: String, alt: String }
+        }));
+    }
+    if (!customElements.get('lv-diff-item2')) {
+        customElements.define('lv-diff-item2', customElementWrapper(Diff.Item2, {
+            attributeMap: { src: String, alt: String }
+        }));
+    }
+    if (!customElements.get('lv-diff-resizer')) {
+        customElements.define('lv-diff-resizer', customElementWrapper(Diff.Resizer, {}));
+    }
+}
+
 export default Diff;

package/docs/api/hypermedia.html

@@ -70,7 +70,10 @@ Lightview.hooks.validateUrl = () => true;</code></pre>
 
         <h3 id="vdom-object-dom">vDOM and Object DOM</h3>
         <p>
-            Files with <code>.vdom</code> or <code>.odom</code> extensions are parsed as JSON and converted to elements.
+            Files with <code>.<a id="vdom" href="/docs/api/elements#vdom">vdom</a></code>,
+            <code>.<a id="odom" href="/docs/api/elements#object-dom">odom</a></code> or
+            <code>.<a id="cdom" href="/docs/cdom">cdom</a></code> extensions are parsed as JSON and converted to
+            elements.
             Any <a href="#template-literals">Template Literals</a> within the JSON values are automatically resolved.
         </p>
         <pre><code>// /api/cards.vdom
@@ -80,9 +83,76 @@ Lightview.hooks.validateUrl = () => true;</code></pre>
 ]
 
 // Load vDOM
-div({ src: '/api/cards.vdom' })</code></pre>
+div({ src: '/api/cards.vdom' })
 
-        <h2>Cloning DOM Elements</h2>
+// Load safe, reactive HTML
+div({ src: '/api/ai-generated.cdom' })
+</code></pre>
+
+        <h2 id="advanced-fetches">Advanced Fetches (data-method & data-body)</h2>
+        <p>
+            You can customize the HTTP request method and body for any <code>src</code> or <code>href</code> action
+            using <code>data-method</code> and <code>data-body</code>.
+        </p>
+
+        <h3>1. Request Methods</h3>
+        <p>Use <code>data-method</code> to specify an HTTP verb. Defaults to <code>GET</code>.</p>
+        <pre><code>// Send a DELETE request
+button({ 
+    href: '/api/items/123', 
+    'data-method': 'DELETE',
+    target: '#status-log' 
+}, 'Delete Item')</code></pre>
+
+        <h3>2. Request Bodies</h3>
+        <p>Use <code>data-body</code> to send data. If no prefix is used, it is treated as a CSS selector.</p>
+
+        <h4>CSS Selectors (Default)</h4>
+        <p>Grabs data from the DOM based on the element type:</p>
+        <ul>
+            <li><strong>Forms:</strong> If the selector points to a <code>&lt;form&gt;</code>, the entire form is
+                serialized as <code>FormData</code>.
+            </li>
+            <li><strong>Checkboxes/Radios:</strong> Only sends the <code>value</code> if the element is
+                <code>checked</code>. Otherwise, no data is sent.
+            </li>
+            <li><strong>Input/Select/Textarea:</strong> Sends the current <code>value</code>.</li>
+            <li><strong>Other Elements:</strong> Sends the <code>innerText</code> (e.g., from a <code>&lt;div&gt;</code>
+                or <code>&lt;span&gt;</code>).
+            </li>
+        </ul>
+        <pre><code>&lt;!-- Send the value of an input (Query param search?body=...) --&gt;
+&lt;button href="/api/search" data-body="#search-input" target="#results"&gt;Search&lt;/button&gt;
+&lt;input id="search-input" type="text"&gt;
+
+&lt;!-- Send an entire form as POST --&gt;
+&lt;button href="/api/user/update" data-method="POST" data-body="#user-form"&gt;Save&lt;/button&gt;
+&lt;form id="user-form"&gt;
+    &lt;input name="email" value="user@example.com"&gt;
+&lt;/form&gt;</code></pre>
+
+        <h4>Prefixes</h4>
+        <p>You can use prefixes to control exactly how the body is constructed:</p>
+        <ul>
+            <li><code>javascript:</code> - Evaluates an expression (has access to <code>state</code> and
+                <code>signal</code>).
+            </li>
+            <li><code>json:</code> - Sends a literal JSON string (sets <code>Content-Type: application/json</code>).
+            </li>
+            <li><code>text:</code> - Sends raw text (sets <code>Content-Type: text/plain</code>).</li>
+        </ul>
+        <pre><code>&lt;!-- Dynamic calculation --&gt;
+&lt;button href="/api/log" data-body="javascript:state.user.id"&gt;Log ID&lt;/button&gt;
+
+&lt;!-- Literal JSON --&gt;
+&lt;button href="/api/config" data-method="POST" data-body='json:{"theme": "dark"}'&gt;Set Dark Mode&lt;/button&gt;</code></pre>
+
+        <h4>GET Request Handling</h4>
+        <p>If the method is <code>GET</code>, the data provided via <code>data-body</code> is automatically converted
+            into <strong>URL Query Parameters</strong>. If multiple values are found (like in a form), all are
+            appended to the URL.</p>
+
+        <h2 id="cloning-dom-elements">Cloning DOM Elements</h2>
         <p>
             Use CSS selectors to clone existing elements:
         </p>
@@ -299,7 +369,7 @@ const app = div({ class: 'app' },
     })
 );</code></pre>
 
-        <h3>Using Plain HTML (Lightview Syntax)</h3>
+        <h3>Using Lightview Syntax</h3>
         <pre><code>&lt;div class="app"&gt;
     &lt;nav class="sidebar"&gt;
         &lt;button href="/pages/dashboard.html" target="#content"&gt;📊 Dashboard&lt;/button&gt;
@@ -309,7 +379,7 @@ const app = div({ class: 'app' },
     &lt;main id="content" src="/pages/dashboard.html"&gt;&lt;/main&gt;
 &lt;/div&gt;</code></pre>
 
-        <h3>Using HTMX</h3>
+        <h3>vs. Using HTMX</h3>
         <pre><code>&lt;div class="app"&gt;
     &lt;nav class="sidebar"&gt;
         &lt;button hx-get="/pages/dashboard.html" hx-target="#content"&gt;📊 Dashboard&lt;/button&gt;

package/docs/api/index.html

@@ -96,12 +96,12 @@
                     </td>
                 </tr>
                 <tr>
-                    <td><a href="./hypermedia.html#fetching-content"><code>src="..."</code></a></td>
+                    <td><a href="/docs/hypermedia/#fetching-content"><code>src="..."</code></a></td>
                     <td>Attribute to automatically fetch HTML or JSON representing HTML and inject it into the element.
                     </td>
                 </tr>
                 <tr>
-                    <td><a href="./hypermedia.html#href-navigation"><code>href="..."</code></a></td>
+                    <td><a href="/docs/hypermedia/#href-navigation"><code>href="..."</code></a></td>
                     <td>Attribute for SPA navigation and src injection on any element. Supports targeting content
                         before, at the start of, and the end of or after other elements via CSS selectors.</td>
                 </tr>
@@ -165,7 +165,7 @@ const { state } = LightviewX; // Deep state (lightview-x)</code></pre>
                     Add reactivity to existing HTML. Progressive enhancement made easy.
                 </p>
             </a>
-            <a href="./hypermedia.html" class="feature-card" style="text-decoration: none; color: inherit;">
+            <a href="/docs/hypermedia/" class="feature-card" style="text-decoration: none; color: inherit;">
                 <h3 class="feature-title">Hypermedia</h3>
                 <p class="feature-description">
                     Fetch content with src. HTM-style patterns, built in.

package/docs/api/nav.html

@@ -54,21 +54,5 @@
                     Validators</a>
             </div>
         </div>
-        <div class="docs-nav-item">
-            <a href="./hypermedia.html" class="docs-nav-link">Hypermedia</a>
-            <div class="docs-nav-subsection" style="margin-left: 1rem; border-left: 1px solid var(--site-border);">
-                <a href="./hypermedia.html#fetching-content" class="docs-nav-link" style="font-size: 0.85em;">Fetching
-                    Content</a>
-                <a href="./hypermedia.html#href-navigation" class="docs-nav-link" style="font-size: 0.85em;">HREF
-                    Navigation</a>
-                <a href="./hypermedia.html#event-gating" class="docs-nav-link" style="font-size: 0.85em;">Event
-                    Gating</a>
-                <a href="./hypermedia.html#template-literals" class="docs-nav-link" style="font-size: 0.85em;">Template
-                    Literals</a>
-                <a href="./hypermedia.html#shadow-dom" class="docs-nav-link" style="font-size: 0.85em;">Shadow DOM</a>
-                <a href="./hypermedia.html#htmx-style-apps" class="docs-nav-link" style="font-size: 0.85em;">HTMX-style
-                    Apps</a>
-            </div>
-        </div>
     </div>
 </nav>