lightview 2.3.7 → 2.4.4

package/docs/hypermedia/index.html

@@ -0,0 +1,391 @@
+<!-- SEO-friendly SPA Shim -->
+<script src="/lightview-router.js?base=/index.html"></script>
+
+<div class="docs-layout">
+    <aside class="docs-sidebar" src="/docs/hypermedia/nav.html" data-preserve-scroll="docs-nav"></aside>
+
+    <main class="docs-content">
+        <h1>Hypermedia</h1>
+        <p>
+            HTMX-style patterns, built right in. Load HTML fragments, fetch vDOM/Object DOM, clone templates - all with
+            the
+            <code>src</code> and <code>href</code> attributes.
+            <em>Requires lightview-x.js</em>
+        </p>
+        <p>
+            If you look at the source for the navigation to the left, you will see that this page is built using a
+            hypermedia approach.
+        </p>
+
+        <h2 id="fetching-content">Fetching Content</h2>
+        <h3 id="html">HTML</h3>
+        <p>
+            Point <code>src</code> at an HTML file and Lightview loads it as children:
+        </p>
+        <pre><code>&lt;!-- Load HTML partials into specific elements --&gt;
+&lt;div&gt;
+    &lt;header src="/partials/nav.html"&gt;&lt;/header&gt;
+    &lt;main src="/partials/content.html"&gt;&lt;/main&gt;
+&lt;/div&gt;
+
+&lt;!-- The HTML is fetched, parsed, and made reactive automatically! --&gt;</code></pre>
+
+        <p>
+            By default, Lightview enforces a <strong>Same-Domain security policy</strong> for all remote fetches.
+            Content can only be fetched from the same domain or its subdomains. External domains are blocked to prevent
+            Cross-Site Scripting (XSS) and unauthorized data ingestion. Different ports on the same host (e.g.,
+            localhost:3000 and localhost:4000) are <strong>allowed</strong> by default.
+        </p>
+        <p>
+            <strong>Relative Paths:</strong> Any URL that does not specify a protocol (e.g., <code>./data.html</code>,
+            <code>/api/user</code>) is automatically considered valid. This ensures reliability in sandboxed
+            environments (like iframes) where the global origin might be reported as <code>null</code>.
+        </p>
+
+        <h4>Controlling Access with validateUrl</h4>
+        <p>
+            You can customize or disable this security policy using the <code>validateUrl</code> hook. This hook is
+            checked before any <code>src</code> fetch or non-standard <code>href</code> navigation.
+        </p>
+
+        <pre><code>// Allow specific external CDNs
+Lightview.hooks.validateUrl = (url) => {
+    const target = new URL(url, location.origin);
+    const allowed = ['trusted-api.com', 'cdn.content.org', 'localhost'];
+    return allowed.includes(target.hostname) || target.hostname.endsWith('.mysite.com');
+};
+
+// Disable security (Not recommended for production)
+Lightview.hooks.validateUrl = () => true;</code></pre>
+
+        <h4>Dangerous Protocol Blocking</h4>
+        <p>
+            Lightview automatically blocks dangerous URI protocols in <code>src</code> and <code>href</code> attributes,
+            including <code>javascript:</code>, <code>vbscript:</code>, and certain <code>data:</code> types. If a
+            dangerous protocol is detected, the action is cancelled and a warning is logged to the console.
+        </p>
+
+        <h3 id="vdom-object-dom">vDOM and Object DOM</h3>
+        <p>
+            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
+[
+    { "tag": "div", "attributes": { "class": "card" }, "children": ["Card 1"] },
+    { "tag": "div", "attributes": { "class": "card" }, "children": ["Card 2"] }
+]
+
+// Load vDOM
+div({ src: '/api/cards.vdom' })
+
+// 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>&lt;!-- Send a DELETE request --&gt;
+&lt;button href="/api/items/123" data-method="DELETE" target="#status-log"&gt;
+    Delete Item
+&lt;/button&gt;</code></pre>
+
+        <h3>2. Request Bodies</h3>
+        <p>Use <code>data-body</code> to send data. The prefixes <code>css:</code>, <code>json:</code>, and
+            <code>text:</code> can be used to control exactly how the body is constructed. 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>
+        <pre><code>// Clone a template
+div({ src: '#my-template' })
+
+// Clone multiple elements
+div({ src: '.card-template' })</code></pre>
+        <pre><code>&lt;!-- Hidden template in HTML --&gt;
+&lt;template id="my-template"&gt;
+    &lt;div class="modal"&gt;
+        &lt;h2&gt;Modal Title&lt;/h2&gt;
+        &lt;p&gt;Modal content here&lt;/p&gt;
+    &lt;/div&gt;
+&lt;/template&gt;</code></pre>
+
+        <h2 id="href-navigation">HREF Navigation</h2>
+        <p>
+            Add <code>href</code> to any element to make it interactive. The behavior depends on the <code>target</code>
+            attribute:
+        </p>
+        <p><strong>Note:</strong> The same <a href="#fetching-content">src Fetch Security</a> controls (same-domain
+            policy
+            and protocol
+            blocking) apply to all interactive <code>href</code> navigations.</p>
+
+        <h3>1. Self-Loading (Default)</h3>
+        <p>If no target is specified, clicking sets the element's own <code>src</code> to the <code>href</code> value:
+        </p>
+        <pre><code>// Loads content into itself on click
+button({ href: '/partials/data.html' }, 'Load Data')</code></pre>
+
+        <h3>2. Browser Navigation</h3>
+        <p>Use standard underscore targets for window navigation:</p>
+        <pre><code>// Opens new tab
+button({ href: 'https://example.com', target: '_blank' }, 'Open External')
+
+// Navigates current page
+div({ href: '/home', target: '_self' }, 'Go Home')</code></pre>
+
+        <h3>3. Targeting Other Elements</h3>
+        <p>Use a CSS selector as the target to load content into other elements:</p>
+        <pre><code>// Loads content into element with id="main"
+button({ href: '/pages/about.html', target: '#main' }, 'Load About Page')
+
+div({ id: 'main' }) // Content appears here</code></pre>
+
+        <h3>4. Positioning Content</h3>
+        <p>Control where content is inserted using the <code>location</code> attribute or a target suffix.</p>
+        <p><strong>Supported locations:</strong> <code>innerhtml</code> (default), <code>outerhtml</code>,
+            <code>beforebegin</code>, <code>afterbegin</code>, <code>beforeend</code>, <code>afterend</code>,
+            <code>shadow</code>.
+        </p>
+
+        <pre><code>// Option A: Suffix syntax for href (Target Selector:Location)
+button({ 
+    href: '/partials/item.html', 
+    target: '#list:beforeend' // Append to list
+}, 'Add Item')
+
+// Option B: Explicit attribute on target for src
+div({ 
+    src: '/partials/banner.html', 
+    location: 'afterbegin' 
+})</code></pre>
+
+        <p><strong>Smart Replacement:</strong> Lightview tracks inserted content. Fetching the same content to the same
+            location is a no-op. Fetching different content replaces the previous content at that specific location.</p>
+
+        <h3>5. Hash Scrolling</h3>
+        <p>If an <code>href</code> or <code>src</code> includes a hash (e.g., <code>/page.html#section-1</code>),
+            Lightview will automatically
+            attempt to scroll to the element with that ID after the content is loaded and injected. This works for both
+            standard document targets and Shadow DOM targets (where it searches within the specific
+            <code>shadowRoot</code>).
+        </p>
+        <pre><code>// Scrolls to #details within the loaded content
+button({ href: '/api/items.html#details', target: '#content' }, 'View Details')</code></pre>
+
+        <h2 id="event-gating">Declarative Event Gating (lv-before)</h2>
+        <p>
+            The <code>lv-before</code> attribute provides a declarative way to intercept, filter, and modify events
+            <em>before</em> they reach your standard handlers (like <code>onclick</code>) or trigger native browser
+            behavior.
+        </p>
+        <div class="alert alert-info">
+            <p>
+                <strong>Important:</strong> Custom gating functions must be defined in the <code>globalThis</code> scope
+                (e.g., <code>window.myGate = ...</code>) to be accessible to the declarative parser.
+            </p>
+        </div>
+
+        <h3>1. Selection & Exclusions</h3>
+        <p>You must specify which events to gate by name, or use <code>*</code> to gate all common (sensible) UI and
+            form events. You can
+            also exclude specific events:</p>
+        <pre><code>&lt;!-- Gate only clicks --&gt;
+&lt;button lv-before="click myGate()"&gt;Click Me&lt;/button&gt;
+
+&lt;!-- Gate all common events EXCEPT keyboard events --&gt;
+&lt;div lv-before="* !keydown !keyup logInteraction()"&gt;...&lt;/div&gt;</code></pre>
+
+        <h3>2. Rate Limiting (Throttle & Debounce)</h3>
+        <p>Lightview-X provides built-in "Gate Modifiers" for common timing patterns. These return <code>true</code>
+            only when the timing condition is met, effectively filtering the event stream.</p>
+        <pre><code>&lt;!-- Prevent button spam (only 1 click per second) --&gt;
+&lt;button lv-before="click throttle(1000)" onclick="saveData()"&gt;Save&lt;/button&gt;
+
+&lt;!-- Wait for 500ms of silence before processing input --&gt;
+&lt;input lv-before="input debounce(500)" oninput="search(this.value)"&gt;</code></pre>
+
+        <h3>3. Sequence & Async Pipelines</h3>
+        <p>You can chain multiple gates in a space-separated list. They execute sequentially and can be asynchronous.
+            If any function returns <code>false</code>, <code>null</code>, or <code>undefined</code>, the entire event
+            is aborted.</p>
+        <p><strong>Parsing Note:</strong> Expressions are fundamentally space-separated. However, spaces within single
+            quotes (<code>'</code>), double quotes (<code>"</code>), or parentheses (<code>()</code>) are preserved.
+            This allows you to pass strings with spaces to your gate functions, such as confirmation messages.</p>
+        <pre><code>&lt;!-- Chained: Throttled first, then a confirmation --&gt;
+&lt;button lv-before="click throttle(2000) confirm('Really delete?')" 
+        onclick="doDelete()"&gt;Delete&lt;/button&gt;</code></pre>
+
+        <h3>4. Context & Arguments</h3>
+        <p>Inside an <code>lv-before</code> expression, <code>this</code> refers to the current element. You can pass
+            the
+            native
+            <code>event</code> object, as well as <code>state</code> and <code>signal</code> registries, to your
+            custom gate functions.
+        </p>
+        <pre><code>&lt;!-- Pass event to a custom logic function --&gt;
+&lt;button lv-before="click validateClick(event)" onclick="proceed()"&gt;...&lt;/button&gt;</code></pre>
+
+        <h2 id="template-literals">Template Literals</h2>
+        <p>
+            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');
+const userName = signal('Guest', 'userName');
+const userPrefs = state({ theme: 'dark', lang: 'en' }, 'userPrefs');
+
+// Load template that uses them
+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;
+    &lt;p&gt;You have ${signal.get('count').value} notifications.&lt;/p&gt;
+    &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
+            <code>:shadow</code> suffix:
+        </p>
+        <pre><code>// Option A: location attribute
+div({ src: '/components/widget.html', location: 'shadow' })
+
+// Option B: target suffix
+button({ href: '/components/widget.html', target: '#container:shadow' }, 'Load Widget')</code></pre>
+
+        <h2 id="htmx-style-apps">HTMX-style Apps</h2>
+        <p>
+            Combine <code>src</code> and <code>href</code> for hypermedia-driven UIs. You can use <code>lv-before</code>
+            for confirmation or validation before navigation.
+        </p>
+
+        <h3>Using Tag Functions</h3>
+        <pre><code>const { tags } = Lightview;
+const { div, nav, button, main } = tags;
+
+const app = div({ class: 'app' },
+    nav({ class: 'sidebar' },
+        button({ 
+            href: '/pages/dashboard.html', 
+            target: '#content' 
+        }, '📊 Dashboard'),
+        button({ 
+            href: '/pages/settings.html', 
+            target: '#content',
+            'lv-before': "click confirm('Go to settings?')" // Event gate
+        }, '⚙️ Settings')
+    ),
+    main({ 
+        id: 'content',
+        src: '/pages/dashboard.html'  // Initial content
+    })
+);</code></pre>
+
+        <h3>Using Ligthview Plain HTML</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;
+        &lt;button href="/pages/settings.html" target="#content" 
+                lv-before="click confirm('Go to settings?')"&gt;⚙️ Settings&lt;/button&gt;
+    &lt;/nav&gt;
+    &lt;main id="content" src="/pages/dashboard.html"&gt;&lt;/main&gt;
+&lt;/div&gt;</code></pre>
+
+        <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;
+        &lt;button hx-get="/pages/settings.html" hx-target="#content" 
+                hx-confirm="Go to settings?"&gt;⚙️ Settings&lt;/button&gt;
+    &lt;/nav&gt;
+    &lt;main id="content" hx-get="/pages/dashboard.html" hx-trigger="load"&gt;&lt;/main&gt;
+&lt;/div&gt;</code></pre>
+
+
+    </main>
+</div>

package/docs/hypermedia/nav.html

@@ -0,0 +1,17 @@
+<nav data-preserve-scroll="docs-nav" class="docs-nav">
+    <div class="docs-nav-section">
+        <div class="docs-nav-title">Hypermedia</div>
+        <a href="#fetching-content" class="docs-nav-link">Fetching Content</a>
+        <div class="docs-nav-subsection" style="margin-left: 1rem; border-left: 1px solid var(--site-border);">
+            <a href="#html" class="docs-nav-link" style="font-size: 0.85em;">HTML</a>
+            <a href="#vdom-object-dom" class="docs-nav-link" style="font-size: 0.85em;">vDOM & oDOM</a>
+        </div>
+        <a href="#advanced-fetches" class="docs-nav-link">Advanced Fetches</a>
+        <a href="#cloning-dom-elements" class="docs-nav-link">Cloning DOM Elements</a>
+        <a href="#href-navigation" class="docs-nav-link">HREF Navigation</a>
+        <a href="#event-gating" class="docs-nav-link">Event Gating (lv-before)</a>
+        <a href="#template-literals" class="docs-nav-link">Template Literals</a>
+        <a href="#shadow-dom" class="docs-nav-link">Shadow DOM</a>
+        <a href="#htmx-style-apps" class="docs-nav-link">HTMX-style Apps</a>
+    </div>
+</nav>

package/docs/index.html

@@ -9,9 +9,13 @@
         <p class="hero-tagline">Reactive UI's done light</p>
         <p class="hero-description">
             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
+                Safe</a>
         </p>
         <div class="hero-actions">
-            <a href="./getting-started/" class="btn btn-primary btn-lg">Get Started</a>
+            <a id="link-hero-get-started" href="./getting-started/" class="btn btn-primary btn-lg">Get Started</a>
         </div>
         <div class="hero-stats">
             <div class="hero-stat">
@@ -40,76 +44,182 @@
             </p>
         </div>
         <div class="feature-grid">
-            <a href="./api/signals.html" class="feature-card" style="text-decoration: none; color: inherit;">
+            <div 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 class="feature-title">Signals and Object State Reactivity</h3>
+                <h3><a id="link-feature-signals" href="./api/signals.html" class="feature-title">Signals and Object
+                        State Reactivity</a></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.
                 </p>
-            </a>
-            <a href="./api/elements.html" class="feature-card" style="text-decoration: none; color: inherit;">
+            </div>
+            <div 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 class="feature-title">Multiple Syntaxes</h3>
+                <h3><a id="link-feature-elements" href="./api/elements.html" class="feature-title">Multiple Syntaxes</a>
+                </h3>
                 <p class="feature-description">
                     Tagged API, vDOM, Object DOM, HTML. Pick your style—they all work together.
                 </p>
-            </a>
-            <a href="./api/hypermedia.html" class="feature-card" style="text-decoration: none; color: inherit;">
+            </div>
+            <div 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 class="feature-title">Hypermedia Ready</h3>
+                <h3><a id="link-feature-hypermedia" href="/docs/hypermedia/" class="feature-title">Hypermedia
+                        Ready</a></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>
-            </a>
-            <a href="./components/index.html" class="feature-card" style="text-decoration: none; color: inherit;">
+            </div>
+            <div 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 class="feature-title">Component Library</h3>
+                <h3><a id="link-feature-components" href="./components/index.html" class="feature-title">Component
+                        Library</a></h3>
                 <p class="feature-description">
                     Beautiful, accessible components ready to use. Buttons, modals, forms, charts, and more.
                 </p>
-            </a>
-            <a href="./getting-started/index.html" class="feature-card" style="text-decoration: none; color: inherit;">
+            </div>
+            <div 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 class="feature-title">Zero Build Step</h3>
+                <h3><a id="link-feature-zerobuild" href="./getting-started/index.html" class="feature-title">Zero Build
+                        Step</a></h3>
                 <p class="feature-description">
                     No bundler required. Drop in a script tag and start building. Works everywhere.
                 </p>
-            </a>
+            </div>
 
         </div>
     </div>
 </section>
 
+<!-- AI Catch Section -->
+<section class="section" id="ai-safe">
+    <div class="section-content"
+        style="background: linear-gradient(135deg, #1a1c2c 0%, #4a1942 100%); color: white; border-radius: 2rem; padding: 4rem 2rem; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden;">
+        <!-- Glowing background elements -->
+        <div
+            style="position: absolute; top: -20%; left: -10%; width: 50%; height: 140%; background: radial-gradient(circle, rgba(138, 43, 226, 0.2) 0%, transparent 70%); filter: blur(60px); pointer-events: none;">
+        </div>
+        <div
+            style="position: absolute; bottom: -20%; right: -10%; width: 50%; height: 140%; background: radial-gradient(circle, rgba(255, 20, 147, 0.15) 0%, transparent 70%); filter: blur(60px); pointer-events: none;">
+        </div>
 
+        <div style="position: relative; z-index: 1;">
+            <div class="section-header">
+                <h2 class="section-title" style="color: white; font-size: 2.5rem;">The AI-Safe UI Engine</h2>
+                <p class="section-subtitle" style="color: rgba(255, 255, 255, 0.85); max-width: 800px; margin: 0 auto;">
+                    Lightview's <strong>cDOM</strong> and <strong>JPRX</strong> are purpose-built for the era of
+                    AI-driven development, providing a safe, standard-based foundation for agentic UI generation.
+                </p>
+            </div>
+
+            <div
+                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2.5rem; margin-top: 3.5rem;">
+                <div
+                    style="background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1.5rem; padding: 2.5rem; transition: transform 0.3s ease;">
+                    <div
+                        style="width: 48px; height: 48px; background: rgba(138, 43, 226, 0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;">
+                        <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#a78bfa" stroke-width="2">
+                            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+                        </svg>
+                    </div>
+                    <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"
+                            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
+                            access to global JavaScript context</strong>. When used in conjunction with <a
+                            id="link-ai-safe-hypermedia" href="/docs/hypermedia/"
+                            style="color: #a78bfa; text-decoration: underline; font-weight: 600;">Lightview hypermedia
+                            support</a>, it strictly limits security exposure.</p>
+                </div>
+
+                <div
+                    style="background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1.5rem; padding: 2.5rem; transition: transform 0.3s ease;">
+                    <div
+                        style="width: 48px; height: 48px; background: rgba(255, 20, 147, 0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;">
+                        <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#fb7185" stroke-width="2">
+                            <path d="M7 21h10M12 21V3m0 0l-5 5m5-5l5 5" />
+                        </svg>
+                    </div>
+                    <h3 style="color: white; font-size: 1.5rem; margin-bottom: 1rem;">Standards-First Design</h3>
+                    <p style="color: rgba(255, 255, 255, 0.75); line-height: 1.6;"><a id="link-ai-safe-cdom"
+                            href="/docs/cdom.html"
+                            style="color: #fb7185; text-decoration: underline; font-weight: 600;">cDOM</a>
+                        (Computational DOM) and <a id="link-ai-safe-jprx" href="/docs/cdom.html#JPRX"
+                            style="color: #fb7185; text-decoration: underline; font-weight: 600;">JPRX</a> (JSON Pointer
+                        Reactive eXpressions) built based on <a id="link-ai-safe-json-pointers"
+                            href="https://datatracker.ietf.org/doc/html/rfc6901" target="_blank"
+                            style="color: #fb7185; text-decoration: underline; font-weight: 600;">JSON
+                            Pointers</a> (RFC 6901), <a id="link-ai-safe-json-schema" href="https://json-schema.org/"
+                            target="_blank" style="color: #fb7185; text-decoration: underline; font-weight: 600;">JSON
+                            Schema</a>, and
+                        <a id="link-ai-safe-xpath" href="https://www.w3.org/TR/xpath/" target="_blank"
+                            style="color: #fb7185; text-decoration: underline; font-weight: 600;">XPath</a>. AI agents
+                        describe complex relationships through proven standards and path languages, not imperative
+                        logic.
+                    </p>
+                </div>
+
+                <div
+                    style="background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1.5rem; padding: 2.5rem; transition: transform 0.3s ease;">
+                    <div
+                        style="width: 48px; height: 48px; background: rgba(56, 189, 248, 0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;">
+                        <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#38bdf8" stroke-width="2">
+                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                            <polyline points="14 2 14 8 20 8"></polyline>
+                            <line x1="16" y1="13" x2="8" y2="13"></line>
+                            <line x1="16" y1="17" x2="8" y2="17"></line>
+                            <polyline points="10 9 9 9 8 9"></polyline>
+                        </svg>
+                    </div>
+                    <h3 style="color: white; font-size: 1.5rem; margin-bottom: 1rem;">Context for Agents</h3>
+                    <p style="color: rgba(255, 255, 255, 0.75); line-height: 1.6;">
+                        Accelerate development by pointing your AI assistant to the
+                        <a id="link-ai-safe-guidance" href="/AI-GUIDANCE.md" target="_blank"
+                            style="color: #38bdf8; text-decoration: underline; font-weight: 600;">AI Guidance
+                            Manual</a>.
+                        A definitive implementation guide optimized for LLM consumption.
+                    </p>
+                </div>
+            </div>
+
+            <div style="text-align: center; margin-top: 4rem;">
+                <a id="link-ai-safe-cta" href="/docs/cdom.html" class="btn btn-primary btn-lg"
+                    style="background: white; color: #1a1c2c; border: none; font-weight: 600;">
+                    Unleash the Power of cDOM
+                </a>
+            </div>
+        </div>
+    </div>
+</section>
 
-<!-- Call to Action -->
 <section class="section">
     <div class="section-content">
         <div class="section-header">
@@ -119,7 +229,7 @@
             </p>
         </div>
         <div style="text-align: center;">
-            <a href="/docs/getting-started/" class="btn btn-primary btn-lg">Enlighten Your UI</a>
+            <a id="link-footer-cta" href="/docs/getting-started/" class="btn btn-primary btn-lg">Enlighten Your UI</a>
         </div>
     </div>
 </section>