lightview 2.3.8 → 2.4.4

package/index.html

@@ -32,6 +32,7 @@
             <div class="nav-links">
                 <a href="/docs/" class="nav-link">Home</a>
                 <a href="/docs/getting-started/" class="nav-link">Get Started</a>
+                <a href="/docs/hypermedia/" class="nav-link">Hypermedia</a>
                 <a href="/docs/api/" class="nav-link">API</a>
                 <a href="/docs/styles/" class="nav-link">Styles</a>
                 <a href="/docs/components/" class="nav-link">Components</a>
@@ -39,7 +40,6 @@
                 <a href="/docs/cdom.html" class="nav-link">cDOM</a>
                 <!--a href="/docs/playground/" class="nav-link">Playground</a>-->
 
-                <a href="/docs/about/" class="nav-link">About</a>
                 <a href="https://github.com/anywhichway/lightview" class="nav-link nav-link-external" target="_blank"
                     rel="noopener">
                     GitHub
@@ -49,8 +49,8 @@
                     </svg>
                 </a>
             </div>
+            <!-- Moved to components gallery per user request -->
             <div class="nav-actions">
-                <div id="theme-toggle-container"></div>
             </div>
         </nav>
 
@@ -74,8 +74,12 @@
                     <div class="footer-column">
                         <h4>Docs</h4>
                         <a href="/docs/getting-started/">Getting Started</a>
+                        <a href="/docs/hypermedia/">Hypermedia</a>
                         <a href="/docs/api/">API Reference</a>
+                        <a href="/docs/styles/">Styles</a>
                         <a href="/docs/components">Components</a>
+                        <a href="/docs/router/">Router</a>
+                        <a href="/docs/cdom.html">cDOM</a>
                     </div>
                     <div class="footer-column">
                         <h4>Resources</h4>
@@ -174,6 +178,18 @@
         // Initialize
         mobileNav.init();
 
