lightview 2.2.2 → 2.3.4

package/lightview-all.js

@@ -1,29 +1,48 @@
 (function() {
   "use strict";
+  var _a, _b;
   const _LV = globalThis.__LIGHTVIEW_INTERNALS__ || (globalThis.__LIGHTVIEW_INTERNALS__ = {
     currentEffect: null,
     registry: /* @__PURE__ */ new Map(),
-    dependencyMap: /* @__PURE__ */ new WeakMap()
-    // Tracking signals -> subscribers
+    // Global name -> Signal/Proxy
+    localRegistries: /* @__PURE__ */ new WeakMap(),
+    // Object/Element -> Map(name -> Signal/Proxy)
+    futureSignals: /* @__PURE__ */ new Map(),
+    // name -> Set of (signal) => void
+    schemas: /* @__PURE__ */ new Map(),
+    // name -> Schema (Draft 7+ or Shorthand)
+    parents: /* @__PURE__ */ new WeakMap(),
+    // Proxy -> Parent (Proxy/Element)
+    helpers: /* @__PURE__ */ new Map(),
+    // name -> function (used for transforms and expressions)
+    hooks: {
+      validate: (value, schema) => true
+      // Hook for extensions (like JPRX) to provide full validation
+    }
   });
-  const signal = (initialValue, optionsOrName) => {
-    let name = typeof optionsOrName === "string" ? optionsOrName : optionsOrName == null ? void 0 : optionsOrName.name;
+  const lookup$1 = (name, scope) => {
+    let current = scope;
+    while (current && typeof current === "object") {
+      const registry2 = _LV.localRegistries.get(current);
+      if (registry2 && registry2.has(name)) return registry2.get(name);
+      current = current.parentElement || _LV.parents.get(current);
+    }
+    return _LV.registry.get(name);
+  };
+  const signal$1 = (initialValue, optionsOrName) => {
+    const name = typeof optionsOrName === "string" ? optionsOrName : optionsOrName == null ? void 0 : optionsOrName.name;
     const storage = optionsOrName == null ? void 0 : optionsOrName.storage;
+    const scope = optionsOrName == null ? void 0 : optionsOrName.scope;
     if (name && storage) {
       try {
         const stored = storage.getItem(name);
-        if (stored !== null) {
-          initialValue = JSON.parse(stored);
-        }
+        if (stored !== null) initialValue = JSON.parse(stored);
       } catch (e) {
       }
     }
     let value = initialValue;
     const subscribers = /* @__PURE__ */ new Set();
-    const f = (...args) => {
-      if (args.length === 0) return f.value;
-      f.value = args[0];
-    };
+    const f = (...args) => args.length === 0 ? f.value : f.value = args[0];
     Object.defineProperty(f, "value", {
       get() {
         if (_LV.currentEffect) {
@@ -46,23 +65,41 @@
       }
     });
     if (name) {
-      if (_LV.registry.has(name)) {
-        if (_LV.registry.get(name) !== f) {
-          throw new Error(`Lightview: A signal or state with the name "${name}" is already registered.`);
-        }
-      } else {
-        _LV.registry.set(name, f);
+      const registry2 = scope && typeof scope === "object" ? _LV.localRegistries.get(scope) || _LV.localRegistries.set(scope, /* @__PURE__ */ new Map()).get(scope) : _LV.registry;
+      if (registry2 && registry2.has(name) && registry2.get(name) !== f) {
+        throw new Error(`Lightview: A signal or state with the name "${name}" is already registered.`);
+      }
+      if (registry2) registry2.set(name, f);
+      const futures = _LV.futureSignals.get(name);
+      if (futures) {
+        futures.forEach((resolve) => resolve(f));
       }
     }
     return f;
   };
-  const getSignal = (name, defaultValue) => {
-    if (!_LV.registry.has(name) && defaultValue !== void 0) {
-      return signal(defaultValue, name);
-    }
-    return _LV.registry.get(name);
+  const getSignal = (name, defaultValueOrOptions) => {
+    const options = typeof defaultValueOrOptions === "object" && defaultValueOrOptions !== null ? defaultValueOrOptions : { defaultValue: defaultValueOrOptions };
+    const { scope, defaultValue } = options;
+    const existing = lookup$1(name, scope);
+    if (existing) return existing;
+    if (defaultValue !== void 0) return signal$1(defaultValue, { name, scope });
+    const future = signal$1(void 0);
+    const handler = (realSignal) => {
+      const hasValue = realSignal && (typeof realSignal === "object" || typeof realSignal === "function") && "value" in realSignal;
+      if (hasValue) {
+        future.value = realSignal.value;
+        effect(() => {
+          future.value = realSignal.value;
+        });
+      } else {
+        future.value = realSignal;
+      }
+    };
+    if (!_LV.futureSignals.has(name)) _LV.futureSignals.set(name, /* @__PURE__ */ new Set());
+    _LV.futureSignals.get(name).add(handler);
+    return future;
   };
-  signal.get = getSignal;
+  signal$1.get = getSignal;
   const effect = (fn) => {
     const execute = () => {
       if (!execute.active || execute.running) return;
@@ -89,16 +126,45 @@
     return execute;
   };
   const computed = (fn) => {
-    const sig = signal(void 0);
+    const sig = signal$1(void 0);
     effect(() => {
       sig.value = fn();
     });
     return sig;
   };
   const getRegistry$1 = () => _LV.registry;
+  const internals = _LV;
   const stateCache = /* @__PURE__ */ new WeakMap();
   const stateSignals = /* @__PURE__ */ new WeakMap();
-  const parents = /* @__PURE__ */ new WeakMap();
+  const stateSchemas = /* @__PURE__ */ new WeakMap();
+  const { parents, schemas, hooks } = internals;
+  const validate = (target, prop, value, schema) => {
+    var _a2, _b2;
+    const current = target[prop];
+    const type = typeof current;
+    const isNew = !(prop in target);
+    let behavior = schema;
+    if (typeof schema === "object" && schema !== null) behavior = schema.type;
+    if (behavior === "auto" && isNew) throw new Error(`Lightview: Cannot add new property "${prop}" to fixed 'auto' state.`);
+    if (behavior === "polymorphic" || typeof behavior === "object" && (behavior == null ? void 0 : behavior.coerce)) {
+      if (type === "number") return Number(value);
+      if (type === "boolean") return Boolean(value);
+      if (type === "string") return String(value);
+    } else if (behavior === "auto" || behavior === "dynamic") {
+      if (!isNew && typeof value !== type) {
+        throw new Error(`Lightview: Type mismatch for "${prop}". Expected ${type}, got ${typeof value}.`);
+      }
+    }
+    if (typeof schema === "object" && schema !== null && schema.transform) {
+      const trans = schema.transform;
+      const transformFn = typeof trans === "function" ? trans : internals.helpers.get(trans) || ((_b2 = (_a2 = globalThis.Lightview) == null ? void 0 : _a2.helpers) == null ? void 0 : _b2[trans]);
+      if (transformFn) value = transformFn(value);
+    }
+    if (hooks.validate(value, schema) === false) {
+      throw new Error(`Lightview: Validation failed for "${prop}".`);
+    }
+    return value;
+  };
   const protoMethods = (proto, test) => Object.getOwnPropertyNames(proto).filter((k) => typeof proto[k] === "function" && test(k));
   const DATE_TRACKING = protoMethods(Date.prototype, (k) => /^(to|get|valueOf)/.test(k));
   const DATE_MUTATING = protoMethods(Date.prototype, (k) => /^set/.test(k));
@@ -138,31 +204,33 @@
   const proxyGet = (target, prop, receiver, signals) => {
     if (prop === "__parent__") return parents.get(receiver);
     if (!signals.has(prop)) {
-      signals.set(prop, signal(Reflect.get(target, prop, receiver)));
+      signals.set(prop, signal$1(Reflect.get(target, prop, receiver)));
     }
-    const signal$1 = signals.get(prop);
-    const val = signal$1.value;
+    const signal2 = signals.get(prop);
+    const val = signal2.value;
     if (typeof val === "object" && val !== null) {
-      const childProxy = state(val);
+      const childProxy = state$1(val);
       parents.set(childProxy, receiver);
       return childProxy;
     }
     return val;
   };
   const proxySet = (target, prop, value, receiver, signals) => {
+    const schema = stateSchemas.get(receiver);
+    const validatedValue = schema ? validate(target, prop, value, schema) : value;
     if (!signals.has(prop)) {
-      signals.set(prop, signal(Reflect.get(target, prop, receiver)));
+      signals.set(prop, signal$1(Reflect.get(target, prop, receiver)));
     }
-    const success = Reflect.set(target, prop, value, receiver);
-    const signal$1 = signals.get(prop);
-    if (success && signal$1) signal$1.value = value;
+    const success = Reflect.set(target, prop, validatedValue, receiver);
+    const signal2 = signals.get(prop);
+    if (success && signal2) signal2.value = validatedValue;
     return success;
   };
   const createSpecialProxy = (obj, monitor, trackingProps = []) => {
     const signals = getOrSet(stateSignals, obj, () => /* @__PURE__ */ new Map());
     if (!signals.has(monitor)) {
       const initialValue = typeof obj[monitor] === "function" ? obj[monitor].call(obj) : obj[monitor];
-      signals.set(monitor, signal(initialValue));
+      signals.set(monitor, signal$1(initialValue));
     }
     const isDate = obj instanceof Date;
     const isArray = Array.isArray(obj);
@@ -184,7 +252,7 @@
             if (isArray && ARRAY_ITERATION.includes(prop) && typeof args[0] === "function") {
               const originalCallback = args[0];
               args[0] = function(element2, index2, array) {
-                const wrappedElement = typeof element2 === "object" && element2 !== null ? state(element2) : element2;
+                const wrappedElement = typeof element2 === "object" && element2 !== null ? state$1(element2) : element2;
                 if (wrappedElement && typeof wrappedElement === "object") {
                   parents.set(wrappedElement, receiver);
                 }
@@ -225,10 +293,12 @@
       }
     });
   };
-  const state = (obj, optionsOrName) => {
+  const state$1 = (obj, optionsOrName) => {
     if (typeof obj !== "object" || obj === null) return obj;
     const name = typeof optionsOrName === "string" ? optionsOrName : optionsOrName == null ? void 0 : optionsOrName.name;
     const storage = optionsOrName == null ? void 0 : optionsOrName.storage;
+    const scope = optionsOrName == null ? void 0 : optionsOrName.scope;
+    const schema = optionsOrName == null ? void 0 : optionsOrName.schema;
     if (name && storage) {
       try {
         const item = storage.getItem(name);
@@ -257,6 +327,7 @@
         stateCache.set(obj, proxy);
       } else return obj;
     }
+    if (schema) stateSchemas.set(proxy, schema);
     if (name && storage) {
       effect(() => {
         try {
@@ -266,25 +337,33 @@
       });
     }
     if (name) {
-      const registry2 = getRegistry$1();
-      if (registry2.has(name)) {
-        if (registry2.get(name) !== proxy) {
-          throw new Error(`Lightview: A signal or state with the name "${name}" is already registered.`);
-        }
-      } else {
-        registry2.set(name, proxy);
+      const registry2 = scope && typeof scope === "object" ? internals.localRegistries.get(scope) || internals.localRegistries.set(scope, /* @__PURE__ */ new Map()).get(scope) : getRegistry$1();
+      if (registry2 && registry2.has(name) && registry2.get(name) !== proxy) {
+        throw new Error(`Lightview: A signal or state with the name "${name}" is already registered.`);
+      }
+      if (registry2) registry2.set(name, proxy);
+      const futures = internals.futureSignals.get(name);
+      if (futures) {
+        futures.forEach((resolve) => resolve(proxy));
       }
     }
     return proxy;
   };
-  const getState = (name, defaultValue) => {
-    const registry2 = getRegistry$1();
-    if (!registry2.has(name) && defaultValue !== void 0) {
-      return state(defaultValue, name);
-    }
-    return registry2.get(name);
+  const getState = (name, defaultValueOrOptions) => {
+    const options = typeof defaultValueOrOptions === "object" && defaultValueOrOptions !== null ? defaultValueOrOptions : { defaultValue: defaultValueOrOptions };
+    const { scope, defaultValue } = options;
+    const existing = lookup$1(name, scope);
+    if (existing) return existing;
+    if (defaultValue !== void 0) return state$1(defaultValue, { name, scope });
+    const future = signal$1(void 0);
+    const handler = (realState) => {
+      future.value = realState;
+    };
+    if (!internals.futureSignals.has(name)) internals.futureSignals.set(name, /* @__PURE__ */ new Set());
+    internals.futureSignals.get(name).add(handler);
+    return future;
   };
-  state.get = getState;
+  state$1.get = getState;
   const core = {
     get currentEffect() {
       return (globalThis.__LIGHTVIEW_INTERNALS__ || (globalThis.__LIGHTVIEW_INTERNALS__ = {})).currentEffect;
@@ -293,6 +372,38 @@
   const nodeState = /* @__PURE__ */ new WeakMap();
   const nodeStateFactory = () => ({ effects: [], onmount: null, onunmount: null });
   const registry = getRegistry$1();
+  const scrollMemory = /* @__PURE__ */ new Map();
+  const initScrollMemory = () => {
+    if (typeof document === "undefined") return;
+    document.addEventListener("scroll", (e) => {
+      const el = e.target;
+      if (el === document || el === document.documentElement) return;
+      const key = el.id || el.getAttribute && el.getAttribute("data-preserve-scroll");
+      if (key) {
+        scrollMemory.set(key, { top: el.scrollTop, left: el.scrollLeft });
+      }
+    }, true);
+  };
+  if (typeof document !== "undefined") {
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", initScrollMemory);
+    } else {
+      initScrollMemory();
+    }
+  }
+  const saveScrolls = () => new Map(scrollMemory);
+  const restoreScrolls = (map2, root = document) => {
+    if (!map2 || map2.size === 0) return;
+    requestAnimationFrame(() => {
+      map2.forEach((pos, key) => {
+        const node = document.getElementById(key) || document.querySelector(`[data-preserve-scroll="${key}"]`);
+        if (node) {
+          node.scrollTop = pos.top;
+          node.scrollLeft = pos.left;
+        }
+      });
+    });
+  };
   const trackEffect = (node, effectFn) => {
     const state2 = getOrSet(nodeState, node, nodeStateFactory);
     if (!state2.effects) state2.effects = [];
@@ -490,6 +601,26 @@
           domNode.setAttribute(key, value);
         }
         reactiveAttrs[key] = value;
+      } else if (typeof value === "object" && value !== null && Lightview.hooks.processAttribute) {
+        const processed = Lightview.hooks.processAttribute(domNode, key, value);
+        if (processed !== void 0) {
+          reactiveAttrs[key] = processed;
+        } else if (key === "style") {
+          Object.entries(value).forEach(([styleKey, styleValue]) => {
+            if (typeof styleValue === "function") {
+              const runner = effect(() => {
+                domNode.style[styleKey] = styleValue();
+              });
+              trackEffect(domNode, runner);
+            } else {
+              domNode.style[styleKey] = styleValue;
+            }
+          });
+          reactiveAttrs[key] = value;
+        } else {
+          setAttributeValue(domNode, key, value);
+          reactiveAttrs[key] = value;
+        }
       } else if (typeof value === "function") {
         const runner = effect(() => {
           const result = value();
@@ -501,18 +632,6 @@
         });
         trackEffect(domNode, runner);
         reactiveAttrs[key] = value;
-      } else if (key === "style" && typeof value === "object") {
-        Object.entries(value).forEach(([styleKey, styleValue]) => {
-          if (typeof styleValue === "function") {
-            const runner = effect(() => {
-              domNode.style[styleKey] = styleValue();
-            });
-            trackEffect(domNode, runner);
-          } else {
-            domNode.style[styleKey] = styleValue;
-          }
-        });
-        reactiveAttrs[key] = value;
       } else {
         setAttributeValue(domNode, key, value);
         reactiveAttrs[key] = value;
@@ -691,8 +810,11 @@
     }
   });
   const Lightview = {
-    signal,
-    get: signal.get,
+    state: state$1,
+    getState,
+    registerSchema: (name, definition) => internals.schemas.set(name, definition),
+    signal: signal$1,
+    get: signal$1.get,
     computed,
     effect,
     registry,
@@ -705,14 +827,24 @@
     hooks: {
       onNonStandardHref: null,
       processChild: null,
-      validateUrl: null
+      processAttribute: null,
+      validateUrl: null,
+      validate: (value, schema) => internals.hooks.validate(value, schema)
     },
     // Internals exposed for extensions
     internals: {
       core,
       domToElement,
       wrapDomElement,
-      setupChildren
+      setupChildren,
+      trackEffect,
+      saveScrolls,
+      restoreScrolls,
+      localRegistries: internals.localRegistries,
+      futureSignals: internals.futureSignals,
+      schemas: internals.schemas,
+      parents: internals.parents,
+      hooks: internals.hooks
     }
   };
   if (typeof module !== "undefined" && module.exports) {
@@ -723,8 +855,8 @@
     globalThis.addEventListener("click", (e) => {
       const path = e.composedPath();
       const link = path.find((el) => {
-        var _a, _b;
-        return el.tagName === "A" && ((_b = (_a = el.getAttribute) == null ? void 0 : _a.call(el, "href")) == null ? void 0 : _b.startsWith("#"));
+        var _a2, _b2;
+        return el.tagName === "A" && ((_b2 = (_a2 = el.getAttribute) == null ? void 0 : _a2.call(el, "href")) == null ? void 0 : _b2.startsWith("#"));
       });
       if (link && !e.defaultPrevented) {
         const href = link.getAttribute("href");
@@ -749,23 +881,23 @@
     });
     if (typeof MutationObserver !== "undefined") {
       const walkNodes = (node, fn) => {
-        var _a;
+        var _a2;
         fn(node);
-        (_a = node.childNodes) == null ? void 0 : _a.forEach((n) => walkNodes(n, fn));
+        (_a2 = node.childNodes) == null ? void 0 : _a2.forEach((n) => walkNodes(n, fn));
         if (node.shadowRoot) walkNodes(node.shadowRoot, fn);
       };
       const cleanupNode = (node) => walkNodes(node, (n) => {
-        var _a, _b;
+        var _a2, _b2;
         const s = nodeState.get(n);
         if (s) {
-          (_a = s.effects) == null ? void 0 : _a.forEach((e) => e.stop());
-          (_b = s.onunmount) == null ? void 0 : _b.call(s, n);
+          (_a2 = s.effects) == null ? void 0 : _a2.forEach((e) => e.stop());
+          (_b2 = s.onunmount) == null ? void 0 : _b2.call(s, n);
           nodeState.delete(n);
         }
       });
       const mountNode = (node) => walkNodes(node, (n) => {
-        var _a, _b;
-        (_b = (_a = nodeState.get(n)) == null ? void 0 : _a.onmount) == null ? void 0 : _b.call(_a, n);
+        var _a2, _b2;
+        (_b2 = (_a2 = nodeState.get(n)) == null ? void 0 : _a2.onmount) == null ? void 0 : _b2.call(_a2, n);
       });
       const observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
@@ -819,7 +951,7 @@
     return keys.length === 1 && isValidTagName(keys[0]) && typeof obj[keys[0]] === "object";
   };
   const convertObjectDOM = (obj) => {
-    var _a, _b;
+    var _a2, _b2;
     if (typeof obj !== "object" || obj === null) return obj;
     if (Array.isArray(obj)) return obj.map(convertObjectDOM);
     if (obj.tag) return { ...obj, children: obj.children ? convertObjectDOM(obj.children) : [] };
@@ -827,7 +959,7 @@
     const tagKey = Object.keys(obj)[0];
     const content = obj[tagKey];
     const LV = typeof window !== "undefined" ? globalThis.Lightview : typeof globalThis !== "undefined" ? globalThis.Lightview : null;
-    const tag = ((_b = (_a = LV == null ? void 0 : LV.tags) == null ? void 0 : _a._customTags) == null ? void 0 : _b[tagKey]) || tagKey;
+    const tag = ((_b2 = (_a2 = LV == null ? void 0 : LV.tags) == null ? void 0 : _a2._customTags) == null ? void 0 : _b2[tagKey]) || tagKey;
     const { children, ...attributes } = content;
     return { tag, attributes, children: children ? convertObjectDOM(children) : [] };
   };
@@ -889,7 +1021,7 @@
       return null;
     }
   };
-  const themeSignal = signal(
+  const themeSignal = signal$1(
     typeof document !== "undefined" && document.documentElement.getAttribute("data-theme") || getSavedTheme() || "light"
   );
   const setTheme = (themeName) => {
@@ -1115,12 +1247,12 @@
     const frag = document.createDocumentFragment();
     frag.appendChild(createMarker(markerId, false));
     elements.forEach((c) => {
-      var _a, _b, _c;
+      var _a2, _b2, _c;
       if (typeof c === "string") frag.appendChild(document.createTextNode(c));
       else if (c.domEl) frag.appendChild(c.domEl);
       else if (c instanceof Node) frag.appendChild(c);
       else {
-        const v = ((_c = (_a = globalThis.Lightview) == null ? void 0 : (_b = _a.hooks).processChild) == null ? void 0 : _c.call(_b, c)) || c;
+        const v = ((_c = (_a2 = globalThis.Lightview) == null ? void 0 : (_b2 = _a2.hooks).processChild) == null ? void 0 : _c.call(_b2, c)) || c;
         if (v.tag) {
           const n = element2(v.tag, v.attributes || {}, v.children || []);
           if (n == null ? void 0 : n.domEl) frag.appendChild(n.domEl);
@@ -1137,10 +1269,10 @@
   };
   const isPath = (s) => typeof s === "string" && !isDangerousProtocol(s) && /^(https?:|\.|\/|[\w])|(\.(html|json|[vo]dom|cdomc?))$/i.test(s);
   const fetchContent = async (src) => {
-    var _a;
+    var _a2;
     try {
       const LV = globalThis.Lightview;
-      if (((_a = LV == null ? void 0 : LV.hooks) == null ? void 0 : _a.validateUrl) && !LV.hooks.validateUrl(src)) {
+      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;
       }
@@ -1165,10 +1297,10 @@
     }
   };
   const parseElements = (content, isJson, isHtml, el, element2, isCdom = false, ext = "") => {
-    var _a;
+    var _a2;
     if (isJson) return Array.isArray(content) ? content : [content];
     if (isCdom && ext === "cdomc") {
-      const parser = (_a = globalThis.LightviewCDOM) == null ? void 0 : _a.parseCDOMC;
+      const parser = (_a2 = globalThis.LightviewCDOM) == null ? void 0 : _a2.parseCDOMC;
       if (parser) {
         try {
           const obj = parser(content);
@@ -1201,11 +1333,14 @@
       return null;
     }
   };
-  const updateTargetContent = (el, elements, raw, loc, contentHash, { element: element2, setupChildren: setupChildren2 }, targetHash = null) => {
+  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 };
     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)}`);
     track[loc] = contentHash;
+    const scrollMap = saveScrolls2 ? saveScrolls2() : null;
     const performScroll = (root) => {
       if (!targetHash) return;
       requestAnimationFrame(() => {
@@ -1219,18 +1354,24 @@
         });
       });
     };
+    const runRestore = (root) => {
+      if (restoreScrolls2 && scrollMap) restoreScrolls2(scrollMap, root);
+    };
     if (loc === "shadow") {
       if (!el.domEl.shadowRoot) el.domEl.attachShadow({ mode: "open" });
       setupChildren2(elements, el.domEl.shadowRoot);
       executeScripts(el.domEl.shadowRoot);
       performScroll(el.domEl.shadowRoot);
+      runRestore(el.domEl.shadowRoot);
     } else if (loc === "innerhtml") {
       el.children = elements;
       executeScripts(el.domEl);
       performScroll(document);
+      runRestore(el.domEl);
     } else {
       insert(elements, el.domEl, loc, markerId, { element: element2, setupChildren: setupChildren2 });
       performScroll(document);
+      runRestore(el.domEl);
     }
   };
   const handleSrcAttribute = async (el, src, tagName, { element: element2, setupChildren: setupChildren2 }) => {
@@ -1263,9 +1404,9 @@
         if (root) {
           requestAnimationFrame(() => {
             requestAnimationFrame(() => {
-              var _a;
+              var _a2;
               const id = targetHash.startsWith("#") ? targetHash.slice(1) : targetHash;
-              const target = root.getElementById ? root.getElementById(id) : (_a = root.querySelector) == null ? void 0 : _a.call(root, `#${id}`);
+              const target = root.getElementById ? root.getElementById(id) : (_a2 = root.querySelector) == null ? void 0 : _a2.call(root, `#${id}`);
               if (target) {
                 target.style.scrollMarginTop = "calc(var(--site-nav-height, 0px) + 2rem)";
                 target.scrollIntoView({ behavior: "smooth", block: "start", inline: "start" });
@@ -1292,7 +1433,7 @@
     return { selector: targetStr, location: null };
   };
   const handleNonStandardHref = (e, { domToElement: domToElement2, wrapDomElement: wrapDomElement2 }) => {
-    var _a;
+    var _a2;
     const clickedEl = e.target.closest("[href]");
     if (!clickedEl) return;
     const tagName = clickedEl.tagName.toLowerCase();
@@ -1300,7 +1441,7 @@
     e.preventDefault();
     const href = clickedEl.getAttribute("href");
     const LV = globalThis.Lightview;
-    if (href && (isDangerousProtocol(href) || ((_a = LV == null ? void 0 : LV.hooks) == null ? void 0 : _a.validateUrl) && !LV.hooks.validateUrl(href))) {
+    if (href && (isDangerousProtocol(href) || ((_a2 = LV == null ? void 0 : LV.hooks) == null ? void 0 : _a2.validateUrl) && !LV.hooks.validateUrl(href))) {
       console.warn(`[LightviewX] Navigation or fetch blocked by security policy: ${href}`);
       return;
     }
@@ -1460,9 +1601,9 @@
     return { events, exclusions, calls };
   };
   const globalBeforeInterceptor = async (e) => {
-    var _a, _b;
+    var _a2, _b2;
     if (e[BYPASS_FLAG]) return;
-    const target = (_b = (_a = e.target).closest) == null ? void 0 : _b.call(_a, "[lv-before]");
+    const target = (_b2 = (_a2 = e.target).closest) == null ? void 0 : _b2.call(_a2, "[lv-before]");
     if (!target) return;
     const { events, exclusions, calls } = parseBeforeAttribute(target.getAttribute("lv-before"));
     const isExcluded = exclusions.includes(e.type);
@@ -1677,7 +1818,7 @@
         }
       }
       return processTemplateChild(child, {
-        state,
+        state: state$1,
         signal: LV.signal
       });
     };
@@ -1858,7 +1999,7 @@
         }).filter(Boolean);
       }
       render() {
-        var _a, _b;
+        var _a2, _b2;
         const props = { useShadow: false };
         for (const attr of this.attributes) {
           const name = attr.name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
@@ -1882,7 +2023,7 @@
         const vdomChildren = this.parseChildrenToVDOM();
         const children = Object.keys(childElements).length > 0 ? vdomChildren : [{ tag: globalThis.Lightview.tags.slot }];
         const result = Component(props, ...children);
-        if (((_b = (_a = globalThis.Lightview) == null ? void 0 : _a.internals) == null ? void 0 : _b.setupChildren) && this.themeWrapper) {
+        if (((_b2 = (_a2 = globalThis.Lightview) == null ? void 0 : _a2.internals) == null ? void 0 : _b2.setupChildren) && this.themeWrapper) {
           this.themeWrapper.innerHTML = "";
           globalThis.Lightview.internals.setupChildren([result], this.themeWrapper);
         }
@@ -1895,8 +2036,91 @@
       }
     };
   };
+  const validateJSONSchema = (value, schema) => {
+    var _a2;
+    if (!schema) return true;
+    const errors = [];
+    const internals2 = (_a2 = globalThis.Lightview) == null ? void 0 : _a2.internals;
+    const check = (val, sch, path = "") => {
+      var _a3;
+      if (!sch) return true;
+      if (typeof sch === "string") {
+        const registered = (_a3 = internals2 == null ? void 0 : internals2.schemas) == null ? void 0 : _a3.get(sch);
+        if (registered) return check(val, registered, path);
+        return true;
+      }
+      const type = sch.type;
+      const getType = (v) => {
+        if (v === null) return "null";
+        if (Array.isArray(v)) return "array";
+        return typeof v;
+      };
+      const currentType = getType(val);
+      if (type && type !== currentType) {
+        if (type === "integer" && Number.isInteger(val)) ;
+        else if (!(type === "number" && typeof val === "number")) {
+          errors.push({ path, message: `Expected type ${type}, got ${currentType}`, keyword: "type" });
+          return false;
+        }
+      }
+      if (currentType === "string") {
+        if (sch.minLength !== void 0 && val.length < sch.minLength) errors.push({ path, keyword: "minLength" });
+        if (sch.maxLength !== void 0 && val.length > sch.maxLength) errors.push({ path, keyword: "maxLength" });
+        if (sch.pattern !== void 0 && !new RegExp(sch.pattern).test(val)) errors.push({ path, keyword: "pattern" });
+        if (sch.format === "email" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val)) errors.push({ path, keyword: "format" });
+      }
+      if (currentType === "number") {
+        if (sch.minimum !== void 0 && val < sch.minimum) errors.push({ path, keyword: "minimum" });
+        if (sch.maximum !== void 0 && val > sch.maximum) errors.push({ path, keyword: "maximum" });
+        if (sch.multipleOf !== void 0 && val % sch.multipleOf !== 0) errors.push({ path, keyword: "multipleOf" });
+      }
+      if (currentType === "object") {
+        if (sch.required && Array.isArray(sch.required)) {
+          for (const key of sch.required) {
+            if (!(key in val)) errors.push({ path: path ? `${path}.${key}` : key, keyword: "required" });
+          }
+        }
+        if (sch.properties) {
+          for (const key in sch.properties) {
+            if (key in val) check(val[key], sch.properties[key], path ? `${path}.${key}` : key);
+          }
+        }
+        if (sch.additionalProperties === false) {
+          for (const key in val) {
+            if (!sch.properties || !(key in sch.properties)) errors.push({ path: path ? `${path}.${key}` : key, keyword: "additionalProperties" });
+          }
+        }
+      }
+      if (currentType === "array") {
+        if (sch.minItems !== void 0 && val.length < sch.minItems) errors.push({ path, keyword: "minItems" });
+        if (sch.maxItems !== void 0 && val.length > sch.maxItems) errors.push({ path, keyword: "maxItems" });
+        if (sch.uniqueItems && new Set(val).size !== val.length) errors.push({ path, keyword: "uniqueItems" });
+        if (sch.items) {
+          val.forEach((item, i) => check(item, sch.items, `${path}[${i}]`));
+        }
+      }
+      if (sch.const !== void 0 && val !== sch.const) errors.push({ path, keyword: "const" });
+      if (sch.enum && !sch.enum.includes(val)) errors.push({ path, keyword: "enum" });
+      return errors.length === 0;
+    };
+    const valid = check(value, schema);
+    return valid || errors;
+  };
+  const lvInternals = globalThis.__LIGHTVIEW_INTERNALS__ || ((_a = globalThis.Lightview) == null ? void 0 : _a.internals);
+  if (lvInternals) {
+    const hooks2 = lvInternals.hooks || ((_b = globalThis.Lightview) == null ? void 0 : _b.hooks);
+    if (hooks2) {
+      hooks2.validate = (value, schema) => {
+        const result = validateJSONSchema(value, schema);
+        if (result === true) return true;
+        const msg = result.map((e) => `${e.path || "root"}: failed ${e.keyword}${e.message ? " (" + e.message + ")" : ""}`).join(", ");
+        throw new Error(`Lightview Validation Error: ${msg}`);
+      };
+    }
+    if (globalThis.Lightview) globalThis.Lightview.validate = validateJSONSchema;
+  }
   const LightviewX = {
-    state,
+    state: state$1,
     themeSignal,
     setTheme,
     registerStyleSheet,
@@ -1912,6 +2136,7 @@
     preloadComponentCSS,
     createCustomElement,
     customElementWrapper,
+    validate: validateJSONSchema,
     internals: {
       handleSrcAttribute,
       parseElements
@@ -1959,23 +2184,26 @@
   };
   const registerHelper = (name, fn, options = {}) => {
     helpers.set(name, fn);
+    if (globalThis.__LIGHTVIEW_INTERNALS__) {
+      globalThis.__LIGHTVIEW_INTERNALS__.helpers.set(name, fn);
+    }
     if (options) helperOptions.set(name, options);
   };
   const registerOperator = (helperName, symbol, position, precedence) => {
-    var _a;
+    var _a2;
     if (!["prefix", "postfix", "infix"].includes(position)) {
       throw new Error(`Invalid operator position: ${position}. Must be 'prefix', 'postfix', or 'infix'.`);
     }
     if (!helpers.has(helperName)) {
-      (_a = globalThis.console) == null ? void 0 : _a.warn(`LightviewCDOM: Operator "${symbol}" registered for helper "${helperName}" which is not yet registered.`);
+      (_a2 = globalThis.console) == null ? void 0 : _a2.warn(`LightviewCDOM: Operator "${symbol}" registered for helper "${helperName}" which is not yet registered.`);
     }
     const prec = precedence ?? DEFAULT_PRECEDENCE[position];
     operators[position].set(symbol, { helper: helperName, precedence: prec });
   };
   const getLV = () => globalThis.Lightview || null;
   const getRegistry = () => {
-    var _a;
-    return ((_a = getLV()) == null ? void 0 : _a.registry) || null;
+    var _a2;
+    return ((_a2 = getLV()) == null ? void 0 : _a2.registry) || null;
   };
   class BindingTarget {
     constructor(parent, key) {
@@ -2032,19 +2260,12 @@
     if (typeof path !== "string") return path;
     const registry2 = getRegistry();
     if (path === ".") return unwrapSignal(context);
-    if (path.startsWith("$/")) {
+    if (path.startsWith("=/")) {
       const [rootName, ...rest] = path.slice(2).split("/");
-      let cur = context;
-      while (cur) {
-        const localState = cur.__state__;
-        if (localState && rootName in localState) {
-          return traverse(localState[rootName], rest);
-        }
-        cur = cur.__parent__;
-      }
-      const rootSignal = registry2 == null ? void 0 : registry2.get(rootName);
-      if (!rootSignal) return void 0;
-      return traverse(rootSignal, rest);
+      const LV = getLV();
+      const root = LV ? LV.get(rootName, { scope: (context == null ? void 0 : context.__node__) || context }) : registry2 == null ? void 0 : registry2.get(rootName);
+      if (!root) return void 0;
+      return traverse(root, rest);
     }
     if (path.startsWith("./")) {
       return traverse(context, path.slice(2).split("/"));
@@ -2067,20 +2288,13 @@
     if (typeof path !== "string") return path;
     const registry2 = getRegistry();
     if (path === ".") return context;
-    if (path.startsWith("$/")) {
+    if (path.startsWith("=/")) {
       const segments = path.slice(2).split(/[/.]/);
       const rootName = segments.shift();
-      let cur = context;
-      while (cur) {
-        const localState = cur.__state__;
-        if (localState && rootName in localState) {
-          return traverseAsContext(localState[rootName], segments);
-        }
-        cur = cur.__parent__;
-      }
-      const rootSignal = registry2 == null ? void 0 : registry2.get(rootName);
-      if (!rootSignal) return void 0;
-      return traverseAsContext(rootSignal, segments);
+      const LV = getLV();
+      const root = LV ? LV.get(rootName, { scope: (context == null ? void 0 : context.__node__) || context }) : registry2 == null ? void 0 : registry2.get(rootName);
+      if (!root) return void 0;
+      return traverseAsContext(root, segments);
     }
     if (path.startsWith("./")) {
       return traverseAsContext(context, path.slice(2).split(/[\/.]/));
@@ -2108,6 +2322,7 @@
       return this.fn(context);
     }
   }
+  const isNode = (val) => val && typeof val === "object" && globalThis.Node && val instanceof globalThis.Node;
   const resolveArgument = (arg, context, globalMode = false) => {
     if (arg.startsWith("'") && arg.endsWith("'") || arg.startsWith('"') && arg.endsWith('"')) {
       return { value: arg.slice(1, -1), isLiteral: true };
@@ -2128,9 +2343,21 @@
         isLazy: true
       };
     }
+    if (arg === "$this" || arg.startsWith("$this/") || arg.startsWith("$this.")) {
+      return {
+        value: new LazyValue((context2) => {
+          const node = (context2 == null ? void 0 : context2.__node__) || context2;
+          if (arg === "$this") return node;
+          const path = arg.startsWith("$this.") ? arg.slice(6) : arg.slice(6);
+          return resolvePath(path, node);
+        }),
+        isLazy: true
+      };
+    }
     if (arg === "$event" || arg.startsWith("$event/") || arg.startsWith("$event.")) {
       return {
-        value: new LazyValue((event) => {
+        value: new LazyValue((context2) => {
+          const event = (context2 == null ? void 0 : context2.$event) || (context2 == null ? void 0 : context2.event) || context2;
           if (arg === "$event") return event;
           const path = arg.startsWith("$event.") ? arg.slice(7) : arg.slice(7);
           return resolvePath(path, event);
@@ -2143,11 +2370,23 @@
         const data = parseJPRX(arg);
         const resolveTemplate = (node, context2) => {
           if (typeof node === "string") {
-            if (node.startsWith("$")) {
+            if (node.startsWith("=")) {
               const res = resolveExpression(node, context2);
               const final = res instanceof LazyValue ? res.resolve(context2) : res;
               return unwrapSignal(final);
             }
+            if (node === "$this" || node.startsWith("$this/") || node.startsWith("$this.")) {
+              const path = node.startsWith("$this.") || node.startsWith("$this/") ? node.slice(6) : node.slice(6);
+              const ctxNode = (context2 == null ? void 0 : context2.__node__) || context2;
+              const res = node === "$this" ? ctxNode : resolvePath(path, ctxNode);
+              return unwrapSignal(res);
+            }
+            if (node === "$event" || node.startsWith("$event/") || node.startsWith("$event.")) {
+              const path = node.startsWith("$event.") || node.startsWith("$event/") ? node.slice(7) : node.slice(7);
+              const event = (context2 == null ? void 0 : context2.$event) || (context2 == null ? void 0 : context2.event) || (context2 && !isNode(context2) ? context2 : null);
+              const res = node === "$event" ? event : resolvePath(path, event);
+              return unwrapSignal(res);
+            }
             if (node === "_" || node.startsWith("_/") || node.startsWith("_.")) {
               const path = node.startsWith("_.") || node.startsWith("_/") ? node.slice(2) : node.slice(2);
               const res = node === "_" ? context2 : resolvePath(path, context2);
@@ -2165,7 +2404,7 @@
         };
         const hasReactive = (obj) => {
           if (typeof obj === "string") {
-            return obj.startsWith("$") || obj.startsWith("_") || obj.startsWith("../");
+            return obj.startsWith("=") || obj.startsWith("_") || obj.startsWith("../");
           }
           if (Array.isArray(obj)) return obj.some(hasReactive);
           if (obj && typeof obj === "object") return Object.values(obj).some(hasReactive);
@@ -2184,9 +2423,9 @@
     if (arg.includes("(")) {
       let nestedExpr = arg;
       if (arg.startsWith("/")) {
-        nestedExpr = "$" + arg;
-      } else if (globalMode && !arg.startsWith("$") && !arg.startsWith("./")) {
-        nestedExpr = `$/${arg}`;
+        nestedExpr = "=" + arg;
+      } else if (globalMode && !arg.startsWith("=") && !arg.startsWith("./")) {
+        nestedExpr = `=/${arg}`;
       }
       const val = resolveExpression(nestedExpr, context);
       if (val instanceof LazyValue) {
@@ -2196,11 +2435,11 @@
     }
     let normalizedPath;
     if (arg.startsWith("/")) {
-      normalizedPath = "$" + arg;
-    } else if (arg.startsWith("$") || arg.startsWith("./") || arg.startsWith("../")) {
+      normalizedPath = "=" + arg;
+    } else if (arg.startsWith("=") || arg.startsWith("./") || arg.startsWith("../")) {
       normalizedPath = arg;
     } else if (globalMode) {
-      normalizedPath = `$/${arg}`;
+      normalizedPath = `=/${arg}`;
     } else {
       normalizedPath = `./${arg}`;
     }
@@ -2245,6 +2484,8 @@
     // ... suffix
     PLACEHOLDER: "PLACEHOLDER",
     // _, _/path
+    THIS: "THIS",
+    // $this
     EVENT: "EVENT",
     // $event, $event.target
     EOF: "EOF"
@@ -2267,15 +2508,16 @@
         i++;
         continue;
       }
-      if (expr[i] === "$" && i + 1 < len2) {
-        let isOpAfter = false;
-        for (const op of opSymbols) {
+      if (expr[i] === "=" && i + 1 < len2) {
+        const prefixOps = [...operators.prefix.keys()].sort((a, b) => b.length - a.length);
+        let isPrefixOp = false;
+        for (const op of prefixOps) {
           if (expr.slice(i + 1, i + 1 + op.length) === op) {
-            isOpAfter = true;
+            isPrefixOp = true;
             break;
           }
         }
-        if (isOpAfter) {
+        if (isPrefixOp) {
           i++;
           continue;
         }
@@ -2311,7 +2553,7 @@
             continue;
           }
           const validBefore = /[\s)]/.test(before) || i === 0 || tokens.length === 0 || tokens[tokens.length - 1].type === TokenType.LPAREN || tokens[tokens.length - 1].type === TokenType.COMMA || tokens[tokens.length - 1].type === TokenType.OPERATOR;
-          const validAfter = /[\s($./'"0-9_]/.test(after) || i + op.length >= len2 || opSymbols.some((o) => expr.slice(i + op.length).startsWith(o));
+          const validAfter = /[\s(=./'"0-9_]/.test(after) || i + op.length >= len2 || opSymbols.some((o) => expr.slice(i + op.length).startsWith(o));
           if (validBefore || validAfter) {
             matchedOp = op;
             break;
@@ -2367,6 +2609,16 @@
         tokens.push({ type: TokenType.PLACEHOLDER, value: placeholder });
         continue;
       }
+      if (expr.slice(i, i + 5) === "$this") {
+        let thisPath = "$this";
+        i += 5;
+        while (i < len2 && /[a-zA-Z0-9_./]/.test(expr[i])) {
+          thisPath += expr[i];
+          i++;
+        }
+        tokens.push({ type: TokenType.THIS, value: thisPath });
+        continue;
+      }
       if (expr.slice(i, i + 6) === "$event") {
         let eventPath = "$event";
         i += 6;
@@ -2377,7 +2629,7 @@
         tokens.push({ type: TokenType.EVENT, value: eventPath });
         continue;
       }
-      if (expr[i] === "$" || expr[i] === "." || expr[i] === "/") {
+      if (expr[i] === "=" || expr[i] === "." || expr[i] === "/") {
         let path = "";
         while (i < len2) {
           let isOp = false;
@@ -2437,7 +2689,7 @@
   const hasOperatorSyntax = (expr) => {
     if (!expr || typeof expr !== "string") return false;
     if (expr.includes("(")) return false;
-    if (/^\$(\+\+|--|!!)\/?/.test(expr)) {
+    if (/^=(\+\+|--|!!)\/?/.test(expr)) {
       return true;
     }
     if (/(\+\+|--)$/.test(expr)) {
@@ -2500,6 +2752,9 @@
           tok = this.peek();
           continue;
         }
+        if (!operators.postfix.has(tok.value) && !operators.infix.has(tok.value)) {
+          break;
+        }
         this.consume();
         const nextTok = this.peek();
         if (nextTok.type === TokenType.PATH || nextTok.type === TokenType.LITERAL || nextTok.type === TokenType.LPAREN || nextTok.type === TokenType.PLACEHOLDER || nextTok.type === TokenType.EVENT || nextTok.type === TokenType.OPERATOR && operators.prefix.has(nextTok.value)) {
@@ -2537,6 +2792,10 @@
         this.consume();
         return { type: "Placeholder", value: tok.value };
       }
+      if (tok.type === TokenType.THIS) {
+        this.consume();
+        return { type: "This", value: tok.value };
+      }
       if (tok.type === TokenType.EVENT) {
         this.consume();
         return { type: "Event", value: tok.value };
@@ -2572,8 +2831,17 @@
           return resolvePath(path, item);
         });
       }
+      case "This": {
+        return new LazyValue((context2) => {
+          const node = (context2 == null ? void 0 : context2.__node__) || context2;
+          if (ast.value === "$this") return node;
+          const path = ast.value.startsWith("$this.") ? ast.value.slice(6) : ast.value.slice(6);
+          return resolvePath(path, node);
+        });
+      }
       case "Event": {
-        return new LazyValue((event) => {
+        return new LazyValue((context2) => {
+          const event = (context2 == null ? void 0 : context2.$event) || (context2 == null ? void 0 : context2.event) || context2;
           if (ast.value === "$event") return event;
           const path = ast.value.startsWith("$event.") ? ast.value.slice(7) : ast.value.slice(7);
           return resolvePath(path, event);
@@ -2621,7 +2889,12 @@
         const opts = helperOptions.get(opInfo.helper) || {};
         const left = evaluateAST(ast.left, context, opts.pathAware);
         const right = evaluateAST(ast.right, context, false);
-        return helper(unwrapSignal(left), unwrapSignal(right));
+        const finalArgs = [];
+        if (Array.isArray(left) && ast.left.type === "Explosion") finalArgs.push(...left);
+        else finalArgs.push(unwrapSignal(left));
+        if (Array.isArray(right) && ast.right.type === "Explosion") finalArgs.push(...right);
+        else finalArgs.push(unwrapSignal(right));
+        return helper(...finalArgs);
       }
       default:
         throw new Error(`JPRX: Unknown AST node type: ${ast.type}`);
@@ -2634,13 +2907,13 @@
     return evaluateAST(ast, context);
   };
   const resolveExpression = (expr, context) => {
-    var _a, _b;
+    var _a2, _b2;
     if (typeof expr !== "string") return expr;
     if (hasOperatorSyntax(expr)) {
       try {
         return parseWithPratt(expr, context);
       } catch (e) {
-        (_a = globalThis.console) == null ? void 0 : _a.warn("JPRX: Pratt parser failed, falling back to legacy:", e.message);
+        (_a2 = globalThis.console) == null ? void 0 : _a2.warn("JPRX: Pratt parser failed, falling back to legacy:", e.message);
       }
     }
     const funcStart = expr.indexOf("(");
@@ -2648,19 +2921,19 @@
       const fullPath = expr.slice(0, funcStart).trim();
       const argsStr = expr.slice(funcStart + 1, -1);
       const segments = fullPath.split("/");
-      let funcName = segments.pop().replace(/^\$/, "");
+      let funcName = segments.pop().replace(/^=/, "");
       if (funcName === "" && (segments.length > 0 || fullPath === "/")) {
         funcName = "/";
       }
       const navPath = segments.join("/");
-      const isGlobalExpr = expr.startsWith("$/") || expr.startsWith("$");
+      const isGlobalExpr = expr.startsWith("=/") || expr.startsWith("=");
       let baseContext = context;
-      if (navPath && navPath !== "$") {
+      if (navPath && navPath !== "=") {
         baseContext = resolvePathAsContext(navPath, context);
       }
       const helper = helpers.get(funcName);
       if (!helper) {
-        (_b = globalThis.console) == null ? void 0 : _b.warn(`LightviewCDOM: Helper "${funcName}" not found.`);
+        (_b2 = globalThis.console) == null ? void 0 : _b2.warn(`LightviewCDOM: Helper "${funcName}" not found.`);
         return expr;
       }
       const options = helperOptions.get(funcName) || {};
@@ -2688,7 +2961,7 @@
       let hasLazy = false;
       for (let i = 0; i < argsList.length; i++) {
         const arg = argsList[i];
-        const useGlobalMode = isGlobalExpr && (navPath === "$" || !navPath);
+        const useGlobalMode = isGlobalExpr && (navPath === "=" || !navPath);
         const res = resolveArgument(arg, baseContext, useGlobalMode);
         if (res.isLazy) hasLazy = true;
         const shouldUnwrap = !(options.pathAware && i === 0);
@@ -2712,7 +2985,7 @@
           return helper(...finalArgs);
         });
       }
-      const result = helper(...resolvedArgs);
+      const result = helper.apply((context == null ? void 0 : context.__node__) || null, resolvedArgs);
       return unwrapSignal(result);
     }
     return unwrapSignal(resolvePath(expr, context));
@@ -2834,7 +3107,7 @@
         i++;
       }
       const word = input.slice(start, i);
-      if (word.startsWith("$")) {
+      if (word.startsWith("=")) {
         return word;
       }
       if (word === "true") return true;
@@ -2920,7 +3193,7 @@
     return res;
   };
   const parseJPRX = (input) => {
-    var _a, _b;
+    var _a2, _b2;
     let result = "";
     let i = 0;
     const len2 = input.length;
@@ -2972,7 +3245,7 @@
         i++;
         continue;
       }
-      if (char === "$") {
+      if (char === "=") {
         let expr = "";
         let parenDepth = 0;
         let braceDepth = 0;
@@ -3001,7 +3274,7 @@
         result += JSON.stringify(expr);
         continue;
       }
-      if (/[a-zA-Z_./]/.test(char)) {
+      if (/[a-zA-Z_$/./]/.test(char)) {
         let word = "";
         while (i < len2 && /[a-zA-Z0-9_$/.-]/.test(input[i])) {
           word += input[i];
@@ -3037,8 +3310,8 @@
     try {
       return JSON.parse(result);
     } catch (e) {
-      (_a = globalThis.console) == null ? void 0 : _a.error("parseJPRX: JSON parse failed", e);
-      (_b = globalThis.console) == null ? void 0 : _b.error("Transformed input:", result);
+      (_a2 = globalThis.console) == null ? void 0 : _a2.error("parseJPRX: JSON parse failed", e);
+      (_b2 = globalThis.console) == null ? void 0 : _b2.error("Transformed input:", result);
       throw e;
     }
   };
@@ -3391,6 +3664,21 @@
     if (typeof current === "object" && current !== null) return set(target, {});
     return set(target, null);
   };
+  function state(val, options) {
+    if (globalThis.Lightview) {
+      const finalOptions = typeof options === "string" ? { name: options } : options;
+      return globalThis.Lightview.state(val, finalOptions);
+    }
+    throw new Error("JPRX: $state requires a UI library implementation.");
+  }
+  function signal(val, options) {
+    if (globalThis.Lightview) {
+      const finalOptions = typeof options === "string" ? { name: options } : options;
+      return globalThis.Lightview.signal(val, finalOptions);
+    }
+    throw new Error("JPRX: $signal requires a UI library implementation.");
+  }
+  const bind = (path, options) => ({ __JPRX_BIND__: true, path, options });
   const registerStateHelpers = (register) => {
     const opts = { pathAware: true };
     register("set", set, opts);
@@ -3404,6 +3692,9 @@
     register("pop", pop, opts);
     register("assign", assign, opts);
     register("clear", clear, opts);
+    register("state", state);
+    register("signal", signal);
+    register("bind", bind);
   };
   const fetchHelper = (url, options = {}) => {
     const fetchOptions = { ...options };
@@ -3441,6 +3732,74 @@
   registerStatsHelpers(registerHelper);
   registerStateHelpers((name, fn) => registerHelper(name, fn, { pathAware: true }));
   registerNetworkHelpers(registerHelper);
+  registerHelper("move", (selector, location = "beforeend") => {
+    return {
+      isLazy: true,
+      resolve: (eventOrNode) => {
+        const isEvent = eventOrNode && typeof eventOrNode === "object" && "target" in eventOrNode;
+        const node = isEvent ? eventOrNode.currentTarget || eventOrNode.target : eventOrNode;
+        if (!(node instanceof Node) || !selector) return;
+        const target = document.querySelector(selector);
+        if (!target) {
+          console.warn(`[Lightview-CDOM] move target not found: ${selector}`);
+          return;
+        }
+        if (node.id) {
+          const escapedId = CSS.escape(node.id);
+          if (target.id === node.id && target !== node) {
+            target.replaceWith(node);
+            return;
+          }
+          const existing = target.querySelector(`#${escapedId}`);
+          if (existing && existing !== node) {
+            existing.replaceWith(node);
+            return;
+          }
+        }
+        globalThis.Lightview.$(target).content(node, location);
+      }
+    };
+  }, { pathAware: true });
+  registerHelper("mount", async (url, options = {}) => {
+    const { target = "body", location = "beforeend" } = options;
+    try {
+      const fetchOptions = { ...options };
+      delete fetchOptions.target;
+      delete fetchOptions.location;
+      const headers = { ...fetchOptions.headers };
+      let body = fetchOptions.body;
+      if (body !== void 0) {
+        if (body !== null && typeof body === "object") {
+          body = JSON.stringify(body);
+          if (!headers["Content-Type"]) headers["Content-Type"] = "application/json";
+        } else {
+          body = String(body);
+          if (!headers["Content-Type"]) headers["Content-Type"] = "text/plain";
+        }
+        fetchOptions.body = body;
+        fetchOptions.headers = headers;
+      }
+      const response = await globalThis.fetch(url, fetchOptions);
+      const contentType = response.headers.get("Content-Type") || "";
+      const text = await response.text();
+      let content = text;
+      const isCDOM = contentType.includes("application/cdom") || contentType.includes("application/jprx") || contentType.includes("application/vdom") || contentType.includes("application/odom") || url.endsWith(".cdom") || url.endsWith(".jprx") || url.endsWith(".vdom") || url.endsWith(".odom");
+      if (isCDOM || contentType.includes("application/json") && text.trim().startsWith("{")) {
+        try {
+          content = hydrate(parseJPRX(text));
+        } catch (e) {
+        }
+      }
+      const targetEl = document.querySelector(target);
+      if (targetEl) {
+        globalThis.Lightview.$(targetEl).content(content, location);
+      } else {
+        console.warn(`[Lightview-CDOM] $mount target not found: ${target}`);
+      }
+    } catch (err) {
+      console.error(`[Lightview-CDOM] $mount failed for ${url}:`, err);
+    }
+  });
   registerOperator("increment", "++", "prefix", 80);
   registerOperator("increment", "++", "postfix", 80);
   registerOperator("decrement", "--", "prefix", 80);
@@ -3455,309 +3814,135 @@
   registerOperator("gte", ">=", "infix", 40);
   registerOperator("lte", "<=", "infix", 40);
   registerOperator("neq", "!=", "infix", 40);
-  const localStates = /* @__PURE__ */ new WeakMap();
   const getContext = (node, event = null) => {
-    const chain = [];
-    let cur = node;
-    const ShadowRoot2 = globalThis.ShadowRoot;
-    while (cur) {
-      const local = localStates.get(cur) || (cur && typeof cur === "object" ? cur.__state__ : null);
-      if (local) chain.unshift(local);
-      cur = cur.parentElement || (cur && typeof cur === "object" ? cur.__parent__ : null) || (ShadowRoot2 && cur.parentNode instanceof ShadowRoot2 ? cur.parentNode.host : null);
-    }
-    const globalRegistry = getRegistry$1();
-    const handler = {
-      get(target, prop, receiver) {
-        var _a;
+    return new Proxy({}, {
+      get(_, prop) {
         if (prop === "$event" || prop === "event") return event;
-        if (prop === "__parent__") return void 0;
-        for (let i = chain.length - 1; i >= 0; i--) {
-          const s = chain[i];
-          if (prop in s) return s[prop];
-        }
-        if (globalRegistry && globalRegistry.has(prop)) return unwrapSignal(globalRegistry.get(prop));
-        const globalState = (_a = globalThis.Lightview) == null ? void 0 : _a.state;
-        if (globalState && prop in globalState) return unwrapSignal(globalState[prop]);
-        return void 0;
+        if (prop === "$this" || prop === "this" || prop === "__node__") return node;
+        return unwrapSignal(globalThis.Lightview.getState(prop, { scope: node }));
       },
-      set(target, prop, value, receiver) {
-        var _a;
-        for (let i = chain.length - 1; i >= 0; i--) {
-          const s = chain[i];
-          if (prop in s) {
-            s[prop] = value;
-            return true;
-          }
-        }
-        if (chain.length > 0) {
-          chain[chain.length - 1][prop] = value;
-          return true;
-        }
-        const globalState = (_a = globalThis.Lightview) == null ? void 0 : _a.state;
-        if (globalState && prop in globalState) {
-          globalState[prop] = value;
+      set(_, prop, value) {
+        const res = globalThis.Lightview.getState(prop, { scope: node });
+        if (res && (typeof res === "object" || typeof res === "function") && "value" in res) {
+          res.value = value;
           return true;
         }
-        if (globalRegistry && globalRegistry.has(prop)) {
-          const s = globalRegistry.get(prop);
-          if (s && (typeof s === "object" || typeof s === "function") && "value" in s) {
-            s.value = value;
-            return true;
-          }
-        }
         return false;
-      },
-      has(target, prop) {
-        var _a;
-        const exists = prop === "$event" || prop === "event" || !!chain.find((s) => prop in s);
-        const inGlobal = ((_a = globalThis.Lightview) == null ? void 0 : _a.state) && prop in globalThis.Lightview.state || globalRegistry && globalRegistry.has(prop);
-        return exists || inGlobal;
-      },
-      ownKeys(target) {
-        var _a;
-        const keys = /* @__PURE__ */ new Set();
-        if (event) {
-          keys.add("$event");
-          keys.add("event");
-        }
-        for (const s of chain) {
-          for (const key in s) keys.add(key);
-        }
-        const globalState = (_a = globalThis.Lightview) == null ? void 0 : _a.state;
-        if (globalState) {
-          for (const key in globalState) keys.add(key);
-        }
-        return Array.from(keys);
-      },
-      getOwnPropertyDescriptor(target, prop) {
-        return { enumerable: true, configurable: true };
       }
-    };
-    return new Proxy({}, handler);
-  };
-  const handleCDOMState = (node) => {
-    var _a;
-    const attr = node["cdom-state"] || node.getAttribute && node.getAttribute("cdom-state");
-    if (!attr || localStates.has(node)) return;
-    try {
-      const data = typeof attr === "object" ? attr : JSON.parse(attr);
-      const s = state(data);
-      localStates.set(node, s);
-      if (node && typeof node === "object") {
-        node.__state__ = s;
-      }
-    } catch (e) {
-      (_a = globalThis.console) == null ? void 0 : _a.error("LightviewCDOM: Failed to parse cdom-state", e);
-    }
+    });
   };
-  const handleCDOMBind = (node) => {
-    const path = node["cdom-bind"] || node.getAttribute("cdom-bind");
-    if (!path) return;
-    const type = node.type || "";
-    const tagName = node.tagName.toLowerCase();
-    let prop = "value";
-    let event = "input";
-    if (type === "checkbox" || type === "radio") {
-      prop = "checked";
-      event = "change";
-    } else if (tagName === "select") {
-      event = "change";
-    }
-    const context = getContext(node);
-    let target = resolvePathAsContext(path, context);
-    if (target && target.isBindingTarget && target.value === void 0) {
-      const val = node[prop];
-      if (val !== void 0 && val !== "") {
-        set(context, { [target.key]: val });
-        target = resolvePathAsContext(path, context);
-      }
+  globalThis.Lightview.hooks.processAttribute = (domNode, key, value) => {
+    if (value == null ? void 0 : value.__JPRX_BIND__) {
+      const { path, options } = value;
+      const type = domNode.type || "";
+      const tagName = domNode.tagName.toLowerCase();
+      let prop = "value";
+      let event = "input";
+      if (type === "checkbox" || type === "radio") {
+        prop = "checked";
+        event = "change";
+      } else if (tagName === "select") {
+        event = "change";
+      }
+      const res = globalThis.Lightview.get(path.replace(/^=/, ""), { scope: domNode });
+      const runner = globalThis.Lightview.effect(() => {
+        const val = unwrapSignal(res);
+        if (domNode[prop] !== val) {
+          domNode[prop] = val === void 0 ? "" : val;
+        }
+      });
+      globalThis.Lightview.internals.trackEffect(domNode, runner);
+      domNode.addEventListener(event, () => {
+        if (res && "value" in res) res.value = domNode[prop];
+      });
+      return unwrapSignal(res) ?? domNode[prop];
     }
-    effect(() => {
-      const val = unwrapSignal(target);
-      if (node[prop] !== val) {
-        node[prop] = val === void 0 ? "" : val;
-      }
-    });
-    node.addEventListener(event, () => {
-      const val = node[prop];
-      if (target && target.isBindingTarget) {
-        target.value = val;
-      } else {
-        set(context, { [path]: val });
-      }
-    });
+    return void 0;
   };
   const activate = (root = document.body) => {
-    const walk = (node) => {
-      if (node.nodeType === 1) {
-        if (node.hasAttribute("cdom-state")) handleCDOMState(node);
-        if (node.hasAttribute("cdom-bind")) handleCDOMBind(node);
-      }
-      let child = node.firstChild;
-      while (child) {
-        walk(child);
-        child = child.nextSibling;
-      }
-    };
-    walk(root);
+  };
+  const makeEventHandler = (expr) => (eventOrNode) => {
+    const isEvent = eventOrNode && typeof eventOrNode === "object" && "target" in eventOrNode;
+    const target = isEvent ? eventOrNode.currentTarget || eventOrNode.target : eventOrNode;
+    const context = getContext(target, isEvent ? eventOrNode : null);
+    const result = resolveExpression(expr, context);
+    if (result && typeof result === "object" && result.isLazy) return result.resolve(eventOrNode);
+    return result;
   };
   const hydrate = (node, parent = null) => {
+    var _a2, _b2, _c;
     if (!node) return node;
-    if (typeof node === "string" && node.startsWith("$")) {
+    if (typeof node === "string" && node.startsWith("'=")) {
+      return node.slice(1);
+    }
+    if (typeof node === "string" && node.startsWith("=")) {
       return parseExpression(node, parent);
     }
+    if (typeof node !== "object") return node;
     if (Array.isArray(node)) {
       return node.map((item) => hydrate(item, parent));
     }
-    if (node instanceof String) {
-      return node.toString();
+    if (node instanceof String) return node.toString();
+    if (parent && !("__parent__" in node)) {
+      Object.defineProperty(node, "__parent__", { value: parent, enumerable: false, writable: true });
+      (_c = (_b2 = (_a2 = globalThis.Lightview) == null ? void 0 : _a2.internals) == null ? void 0 : _b2.parents) == null ? void 0 : _c.set(node, parent);
     }
-    if (typeof node === "object" && node !== null) {
-      if (parent && !("__parent__" in node)) {
-        Object.defineProperty(node, "__parent__", {
-          value: parent,
-          enumerable: false,
-          writable: true,
-          configurable: true
-        });
+    if (!node.tag) {
+      let potentialTag = null;
+      const reserved = ["children", "attributes", "tag", "__parent__"];
+      for (const key in node) {
+        if (reserved.includes(key) || key.startsWith("on")) continue;
+        potentialTag = key;
+        break;
       }
-      if (!node.tag) {
-        let potentialTag = null;
-        for (const key in node) {
-          if (key === "children" || key === "attributes" || key === "tag" || key.startsWith("cdom-") || key.startsWith("on") || key === "__parent__") {
-            continue;
-          }
-          const attrNames = [
-            // Form/input attributes
-            "type",
-            "name",
-            "value",
-            "placeholder",
-            "step",
-            "min",
-            "max",
-            "pattern",
-            "disabled",
-            "checked",
-            "selected",
-            "readonly",
-            "required",
-            "multiple",
-            "rows",
-            "cols",
-            "size",
-            "maxlength",
-            "minlength",
-            "autocomplete",
-            // Common element attributes
-            "id",
-            "class",
-            "className",
-            "style",
-            "title",
-            "tabindex",
-            "role",
-            "href",
-            "src",
-            "alt",
-            "width",
-            "height",
-            "target",
-            "rel",
-            // Data attributes
-            "data",
-            "label",
-            "text",
-            "description",
-            "content",
-            // Common data property names
-            "price",
-            "qty",
-            "items",
-            "count",
-            "total",
-            "amount",
-            "url"
-          ];
-          if (attrNames.includes(key)) {
-            continue;
+      if (potentialTag) {
+        const content = node[potentialTag];
+        node.tag = potentialTag;
+        if (Array.isArray(content)) {
+          node.children = content;
+        } else if (typeof content === "object") {
+          node.attributes = node.attributes || {};
+          for (const k in content) {
+            if (k === "children") node.children = content[k];
+            else node.attributes[k] = content[k];
           }
-          potentialTag = key;
-          break;
-        }
-        if (potentialTag) {
-          const content = node[potentialTag];
-          if (content !== void 0 && content !== null) {
-            node.tag = potentialTag;
-            if (Array.isArray(content)) {
-              node.children = content;
-            } else if (typeof content === "object") {
-              node.attributes = node.attributes || {};
-              for (const k in content) {
-                if (k === "children") {
-                  node.children = content[k];
-                } else if (k.startsWith("cdom-")) {
-                  node[k] = content[k];
-                } else {
-                  node.attributes[k] = content[k];
-                }
-              }
+        } else node.children = [content];
+        delete node[potentialTag];
+      }
+    }
+    for (const key in node) {
+      if (key === "tag" || key === "__parent__") continue;
+      const value = node[key];
+      if (key === "attributes" && typeof value === "object" && value !== null) {
+        for (const attrKey in value) {
+          const attrVal = value[attrKey];
+          if (typeof attrVal === "string" && attrVal.startsWith("'=")) {
+            value[attrKey] = attrVal.slice(1);
+          } else if (typeof attrVal === "string" && attrVal.startsWith("=")) {
+            if (attrKey.startsWith("on")) {
+              value[attrKey] = makeEventHandler(attrVal);
             } else {
-              node.children = [content];
+              value[attrKey] = parseExpression(attrVal, node);
             }
-            delete node[potentialTag];
+          } else if (typeof attrVal === "object" && attrVal !== null) {
+            value[attrKey] = hydrate(attrVal, node);
           }
         }
+        continue;
       }
-      if (node["cdom-state"]) {
-        handleCDOMState(node);
-      }
-      for (const key in node) {
-        const value = node[key];
-        if (key === "cdom-state") {
-          continue;
-        }
-        if (typeof value === "string" && value.startsWith("$")) {
-          if (key.startsWith("on")) {
-            node[key] = (event) => {
-              const element2 = event.currentTarget;
-              const context = getContext(element2, event);
-              const result = resolveExpression(value, context);
-              if (result && typeof result === "object" && result.isLazy && typeof result.resolve === "function") {
-                return result.resolve(event);
-              }
-              return result;
-            };
-          } else if (key === "children") {
-            node[key] = [parseExpression(value, node)];
-          } else {
-            node[key] = parseExpression(value, node);
-          }
-        } else if (key === "attributes" && typeof value === "object" && value !== null) {
-          for (const attrKey in value) {
-            const attrValue = value[attrKey];
-            if (typeof attrValue === "string" && attrValue.startsWith("$")) {
-              if (attrKey.startsWith("on")) {
-                value[attrKey] = (event) => {
-                  const element2 = event.currentTarget;
-                  const context = getContext(element2, event);
-                  const result = resolveExpression(attrValue, context);
-                  if (result && typeof result === "object" && result.isLazy && typeof result.resolve === "function") {
-                    return result.resolve(event);
-                  }
-                  return result;
-                };
-              } else {
-                value[attrKey] = parseExpression(attrValue, node);
-              }
-            }
-          }
-          node[key] = value;
+      if (typeof value === "string" && value.startsWith("'=")) {
+        node[key] = value.slice(1);
+      } else if (typeof value === "string" && value.startsWith("=")) {
+        if (key === "onmount" || key === "onunmount" || key.startsWith("on")) {
+          node[key] = makeEventHandler(value);
+        } else if (key === "children") {
+          node[key] = [parseExpression(value, node)];
         } else {
-          node[key] = hydrate(value, node);
+          node[key] = parseExpression(value, node);
         }
+      } else {
+        node[key] = hydrate(value, node);
       }
-      return node;
     }
     return node;
   };
@@ -3772,8 +3957,10 @@
     parseJPRX,
     unwrapSignal,
     getContext,
-    handleCDOMState,
-    handleCDOMBind,
+    handleCDOMState: () => {
+    },
+    handleCDOMBind: () => {
+    },
     activate,
     hydrate,
     version: "1.0.0"