+        // SCROLL RESTORATION: Capture clicked link IDs
+        document.addEventListener('click', (e) => {
+            const link = e.target.closest('a');
+            if (link && link.id) {
+                const currentState = history.state || {};
+                const updatedState = { ...currentState, lastClickedId: link.id };
+                history.replaceState(updatedState, '', location.href);
+            }
+        }, {
+            capture: true
+        });
+
         (async function () {
             // Initialize components with shadow DOM enabled by default
             //await LightviewX.initComponents({ shadowDefault: true });
@@ -182,14 +198,14 @@
             const contentEl = document.getElementById('content');
             const navLinks = document.querySelectorAll('.nav-link');
 
-            // Setup Theme Selector
-            const themeContainer = document.getElementById('theme-toggle-container');
-            if (themeContainer) {
+            // Theme Selector Initializer
+            globalThis.initThemeSelector = (container) => {
+                if (!container) return;
+                if (container.querySelector('select')) return; // Already initialized
+
                 const themes = ['light', 'dark', 'cupcake', 'bumblebee', 'emerald', 'corporate', 'synthwave', 'retro', 'cyberpunk', 'valentine', 'halloween', 'garden', 'forest', 'aqua', 'lofi', 'pastel', 'fantasy', 'wireframe', 'black', 'luxury', 'dracula', 'cmyk', 'autumn', 'business', 'acid', 'lemonade', 'night', 'coffee', 'winter', 'dim', 'nord', 'sunset'];
-                // Get current from document attribute (set by lightview-x auto-loader) or storage
                 const currentTheme = document.documentElement.getAttribute('data-theme') || localStorage.getItem('lightview-theme') || 'light';
 
-                // Simple select styling
                 const select = document.createElement('select');
                 Object.assign(select.style, {
                     padding: '0.25rem',
@@ -213,8 +229,11 @@
                     LightviewX.setTheme(e.target.value);
                 });
 
-                themeContainer.appendChild(select);
-            }
+                container.appendChild(select);
+            };
+
+            // Setup Theme Selector if container exists (e.g. if we add it back to header later)
+            initThemeSelector(document.getElementById('theme-toggle-container'));
 
             // Helper: Update active nav link
             function updateActiveNav(path) {
@@ -269,7 +288,35 @@
                 // On Response - called AFTER auto-render for post-render logic
                 onResponse: (response, path) => {
                     if (globalThis.closeMobileNav) globalThis.closeMobileNav(); // Ensure menu closes on navigation
-                    globalThis.scrollTo(0, 0);
+
+                    // Inject Theme Selector into Components Gallery if present
+                    const galleryHeader = contentEl.querySelector('.gallery-header');
+                    if (galleryHeader && !galleryHeader.querySelector('#theme-toggle-container')) {
+                        const container = document.createElement('div');
+                        container.id = 'theme-toggle-container';
+                        container.style.marginLeft = 'auto';
+                        galleryHeader.appendChild(container);
+                        if (globalThis.initThemeSelector) {
+                            globalThis.initThemeSelector(container);
+                        }
+                    }
+
+                    // Smart Scroll Restoration
+                    const restoreId = history.state?.lastClickedId;
+                    const targetEl = restoreId ? document.getElementById(restoreId) : null;
+                    // Check the destination PATH for a hash, not window.location (which might be stale)
+                    const hasHash = path.includes('#');
+
+                    if (targetEl) {
+                        requestAnimationFrame(() => {
+                            targetEl.scrollIntoView({
+                                block: 'center',
+                                behavior: 'smooth'
+                            });
+                        });
+                    } else if (!hasHash) {
+                        globalThis.scrollTo(0, 0);
+                    }
                 }
             });
 
@@ -284,6 +331,8 @@
             appRouter.use('/docs/components/', '/docs/components/index.html');
             appRouter.use('/docs/examples/', '/docs/examples/index.html');
             appRouter.use('/docs/router/', '/docs/router.html');
+            appRouter.use('/docs/hypermedia/', '/docs/hypermedia/index.html');
+            appRouter.use('/docs/hypermedia/index.html');
             appRouter.use('/docs/cdom.html');
 
             // Wildcard Routes - path replacement with automatic fetch

package/lightview-all.js

@@ -459,6 +459,7 @@
       tag,
       attributes,
       children,
+      isProxy: true,
       get domEl() {
         return domNode;
       }
@@ -467,6 +468,10 @@
     domToElement.set(domNode, proxy);
     return proxy;
   };
+  const someRecursive = (item, predicate) => {
+    if (Array.isArray(item)) return item.some((i) => someRecursive(i, predicate));
+    return predicate(item);
+  };
   const element = (tag, attributes = {}, children = []) => {
     if (customTags[tag]) tag = customTags[tag];
     if (typeof tag === "function") {
@@ -487,38 +492,56 @@
         }
       };
       const update = () => {
-        const flat = (Array.isArray(el.children) ? el.children : [el.children]).flat(Infinity);
-        const bits = flat.map((c) => {
+        const bits = [];
+        const walk = (c) => {
+          if (Array.isArray(c)) {
+            for (let i = 0; i < c.length; i++) walk(c[i]);
+            return;
+          }
           const val = typeof c === "function" ? c() : c;
-          if (val && typeof val === "object" && val.domEl) return val.domEl.textContent;
-          return val === null || val === void 0 ? "" : String(val);
-        });
+          if (val && typeof val === "object" && val.domEl) bits.push(val.domEl.textContent);
+          else bits.push(val === null || val === void 0 ? "" : String(val));
+        };
+        walk(el.children);
         domNode2.textContent = bits.join(" ");
       };
-      const proxy2 = new Proxy(el, {
+      const proxy = new Proxy(el, {
         set(target, prop, value) {
           target[prop] = value;
           if (prop === "children") update();
           return true;
         }
       });
-      const hasReactive = children.flat(Infinity).some((c) => typeof c === "function");
+      const hasReactive = someRecursive(children, (c) => typeof c === "function");
       if (hasReactive) {
         const runner = effect(update);
         trackEffect(domNode2, runner);
       }
       update();
-      return proxy2;
+      return proxy;
     }
     const isSVG = tag.toLowerCase() === "svg";
     const wasInSVG = inSVG;
     if (isSVG) inSVG = true;
     const domNode = inSVG ? document.createElementNS("http://www.w3.org/2000/svg", tag) : document.createElement(tag);
-    const proxy = wrapDomElement(domNode, tag, attributes, children);
-    proxy.attributes = attributes;
-    proxy.children = children;
+    const hasReactiveAttr = Object.values(attributes).some((v) => typeof v === "function");
+    const hasReactiveChild = someRecursive(children, (c) => typeof c === "function" || c && c.isProxy);
+    if (hasReactiveAttr || hasReactiveChild) {
+      const proxy = wrapDomElement(domNode, tag, attributes, children);
+      proxy.attributes = attributes;
+      proxy.children = children;
+      if (isSVG) inSVG = wasInSVG;
+      return proxy;
+    }
+    makeReactiveAttributes(attributes, domNode);
+    setupChildren(children, domNode);
     if (isSVG) inSVG = wasInSVG;
-    return proxy;
+    return {
+      tag,
+      attributes,
+      children,
+      domEl: domNode
+    };
   };
   const processComponentResult = (result) => {
     if (!result) return null;
@@ -527,7 +550,7 @@
     }
     if (result.domEl) return result;
     const type = typeof result;
-    if (type === "object" && result instanceof HTMLElement) {
+    if (type === "object" && result && result.nodeType === 1) {
       return wrapDomElement(result, result.tagName.toLowerCase(), {}, []);
     }
     if (type === "object" && result instanceof String) {
@@ -539,7 +562,7 @@
       const template = document.createElement("template");
       template.innerHTML = result.trim();
       const content = template.content;
-      if (content.childNodes.length === 1 && content.firstChild instanceof HTMLElement) {
+      if (content.childNodes.length === 1 && content.firstChild && content.firstChild.nodeType === 1) {
         const el = content.firstChild;
         return wrapDomElement(el, el.tagName.toLowerCase(), {}, []);
       } else {
@@ -584,10 +607,12 @@
       domNode.setAttribute(key, value);
     }
   };
-  const makeReactiveAttributes = (attributes, domNode) => {
+  const makeReactiveAttributes = (attributes = {}, domNode) => {
     const reactiveAttrs = {};
-    for (let [key, value] of Object.entries(attributes)) {
-      if (value && typeof value === "object" && value.__xpath__ && value.__static__) {
+    for (const key in attributes) {
+      const value = attributes[key];
+      const type = typeof value;
+      if (value && type === "object" && value.__xpath__ && value.__static__) {
         domNode.setAttribute(`data-xpath-${key}`, value.__xpath__);
         reactiveAttrs[key] = value;
         continue;
@@ -599,10 +624,9 @@
           value(domNode);
         }
       } else if (key.startsWith("on")) {
-        if (typeof value === "function") {
-          const eventName = key.slice(2).toLowerCase();
-          domNode.addEventListener(eventName, value);
-        } else if (typeof value === "string") {
+        if (type === "function") {
+          domNode.addEventListener(key.slice(2).toLowerCase(), value);
+        } else if (type === "string") {
           domNode.setAttribute(key, value);
         }
         reactiveAttrs[key] = value;
@@ -611,7 +635,8 @@
         if (processed !== void 0) {
           reactiveAttrs[key] = processed;
         } else if (key === "style") {
-          Object.entries(value).forEach(([styleKey, styleValue]) => {
+          for (const styleKey in entries) {
+            const styleValue = entries[styleKey];
             if (typeof styleValue === "function") {
               const runner = effect(() => {
                 domNode.style[styleKey] = styleValue();
@@ -620,13 +645,13 @@
             } else {
               domNode.style[styleKey] = styleValue;
             }
-          });
+          }
           reactiveAttrs[key] = value;
         } else {
           setAttributeValue(domNode, key, value);
           reactiveAttrs[key] = value;
         }
-      } else if (typeof value === "function") {
+      } else if (type === "function") {
         const runner = effect(() => {
           const result = value();
           if (key === "style" && typeof result === "object") {
@@ -650,21 +675,24 @@
     }
     const childElements = [];
     const isSpecialElement = targetNode.tagName && (targetNode.tagName.toLowerCase() === "script" || targetNode.tagName.toLowerCase() === "style");
-    const flatChildren = children.flat(Infinity);
-    for (let child of flatChildren) {
+    const walk = (child) => {
+      if (Array.isArray(child)) {
+        for (let i = 0; i < child.length; i++) walk(child[i]);
+        return;
+      }
+      if (child === null || child === void 0) return;
       if (Lightview.hooks.processChild && !isSpecialElement) {
         child = Lightview.hooks.processChild(child) ?? child;
       }
-      if (isShadowDOMMarker(child)) {
-        if (targetNode instanceof ShadowRoot) {
-          console.warn("Lightview: Cannot nest shadowDOM inside another shadowDOM");
-          continue;
-        }
-        processShadowDOM(child, targetNode);
-        continue;
-      }
       const type = typeof child;
-      if (type === "function") {
+      if (child && type === "object" && child.tag) {
+        const childEl = child.domEl ? child : element(child.tag, child.attributes || {}, child.children || []);
+        targetNode.appendChild(childEl.domEl);
+        childElements.push(childEl);
+      } else if (["string", "number", "boolean", "symbol"].includes(type) || child && type === "object" && child instanceof String) {
+        targetNode.appendChild(document.createTextNode(child));
+        childElements.push(child);
+      } else if (type === "function") {
         const startMarker = document.createComment("lv:s");
         const endMarker = document.createComment("lv:e");
         targetNode.appendChild(startMarker);
@@ -693,17 +721,9 @@
         runner = effect(update);
         trackEffect(startMarker, runner);
         childElements.push(child);
-      } else if (child && typeof child === "object" && child.__xpath__ && child.__static__) {
-        const textNode = document.createTextNode("");
-        textNode.__xpathExpr = child.__xpath__;
-        targetNode.appendChild(textNode);
-        childElements.push(child);
-      } else if (["string", "number", "boolean", "symbol"].includes(type) || child && type === "object" && child instanceof String) {
-        targetNode.appendChild(document.createTextNode(child));
-        childElements.push(child);
       } else if (child instanceof Node) {
         const node = child.domEl || child;
-        if (node instanceof HTMLElement || node instanceof SVGElement) {
+        if (node.nodeType === 1) {
           const wrapped = wrapDomElement(node, node.tagName.toLowerCase());
           targetNode.appendChild(node);
           childElements.push(wrapped);
@@ -711,12 +731,20 @@
           targetNode.appendChild(node);
           childElements.push(child);
         }
-      } else if (child && type === "object" && child.tag) {
-        const childEl = child.domEl ? child : element(child.tag, child.attributes || {}, child.children || []);
-        targetNode.appendChild(childEl.domEl);
-        childElements.push(childEl);
+      } else if (isShadowDOMMarker(child)) {
+        if (targetNode instanceof ShadowRoot) {
+          console.warn("Lightview: Cannot nest shadowDOM inside another shadowDOM");
+          return;
+        }
+        processShadowDOM(child, targetNode);
+      } else if (child && typeof child === "object" && child.__xpath__ && child.__static__) {
+        const textNode = document.createTextNode("");
+        textNode.__xpathExpr = child.__xpath__;
+        targetNode.appendChild(textNode);
+        childElements.push(child);
       }
-    }
+    };
+    walk(children);
     return childElements;
   };
   const setupChildrenInTarget = (children, targetNode) => {
@@ -728,7 +756,7 @@
   const enhance = (selectorOrNode, options = {}) => {
     const domNode = typeof selectorOrNode === "string" ? document.querySelector(selectorOrNode) : selectorOrNode;
     const node = domNode.domEl || domNode;
-    if (!(node instanceof HTMLElement)) return null;
+    if (!node || node.nodeType !== 1) return null;
     const tagName = node.tagName.toLowerCase();
     let el = domToElement.get(node);
     if (!el) {
@@ -820,8 +848,6 @@
     }
   });
   const Lightview = {
-    state: state$1,
-    getState,
     registerSchema: (name, definition) => internals.schemas.set(name, definition),
     signal: signal$1,
     get: signal$1.get,
@@ -1278,16 +1304,92 @@
     executeScripts(target);
   };
   const isPath = (s) => typeof s === "string" && !isDangerousProtocol(s) && /^(https?:|\.|\/|[\w])|(\.(html|json|[vo]dom|cdomc?))$/i.test(s);
-  const fetchContent = async (src) => {
+  const getRequestInfo = (el) => {
+    const domEl = el.domEl || el;
+    const method = (domEl.getAttribute("data-method") || "GET").toUpperCase();
+    const bodyAttr = domEl.getAttribute("data-body");
+    let body = null;
+    let headers = {};
+    if (bodyAttr) {
+      if (bodyAttr.startsWith("javascript:")) {
+        const expr = bodyAttr.slice(11);
+        const LV = globalThis.Lightview;
+        try {
+          body = new Function("state", "signal", `return ${expr}`)(LV.state || {}, LV.signal || {});
+        } catch (e) {
+          console.warn(`[LightviewX] Failed to evaluate data-body expression: ${expr}`, e);
+        }
+      } else if (bodyAttr.startsWith("json:")) {
+        try {
+          body = JSON.parse(bodyAttr.slice(5));
+          headers["Content-Type"] = "application/json";
+        } catch (e) {
+          console.warn(`[LightviewX] Failed to parse data-body JSON: ${bodyAttr.slice(5)}`, e);
+        }
+      } else if (bodyAttr.startsWith("text:")) {
+        body = bodyAttr.slice(5);
+        headers["Content-Type"] = "text/plain";
+      } else {
+        try {
+          const target = document.querySelector(bodyAttr);
+          if (target) {
+            if (target.tagName === "FORM") {
+              body = new FormData(target);
+            } else if (["INPUT", "SELECT", "TEXTAREA"].includes(target.tagName)) {
+              const name = target.getAttribute("name") || "body";
+              body = { [name]: target.value };
+            } else {
+              body = target.innerText;
+            }
+          }
+        } catch (e) {
+          body = bodyAttr;
+        }
+      }
+    }
+    return { method, body, headers };
+  };
+  const fetchContent = async (src, requestOptions = {}) => {
     var _a2;
+    const { method = "GET", body = null, headers = {} } = requestOptions;
     try {
       const LV = globalThis.Lightview;
       if (((_a2 = LV == null ? void 0 : LV.hooks) == null ? void 0 : _a2.validateUrl) && !LV.hooks.validateUrl(src)) {
         console.warn(`[LightviewX] Fetch blocked by validateUrl hook: ${src}`);
         return null;
       }
-      const url = new URL(src, document.baseURI);
-      const res = await fetch(url);
+      let url = new URL(src, document.baseURI);
+      const fetchOptions = { method, headers: { ...headers } };
+      if (body) {
+        if (method === "GET") {
+          const params = new URLSearchParams(url.search);
+          if (body instanceof FormData) {
+            for (const [key, value] of body.entries()) params.append(key, value);
+          } else if (typeof body === "object" && body !== null) {
+            for (const [key, value] of Object.entries(body)) params.append(key, String(value));
+          } else {
+            params.append("body", String(body));
+          }
+          const queryString = params.toString();
+          if (queryString) {
+            url = new URL(`${url.origin}${url.pathname}?${queryString}${url.hash}`, url.origin);
+          }
+        } else {
+          if (body instanceof FormData) {
+            fetchOptions.body = body;
+          } else if (typeof body === "object" && body !== null) {
+            if (headers["Content-Type"] === "application/json" || !headers["Content-Type"]) {
+              fetchOptions.body = JSON.stringify(body);
+              fetchOptions.headers["Content-Type"] = "application/json";
+            } else {
+              fetchOptions.body = String(body);
+            }
+          } else {
+            fetchOptions.body = String(body);
+          }
+        }
+      }
+      const res = await fetch(url, fetchOptions);
       if (!res.ok) return null;
       const ext = url.pathname.split(".").pop().toLowerCase();
       const isJson = ext === "vdom" || ext === "odom" || ext === "cdom";
@@ -1345,8 +1447,12 @@
     }
   };
   const updateTargetContent = (el, elements, raw, loc, contentHash, options, targetHash = null) => {
-    var _a2;
-    const { element: element2, setupChildren: setupChildren2, saveScrolls: saveScrolls2, restoreScrolls: restoreScrolls2 } = { ...options, ...(_a2 = globalThis.Lightview) == null ? void 0 : _a2.internals };
+    var _a2, _b2;
+    const { element: element2, setupChildren: setupChildren2, saveScrolls: saveScrolls2, restoreScrolls: restoreScrolls2 } = {
+      element: (_a2 = globalThis.Lightview) == null ? void 0 : _a2.element,
+      ...(_b2 = globalThis.Lightview) == null ? void 0 : _b2.internals,
+      ...options
+    };
     const markerId = `${loc}-${contentHash.slice(0, 8)}`;
     let track = getOrSet(insertedContentMap, el.domEl, () => ({}));
     if (track[loc]) removeInsertedContent(el.domEl, `${loc}-${track[loc].slice(0, 8)}`);
@@ -1392,7 +1498,8 @@
       if (src.includes("#")) {
         [src, targetHash] = src.split("#");
       }
-      const result = await fetchContent(src);
+      const options = getRequestInfo(el);
+      const result = await fetchContent(src, options);
       if (result) {
         elements = parseElements(result.content, result.isJson, result.isHtml, el, element2, result.isCdom, result.ext);
         raw = result.raw;
@@ -1443,7 +1550,7 @@
     }
     return { selector: targetStr, location: null };
   };
-  const handleNonStandardHref = (e, { domToElement: domToElement2, wrapDomElement: wrapDomElement2 }) => {
+  const handleNonStandardHref = async (e, { domToElement: domToElement2, wrapDomElement: wrapDomElement2 }) => {
     var _a2;
     const clickedEl = e.target.closest("[href]");
     if (!clickedEl) return;
@@ -1457,6 +1564,7 @@
       return;
     }
     const targetAttr = clickedEl.getAttribute("target");
+    const options = getRequestInfo(clickedEl);
     if (!targetAttr) {
       let el = domToElement2.get(clickedEl);
       if (!el) {
@@ -1469,6 +1577,9 @@
       return;
     }
     if (targetAttr.startsWith("_")) {
+      if (options.method !== "GET") {
+        console.warn("[LightviewX] Cannot use non-GET method for browser navigation (_blank, _top, etc.)");
+      }
       switch (targetAttr) {
         case "_self":
           globalThis.location.href = href;
@@ -1489,6 +1600,11 @@
     const { selector, location } = parseTargetWithLocation(targetAttr);
     try {
       const targetElements = document.querySelectorAll(selector);
+      if (targetElements.length === 0) return;
+      const result = await fetchContent(href, options);
+      if (!result) return;
+      const { setupChildren: setupChildren2 } = LV.internals;
+      const element2 = LV.element;
       targetElements.forEach((targetEl) => {
         let el = domToElement2.get(targetEl);
         if (!el) {
@@ -1496,14 +1612,14 @@
           for (let attr of targetEl.attributes) attrs[attr.name] = attr.value;
           el = wrapDomElement2(targetEl, targetEl.tagName.toLowerCase(), attrs);
         }
-        const newAttrs = { ...el.attributes, src: href };
-        if (location) {
-          newAttrs.location = location;
-        }
-        el.attributes = newAttrs;
+        const elements = parseElements(result.content, result.isJson, result.isHtml, el, element2, result.isCdom, result.ext);
+        const loc = (location || targetEl.getAttribute("location") || "innerhtml").toLowerCase();
+        const contentHash = hashContent(result.raw);
+        updateTargetContent(el, elements, result.raw, loc, contentHash, { element: element2, setupChildren: setupChildren2 });
+        targetEl.setAttribute("src", href);
       });
     } catch (err) {
-      console.warn("Invalid target selector:", selector, err);
+      console.warn("Invalid target selector or fetch error:", selector, err);
     }
   };
   const gateStates = /* @__PURE__ */ new WeakMap();
@@ -1775,6 +1891,8 @@
   };
   if (typeof window !== "undefined" && globalThis.Lightview) {
     const LV = globalThis.Lightview;
+    LV.state = state$1;
+    LV.getState = getState;
     if (document.readyState === "loading") {
       document.addEventListener("DOMContentLoaded", () => setupSrcObserver(LV));
     } else {
@@ -2130,8 +2248,24 @@
     }
     if (globalThis.Lightview) globalThis.Lightview.validate = validateJSONSchema;
   }
+  const request = async (el) => {
+    const domEl = el.domEl || el;
+    const href = domEl.getAttribute("href");
+    if (!href) return;
+    return handleNonStandardHref({
+      target: domEl,
+      preventDefault: () => {
+      },
+      stopPropagation: () => {
+      }
+    }, {
+      domToElement: globalThis.Lightview.internals.domToElement,
+      wrapDomElement: globalThis.Lightview.internals.wrapDomElement
+    });
+  };
   const LightviewX = {
     state: state$1,
+    getState,
     themeSignal,
     setTheme,
     registerStyleSheet,
@@ -2139,6 +2273,28 @@
     // Gate modifiers
     throttle: gateThrottle,
     debounce: gateDebounce,
+    // Hypermedia Actions
+    request,
+    get: (el, url) => {
+      if (url) el.setAttribute("href", url);
+      el.setAttribute("data-method", "GET");
+      return request(el);
+    },
+    post: (el, url) => {
+      if (url) el.setAttribute("href", url);
+      el.setAttribute("data-method", "POST");
+      return request(el);
+    },
+    put: (el, url) => {
+      if (url) el.setAttribute("href", url);
+      el.setAttribute("data-method", "PUT");
+      return request(el);
+    },
+    delete: (el, url) => {
+      if (url) el.setAttribute("href", url);
+      el.setAttribute("data-method", "DELETE");
+      return request(el);
+    },
     // Component initialization
     initComponents,
     componentConfig,
@@ -2153,6 +2309,7 @@
       parseElements
     }
   };
+  if (globalThis.Lightview) globalThis.Lightview.request = request;
   if (typeof module !== "undefined" && module.exports) {
     module.exports = LightviewX;
   }
@@ -6011,10 +6168,9 @@
     try {
       validateXPath(xpath);
       const doc = globalThis.document || node.ownerDocument;
-      const contextNode = node.parentNode || node;
       const result = doc.evaluate(
         xpath,
-        contextNode,
+        node,
         null,
         XPathResult.STRING_TYPE,
         null

package/lightview-cdom.js

@@ -3857,10 +3857,9 @@ var LightviewCDOM = function(exports) {
     try {
       validateXPath(xpath);
       const doc = globalThis.document || node.ownerDocument;
-      const contextNode = node.parentNode || node;
       const result = doc.evaluate(
         xpath,
-        contextNode,
+        node,
         null,
         XPathResult.STRING_TYPE,
         null