lightview 1.8.1-b → 2.0.0

package/lightview.js

@@ -1,1195 +1,744 @@
-/*
-MIT License
-
-Copyright (c) 2022 AnyWhichWay, LLC - Lightview Small, simple, powerful UI creation ...
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-    The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-*/
-
-// <script src="https://000686818.codepen.website/lightview.js?as=x-body"></script>
-/*
-    self.variables({name:"string"})
-    imported(x) => exported(x) => reactive(x) => remote(x,{path:".
- */
-
-if(document.body) document.currentComponent = document.body;
-
-const Lightview = {};
-
-const {observe} = (() => {
-    let CURRENTOBSERVER;
-    const parser = new DOMParser();
-
-    const templateSanitizer = (string) => {
-        return string.replace(/function\s+/g, "")
-            .replace(/function\(/g, "")
-            .replace(/=\s*>/g, "")
-            .replace(/(while|do|for|alert)\s*\(/g, "")
-            .replace(/console\.[a-zA-Z$]+\s*\(/g, "");
-    }
-    Lightview.sanitizeTemplate = templateSanitizer;
+(() => {
+    // ============= SIGNALS =============
 
-    const escaper = document.createElement('textarea');
-    function escapeHTML(html) {
-        escaper.textContent = html;
-        return escaper.innerHTML;
-    }
-    Lightview.escapeHTML = escapeHTML;
+    let currentEffect = null;
 
-    const isArrowFunction = (f) => typeof(f)==="function" && (f+"").match(/\(*.*\)*\s*=>/g);
 
-    const getTemplateVariableName = (template) => {
-        if(template && /^\$\{[a-zA-z_.]*\}$/g.test(template)) return template.substring(2, template.length - 1);
-    }
-
-    const walk = (target,path,depth=path.length-1,create) => {
-        for(let i=0;i<=depth;i++) {
-            target = (target[path[i]]==null && create ?  target[path[i]] = (typeof(create)==="function" ? Object.create(create.prototype) : {}) : target[path[i]]);
-            if(target===undefined) return;
+    const getOrSet = (map, key, factory) => {
+        let v = map.get(key);
+        if (!v) {
+            v = factory();
+            map.set(key, v);
         }
-        return target;
-    }
+        return v;
+    };
 
-    const addListener = (node, eventName, callback, self) => {
-        node.addEventListener(eventName, (event) => {
-            if(self) event.self = self;
-            callback(event);
-        });
-    }
+    const nodeState = new WeakMap();
+    const nodeStateFactory = () => ({ effects: [], onmount: null, onunmount: null });
 
-    const anchorHandler = async (event) => {
-        event.preventDefault();
-        const target = event.target;
-        if (target === event.currentTarget) {
-            const {as} = await importLink(target),
-                targets = querySelectorAll(document, target.getAttribute("target"));
-            targets.forEach((target) => {
-                while (target.lastChild) target.lastChild.remove();
-                target.appendChild(document.createElement(as))
-            })
-        }
-    }
-    const getNameFromPath = (path) => {
-        const file = path.split("/").pop(),
-            name = file.split(".")[0];
-        if (name.includes("-")) return name;
-        return "l-" + name;
-    }
-    const observe = (f, thisArg, argsList = []) => {
-        const observer = (...args) => {
-            if(observer.cancelled) return;
-            CURRENTOBSERVER = observer;
-            try {
-                f.call(thisArg || this, ...argsList, ...args);
-            } catch (e) {
+    const signalRegistry = new Map();
 
-            }
-            CURRENTOBSERVER = null;
-        }
-        observer.cancel = () => observer.cancelled = true;
-        observer();
-        return observer;
-    }
-    const coerce = (value, toType) => {
-        if (value + "" === "null" || value + "" === "undefined" || toType==="any") return value;
-        const type = typeof (value);
-        if (type === toType) return value;
-        if (toType === "number") return parseFloat(value + "");
-        if (toType === "boolean") {
-            if (["on", "checked", "selected"].includes(value)) return true;
-            if (value == null || value === "") return false;
-            try {
-                const parsed = JSON.parse(value + "");
-                if (typeof (parsed) === "boolean") return parsed;
-                return [1, "on", "checked", "selected"].includes(parsed);
-            } catch (e) {
-                throw new TypeError(`Unable to convert ${value} into 'boolean'`);
-            }
-        }
-        if (toType === "string") return value + "";
-        const isfunction = typeof (toType) === "function";
-        if ((toType === "object" || isfunction)) {
-            if (type === "object" && isfunction && value instanceof toType) return value;
-            if (type === "string") {
-                value = value.trim();
+    const signal = (initialValue, optionsOrName) => {
+        let name = typeof optionsOrName === 'string' ? optionsOrName : optionsOrName?.name;
+        const storage = optionsOrName?.storage;
+
+        if (name && storage) {
+            const stored = storage.getItem(name);
+            if (stored !== null) {
+                initialValue = stored;
                 try {
-                    if (isfunction) {
-                        const instance = toType === Date ? new Date() : Object.create(toType.prototype);
-                        if (instance instanceof Array) {
-                            let parsed = tryParse(value.startsWith("[") ? value : `[${value}]`);
-                            if (!Array.isArray(parsed)) {
-                                if (value.includes(",")) parsed = value.split(",");
-                                else {
-                                    parsed = tryParse(`["${value}"]`);
-                                    if (!Array.isArray(parsed) || parsed[0] !== value && parsed.length !== 1) parsed = null;
-                                }
-                            }
-                            if (!Array.isArray(parsed)) {
-                                throw new TypeError(`Expected an Array for parsed data`)
-                            }
-                            instance.push(...parsed);
-                        } else if (instance instanceof Date) {
-                            instance.setTime(Date.parse(value));
-                        } else {
-                            Object.assign(instance, JSON.parse(value));
-                        }
-                        return instance;
-                    }
-                    return JSON.parse(value);
+                    initialValue = JSON.parse(stored);
                 } catch (e) {
-                    throw new TypeError(`Unable to convert ${value} into ${isfunction ? toType.name : type}`);
+                    // Ignore storage errors
                 }
             }
         }
-        throw new TypeError(`Unable to coerce ${value} to ${toType}`)
-    }
-    const Reactor = (data) => {
-        if (data && typeof (data) === "object") {
-            if (data.__isReactor__) return data;
-            const childReactors = [],
-                dependents = {},
-                proxy = new Proxy(data, {
-                    get(target, property) {
-                        if (property === "__isReactor__") return true;
-                        if(property=== "__dependents__") return dependents;
-                        if(property=== "__reactorProxyTarget__") return data;
-                        if (target instanceof Array) {
-                            if (property === "toJSON") return function toJSON() { return [...target]; }
-                            if (property === "toString") return function toString() { return JSON.stringify([...target]); }
-                        }
-                        if(target instanceof Date) {
-                            const value = data[property];
-                            if(typeof(value)==="function") return value.bind(data);
-                        }
-                        let value = target[property];
-                        const type = typeof (value);
-                        if (CURRENTOBSERVER && typeof (property) !== "symbol" && type !== "function") {
-                            const observers = dependents[property] ||= new Set();
-                            observers.add(CURRENTOBSERVER)
-                        }
-                        if(value===undefined) return;
-                        if (childReactors.includes(value) || (value && type !== "object") || typeof (property) === "symbol") {
-                            // Dates and Promises must be bound to work with proxies
-                            if (type === "function" && ([Date].includes(value) || property==="then")) value = value.bind(target)
-                            return value;
-                        }
-                        if (value && type === "object") {
-                            value = Reactor(value);
-                            childReactors.push(value);
-                        }
-                        target[property] = value;
-                        return value;
-                    },
-                    async set(target, property, value) {
-                        if(target instanceof Promise) {
-                            console.warn(`Setting ${property} = ${value} on a Promise in Reactor`);
-                        }
-                        const type = typeof (value);
-                        if(value && type==="object" && value instanceof Promise) value = await value;
-                        if (target[property] !== value) {
-                            if (value && type === "object") {
-                                value = Reactor(value);
-                                childReactors.push(value);
-                            }
-                            target[property] = value;
-                            const observers = dependents[property] || [];
-                            [...observers].forEach((f) => {
-                                if (f.cancelled) dependents[property].delete(f);
-                                else f();
-                            })
-                        }
-                        return true;
-                    }
-                });
-            return proxy;
-        }
-        return data;
-    }
 
-    class VariableEvent {
-        constructor(config) {
-            Object.assign(this, config);
-        }
-    }
+        let value = initialValue;
+        const subscribers = new Set();
 
-    const createVarsProxy = (vars, component, constructor) => {
-        return new Proxy(vars, {
-            get(target, property) {
-                if(property==="self") return component;
-                if(target instanceof Date) return Reflect.get(target,property);
-                let {value,get} = target[property] || {};
-                if(get) return target[property].value = get.call(target[property]);
-                if (typeof (value) === "function") return value.bind(target);
+        const f = (...args) => {
+            if (args.length === 0) return f.value;
+            f.value = args[0];
+        };
+
+        Object.defineProperty(f, 'value', {
+            get() {
+                if (currentEffect) {
+                    subscribers.add(currentEffect);
+                    currentEffect.dependencies.add(subscribers);
+                }
                 return value;
             },
-            set(target, property, newValue) {
-                const event = new VariableEvent({variableName: property, value: newValue});
-                if (target[property] === undefined) {
-                    target[property] = {type: "any", value: newValue}; // should we allow this,  do first to prevent loops
-                    target.postEvent.value("change", event);
-                    if (event.defaultPrevented) delete target[property].value;
-                    return true;
-                }
-                const variable = target[property],
-                    {value, shared, exported, constant, reactive, remote} = variable;
-                let type = variable.type;
-                if (constant) throw new TypeError(`${property}:${type} is a constant`);
-                if(newValue!=null || type.required) newValue = type.validate ? type.validate(newValue,target[property]) : coerce(newValue,type);
-                const newtype = typeof (newValue),
-                    typetype = typeof (type);
-                if ((newValue == null && !type.required) ||
-                    type === "any" ||
-                    (newtype === type && typetype==="string") ||
-                    (typetype === "function" && !type.validate && (newValue && newtype === "object" && newValue instanceof type) || variable.validityState?.valid)) {
-                    if (value !== newValue) {
-                        event.oldValue = value;
-                        target[property].value = reactive ? Reactor(newValue) : newValue; // do first to prevent loops
-                        target.postEvent.value("change", event);
-                        if (event.defaultPrevented) target[property].value = value;
-                        else if(remote && (variable.reactive || remote.put)) remote.handleRemote({variable,config:remote.config},true);
-                        else if(variable.set) variable.set(newValue);
+            set(newValue) {
+                if (value !== newValue) {
+                    value = newValue;
+                    if (name && storage) {
+                        try {
+                            storage.setItem(name, JSON.stringify(value));
+                        } catch (e) {
+                            // Ignore storage errors
+                        }
                     }
-                    return true;
+                    // Copy subscribers to avoid infinite loop when effect re-subscribes during iteration
+                    [...subscribers].forEach(effect => effect());
                 }
-                if (typetype === "function" && newValue && newtype === "object") {
-                    throw new TypeError(`Can't assign instance of '${newValue.constructor.name}' to variable '${property}:${type.name.replace("bound ", "")}'`)
-                }
-                throw new TypeError(`Can't assign '${typeof (newValue)} ${newtype === "string" ? '"' + newValue + '"' : newValue}' to variable '${property}:${typetype === "function" ? type.name.replace("bound ", "") : type} ${type.required ? "required" : ""}'`)
-            },
-            keys() {
-                return [...Object.keys(vars)];
             }
         });
-    }
-    const createObserver = (domNode, framed) => {
-        const mobserver = new MutationObserver((mutations) => {
-            mutations.forEach((mutation) => {
-                const target = mutation.target;
-                if (mutation.type === "attributes") {
-                    //if (framed) debugger;
-                    const name = mutation.attributeName,
-                        value = target.getAttribute(name);
-                    if (framed && name === "message" && target instanceof IFrameElement) {
-                        //if (value) console.log("message", value);
-                        target.removeAttribute(name);
-                        target.dispatchEvent(new CustomEvent("message", {detail: JSON.parse(value)}))
-                    }
-                    if (target.observedAttributes && target.observedAttributes.includes(name) && value !== mutation.oldValue) {
-                        target.setVariableValue(name, value);
-                    }
-                } else if (mutation.type === "childList") {
-                    for (const target of mutation.removedNodes) {
-                        if (target.disconnectedCallback) target.disconnectedCallback();
-                    }
-                    for (const target of mutation.addedNodes) {
-                        if (target.connectedCallback) target.connectedCallback();
-                    }
-                } else if(mutation.type === "characterData") {
-                    if(target.characterDataMutationCallback) target.characterDataMutationCallback(target,mutation.oldValue,target.textContent);
-                }
-            });
+
+        if (name) {
+            signalRegistry.set(name, f);
+        }
+
+        return f;
+    };
+
+    signal.get = (name, defaultValue) => {
+        if (!signalRegistry.has(name) && defaultValue !== undefined) {
+            return signal(defaultValue, name);
+        }
+        return signalRegistry.get(name);
+    };
+
+    const effect = (fn) => {
+        const execute = () => {
+            if (!execute.active) return;
+            // Cleanup old dependencies
+            execute.dependencies.forEach(dep => dep.delete(execute));
+            execute.dependencies.clear();
+
+            currentEffect = execute;
+            fn();
+            currentEffect = null;
+        };
+
+        execute.active = true;
+        execute.dependencies = new Set();
+        execute.stop = () => {
+            execute.dependencies.forEach(dep => dep.delete(execute));
+            execute.dependencies.clear();
+            execute.active = false;
+        };
+        execute();
+        return execute;
+    };
+
+    const trackEffect = (node, effectFn) => {
+        const state = getOrSet(nodeState, node, nodeStateFactory);
+        if (!state.effects) state.effects = [];
+        state.effects.push(effectFn);
+    };
+
+    const computed = (fn) => {
+        const sig = signal(undefined);
+        effect(() => {
+            sig.value = fn();
         });
-        mobserver.observe(domNode, {subtree: true, childList: true});
-        return mobserver;
-    }
-    const querySelectorAll = (node, selector) => {
-        const nodes = [...node.querySelectorAll(selector)],
-            nodeIterator = document.createNodeIterator(node, Node.ELEMENT_NODE);
-        let currentNode;
-        while (currentNode = nodeIterator.nextNode()) {
-            if (currentNode.shadowRoot) nodes.push(...querySelectorAll(currentNode.shadowRoot, selector));
+        return sig;
+    };
+
+
+    // ============= SHADOW DOM SUPPORT =============
+    // Marker symbol to identify shadowDOM directives
+    const SHADOW_DOM_MARKER = Symbol('lightview.shadowDOM');
+
+    /**
+     * Create a shadowDOM directive marker
+     * @param {Object} attributes - { mode: 'open'|'closed', styles?: string[], adoptedStyleSheets?: CSSStyleSheet[] }
+     * @param {Array} children - Children to render inside the shadow root
+     * @returns {Object} - Marker object for setupChildren to process
+     */
+    const createShadowDOMMarker = (attributes, children) => ({
+        [SHADOW_DOM_MARKER]: true,
+        mode: attributes.mode || 'open',
+        styles: attributes.styles || [],
+        adoptedStyleSheets: attributes.adoptedStyleSheets || [],
+        children
+    });
+
+    /**
+     * Check if an object is a shadowDOM marker
+     */
+    const isShadowDOMMarker = (obj) => obj && typeof obj === 'object' && obj[SHADOW_DOM_MARKER] === true;
+
+    /**
+     * Process a shadowDOM marker by attaching shadow root and rendering children
+     * @param {Object} marker - The shadowDOM marker
+     * @param {HTMLElement} parentNode - The DOM node to attach shadow to
+     */
+    const processShadowDOM = (marker, parentNode) => {
+        // Don't attach if already has shadow root
+        if (parentNode.shadowRoot) {
+            console.warn('Lightview: Element already has a shadowRoot, skipping shadowDOM directive');
+            return;
         }
-        return nodes;
-    }
-    const getNodes = (root) => {
-        const nodes = new Set();
-        if (root.shadowRoot) {
-            nodes.add(root);
-            getNodes(root.shadowRoot).forEach((node) => nodes.add(node))
-        } else {
-            for (const node of root.childNodes) {
-                if (node.tagName === "SCRIPT") continue;
-                if (node.nodeType === Node.TEXT_NODE && node.nodeValue?.includes("${")) {
-                    node.template ||= node.nodeValue;
-                    nodes.add(node);
-                } else if (node.nodeType === Node.ELEMENT_NODE) {
-                    let skip;
-                    [...node.attributes].forEach((attr) => {
-                        if (attr.value.includes("${")) {
-                            attr.template ||= attr.value;
-                            nodes.add(node);
-                        } else if (attr.name.includes(":") || attr.name.startsWith("l-")) {
-                            skip = attr.name.includes("l-for:");
-                            nodes.add(node)
-                        }
-                    })
-                    if (node.getAttribute("type") === "radio") nodes.add(node);
-                    if (!skip && !node.shadowRoot) getNodes(node).forEach((node) => nodes.add(node));
+
+        // Attach shadow root
+        const shadowRoot = parentNode.attachShadow({ mode: marker.mode });
+
+        // Split adoptedStyleSheets into sheets and urls
+        const sheets = [];
+        const linkUrls = [...(marker.styles || [])];
+
+        if (marker.adoptedStyleSheets && marker.adoptedStyleSheets.length > 0) {
+            marker.adoptedStyleSheets.forEach(item => {
+                if (item instanceof CSSStyleSheet) {
+                    sheets.push(item);
+                } else if (typeof item === 'string') {
+                    linkUrls.push(item);
                 }
-            }
+            });
         }
-        return nodes;
-    }
 
-    const resolveNodeOrText = (node, component, safe,extras=node.extras||{}) => {
-        const type = typeof (node),
-            template = type === "string" ? node.trim() : node.template;
-        if (template) {
-            const name = getTemplateVariableName(template);
+        // Handle adoptedStyleSheets (modern, efficient approach)
+        if (sheets.length > 0) {
             try {
-                const parts = name ? name.split(".") : null;
-                let value;
-                value = (parts
-                    ? (value = walk(extras,parts)) || (value = walk(component.varsProxy,parts)) || (value == null ? component[name] : value)
-                    : Function("context", "extras", "with(context) { with(extras) { return `" + (safe ? template : Lightview.sanitizeTemplate(template)) + "` } }")(component.varsProxy,extras));
-                //let value = Function("context", "with(context) { return `" + Lightview.sanitizeTemplate(template) + "` }")(component.varsProxy);
-                if(typeof(value)==="function") return value;
-                value = (name || node.nodeType === Node.TEXT_NODE || safe ? value : Lightview.escapeHTML(value));
-                if (type === "string") return value==="undefined" ? undefined : value;
-                if(name) {
-                    node.nodeValue = value==null ? "" : typeof(value)==="string" ? value : JSON.stringify(value);
-                } else {
-                    node.nodeValue = value == "null" || value == "undefined" ? "" : value;
-                }
-                return value;
+                shadowRoot.adoptedStyleSheets = sheets;
             } catch (e) {
-                //console.warn(e);
-                if (!e.message.includes("defined")) throw e; // actually looking for undefined or not defined
-                return undefined;
+                console.warn('Lightview: adoptedStyleSheets not supported');
             }
         }
-        return node?.nodeValue;
-    }
-    const inputTypeToType = (inputType) => {
-        if (!inputType) return "any"
-        if (["text", "tel", "email", "url", "search", "radio", "color", "password"].includes(inputType)) return "string";
-        if (["number", "range"].includes(inputType)) return "number";
-        if (["datetime"].includes(inputType)) return Date;
-        if (["checkbox"].includes(inputType)) return "boolean";
-        return "any";
-    }
-    const importAnchors = (node, component) => {
-        [...node.querySelectorAll('a[href$=".html"][target^="#"]')].forEach((node) => {
-            node.removeEventListener("click", anchorHandler);
-            addListener(node, "click", anchorHandler);
-        })
-    }
-    const bound = new WeakSet();
-    const bindInput = (input, variableName, component, value, object) => {
-        if (bound.has(input)) return;
-        bound.add(input);
-        const inputtype = input.tagName === "SELECT" || input.tagName === "TEXTAREA" ? "text" : input.getAttribute("type"),
-            nameparts = variableName.split(".");
-        let type = input.tagName === "SELECT" && input.hasAttribute("multiple") ? Array : inputTypeToType(inputtype);
-        const variable = walk(component.vars,nameparts) || {type};
-        if(type==="any") type = variable?.type.type || variable?.type;
-        if(value==null) {
-            const avalue = input.getAttribute("value");
-            if(avalue) value = avalue;
-        }
-        if(object && nameparts.length>1) {
-            const [root,...path] = nameparts;
-            object = walk(object,path,path.length-2,true);
-            const key = path[path.length-1];
-            object[key] =  coerce(value,type);
-        } else {
-            const existing = component.vars[variableName];
-            if(existing) {
-                existingtype = existing?.type.type || existing?.type;
-                if(existingtype!==type) throw new TypeError(`Attempt to bind <input name="${variableName}" type="${type}"> to variable ${variableName}:${existing.type}`)
-                existing.reactive = true;
-            } else {
-                component.variables({[variableName]: type},{reactive});
-            }
-            if(inputtype!=="radio") {
-                if(typeof(value)==="string" && value.includes("${")) input.setAttribute("value","");
-                else component.setVariableValue(variableName, coerce(value,type));
-            }
+
+        // Inject stylesheet links
+        for (const styleUrl of linkUrls) {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = styleUrl;
+            shadowRoot.appendChild(link);
         }
-        let eventname = "change";
-        if(input.tagName==="FORM") {
-            eventname = "submit"
-        } else if (input.tagName !== "SELECT" && (!inputtype || input.tagName === "TEXTAREA" || ["text", "number", "tel", "email", "url", "search", "password"].includes(inputtype))) {
-            eventname = "input";
+
+        // Setup children inside shadow root
+        if (marker.children && marker.children.length > 0) {
+            setupChildrenInTarget(marker.children, shadowRoot);
         }
-        const listener = (event) => {
-            if (event) event.stopImmediatePropagation();
-            let value = input.value;
-            if (inputtype === "checkbox") {
-                value = input.checked
-            } else if (input.tagName === "SELECT" && input.hasAttribute("multiple")) {
-                value = [...input.querySelectorAll("option")]
-                    .filter((option) => option.selected || resolveNodeOrText(option.attributes.value || option.innerText, component) === value)
-                    .map((option) => option.getAttribute("value") || option.innerText);
-            }
-            if(object) {
-                const [root,...path] = nameparts;
-                object = walk(object,nameparts,path.length-2,true);
-            } else {
-                object = walk(component.varsProxy,nameparts,nameparts.length-2,true);
-            }
-            const key = nameparts[nameparts.length-1];
-            object[key] =  coerce(value,type);
+    };
+
+    // ============= REACTIVE UI =============
+    const SVG_TAGS = new Set([
+        'svg', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'g', 'defs', 'marker',
+        'pattern', 'mask', 'image', 'text', 'tspan', 'foreignObject', 'use', 'symbol', 'clipPath',
+        'linearGradient', 'radialGradient', 'stop', 'filter', 'animate', 'animateMotion',
+        'animateTransform', 'mpath', 'desc', 'metadata', 'title', 'feBlend', 'feColorMatrix',
+        'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting',
+        'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB',
+        'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode',
+        'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight',
+        'feTile', 'feTurbulence', 'view'
+    ]);
+
+    const domToElement = new WeakMap();
+
+    const wrapDomElement = (domNode, tag, attributes = {}, children = []) => {
+        const el = {
+            tag,
+            attributes,
+            children,
+            get domEl() { return domNode; }
         };
-        addListener(input, eventname, listener,component);
-    }
-    const tryParse = (value) => {
-        try {
-            return JSON.parse(value);
-        } catch (e) {
-            return value;
+        const proxy = makeReactive(el);
+        domToElement.set(domNode, proxy);
+        return proxy;
+    };
+
+    const element = (tag, attributes = {}, children = []) => {
+        if (customTags[tag]) tag = customTags[tag];
+        // If tag is a function (component), call it and process the result
+        if (typeof tag === 'function') {
+            const result = tag({ ...attributes }, children);
+            return processComponentResult(result);
         }
-    }
-    const observed = () => {
-        return {
-            init({variable, component}) {
-                const name = variable.name;
-                variable.value = component.hasAttribute(name) ? coerce(component.getAttribute(name), variable.type) : variable.value;
-                variable.observed = true;
-                component.observedAttributes.add(variable.name);
-            }
+
+        // Special handling for shadowDOM pseudo-element
+        if (tag === 'shadowDOM') {
+            return createShadowDOMMarker(attributes, children);
         }
-    }
-    const reactive = () => {
-        return {
-            init({variable, component}) {
-                variable.reactive = true;
-                component.vars[variable.name] = Reactor(variable);
-            }
+
+        const isSvg = SVG_TAGS.has(tag.toLowerCase());
+        const domNode = isSvg
+            ? 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;
+        return proxy;
+    };
+
+    // Process component function return value (HTML string, DOM node, vDOM, or Object DOM)
+    const processComponentResult = (result) => {
+        if (!result) return null;
+
+        // Already a Lightview element
+        if (result.domEl) return result;
+
+        // DOM node - wrap it
+        if (result instanceof HTMLElement) {
+            return wrapDomElement(result, result.tagName.toLowerCase(), {}, []);
         }
-    }
-    const shared = () => {
-        return {
-            init({variable, component}) {
-                variable.shared = true;
-                variable.set = function(newValue) {
-                    if(component.vars[this.name]?.shared) component.siblings.forEach((instance) => instance.setVariableValue(this.name, newValue));
-                }
+
+        // HTML string - parse and wrap
+        if (typeof result === 'string') {
+            const template = document.createElement('template');
+            template.innerHTML = result.trim();
+            const content = template.content;
+            // If single element, return it; otherwise wrap in a fragment-like span
+            if (content.childNodes.length === 1 && content.firstChild instanceof HTMLElement) {
+                const el = content.firstChild;
+                return wrapDomElement(el, el.tagName.toLowerCase(), {}, []);
+            } else {
+                const wrapper = document.createElement('span');
+                wrapper.style.display = 'contents';
+                wrapper.appendChild(content);
+                return wrapDomElement(wrapper, 'span', {}, []);
             }
         }
-    }
-    const exported = () => {
-        return {
-            init({variable, component}) {
-                const name = variable.name;
-                variable.exported = true;
-                variable.set = (newValue) => {
-                    if(variable.exported) {
-                        if(newValue==null) {
-                            removeComponentAttribute(component, name);
-                        } else {
-                            newValue = typeof (newValue) === "string" ? newValue : JSON.stringify(newValue);
-                            setComponentAttribute(component, name, newValue);
-                        }
-                    }
-                }
-                variable.set(variable.value);
-            }
+
+        // vDOM object with tag property
+        if (typeof result === 'object' && result.tag) {
+            return element(result.tag, result.attributes || {}, result.children || []);
         }
-    }
-    const imported = () => {
-        return {
-            init({variable, component}) {
-                const name = variable.name;
-                variable.imported = true;
-                variable.value = component.hasAttribute(name) ? coerce(component.getAttribute(name), variable.type) : variable.value;
+
+        // Object DOM syntax will be handled by processChild hook in lightview-x
+        // But we can do basic detection here
+        if (typeof result === 'object') {
+            const keys = Object.keys(result);
+            if (keys.length === 1 && typeof result[keys[0]] === 'object') {
+                const tag = keys[0];
+                const content = result[tag];
+                const { children, ...attributes } = content;
+                return element(tag, attributes, children || []);
             }
         }
-    }
 
-    let reserved = {
-        observed: {
-            constant: true,
-            value: observed
-        },
-        reactive: {
-            constant: true,
-            value: reactive
-        },
-        shared: {
-            constant: true,
-            value: shared
-        },
-        exported: {
-            constant: true,
-            value: exported
-        },
-        imported: {
-            constant: true,
-            value: imported
-        }
+        return null;
     };
-    const createClass = (domElementNode, {observer, framed, href=window.location.href}) => {
-        const instances = new Set(),
-            observedAttributes = [];
-        /*let dom = domElementNode.tagName === "TEMPLATE"
-            ? domElementNode.content.cloneNode(true)
-            : domElementNode.cloneNode(true);*/
-        let dom;
-        observedAttributes.add = function(name) { observedAttributes.includes(name) || observedAttributes.push(name); }
-        const cls = class CustomElement extends HTMLElement {
-            static get instances() {
-                return instances;
-            }
-            static setTemplateNode(node) {
-                dom = node.tagName === "TEMPLATE"
-                    ? document.createElement("div")
-                    : node.cloneNode(true);
-                if(node.tagName === "TEMPLATE") {
-                    dom.innerHTML = node.innerHTML;
-                    [...node.attributes].forEach((attr) => dom.setAttribute(attr.name,attr.value));
-                    document.currentComponent = node;
-                    document.currentComponent.componentBaseURI = window.location.href;
-                    const lvscript = dom.querySelector("#lightview");
-                    if(lvscript) {
-                        const script = document.createElement("script");
-                        script.innerHTML = lvscript.innerHTML;
-                        document.head.appendChild(script);
-                        script.remove();
-                    }
-                    document.currentComponent = null;
+
+    const makeReactive = (el) => {
+        const domNode = el.domEl;
+
+        return new Proxy(el, {
+            set(target, prop, value) {
+                if (prop === 'attributes') {
+                    target[prop] = makeReactiveAttributes(value, domNode);
+                } else if (prop === 'children') {
+                    target[prop] = setupChildren(value, domNode);
+                } else {
+                    target[prop] = value;
                 }
-                dom.mount = node.mount;
-            }
-            constructor() {
-                super();
-                this.componentBaseURI = href;
-                instances.add(this);
-                const currentComponent =  document.currentComponent =this,
-                    shadow = this.attachShadow({mode: "open"}),
-                    eventlisteners = {};
-                this.vars = {
-                    ...reserved,
-                    observe: {
-                        value: (...args) => observe(...args),
-                        type: "function",
-                        constant: true
-                    },
-                    addEventListener: {
-                        value: (eventName, listener) => {
-                            const listeners = eventlisteners[eventName] ||= new Set();
-                            [...listeners].forEach((f) => {
-                                if (listener + "" === f + "") listeners.delete(f);
-                            })
-                            eventlisteners[eventName].add(listener);
-                        },
-                        type: "function",
-                        constant: true
-                    },
-                    postEvent: {
-                        value: (eventName, event = {}) => {
-                            //event = {...event}
-                            event.type = eventName;
-                            event.target = currentComponent;
-                            eventlisteners[eventName]?.forEach((f) => f(event));
-                        },
-                        type: "function",
-                        constant: true
-                    },
-                    self: {value: currentComponent, type: CustomElement, constant: true}
-                };
-                this.varsProxy = createVarsProxy(this.vars, this, CustomElement);
-                if (framed || CustomElement.lightviewFramed) this.variables({message: Object}, {exported});
-                ["getElementById", "querySelector", "querySelectorAll"]
-                    .forEach((fname) => {
-                        Object.defineProperty(this, fname, {
-                            configurable: true,
-                            writable: true,
-                            value: (...args) => this.shadowRoot[fname](...args)
-                        })
-                    });
-                [...dom.childNodes].forEach((child) => {
-                    if(child.tagName && customElements.get(child.tagName.toLowerCase())) {
-                        const node = document.createElement(child.tagName);
-                        [...child.attributes].forEach((attr) => node.setAttribute(attr.name,attr.value));
-                        document.currentComponent = node;
-                        shadow.appendChild(node);
-                    } else {
-                        const node = child.cloneNode(true);
-                        shadow.appendChild(node);
-                    }
-                });
-                importAnchors(shadow, this);
+                return true;
             }
+        });
+    };
 
-            get siblings() {
-                return [...CustomElement.instances].filter((sibling) => sibling != this);
+    // Boolean attributes that should be present/absent rather than having a value
+    const BOOLEAN_ATTRIBUTES = new Set([
+        'disabled', 'checked', 'readonly', 'required', 'hidden', 'autofocus',
+        'autoplay', 'controls', 'loop', 'muted', 'default', 'defer', 'async',
+        'novalidate', 'formnovalidate', 'open', 'selected', 'multiple', 'reversed',
+        'ismap', 'nomodule', 'playsinline', 'allowfullscreen', 'inert'
+    ]);
+
+    // Set attribute with proper handling of boolean attributes and undefined/null values
+    const setAttributeValue = (domNode, key, value) => {
+        const isBooleanAttr = BOOLEAN_ATTRIBUTES.has(key.toLowerCase());
+
+        if (value === null || value === undefined) {
+            domNode.removeAttribute(key);
+        } else if (isBooleanAttr) {
+            if (value && value !== 'false') {
+                domNode.setAttribute(key, '');
+            } else {
+                domNode.removeAttribute(key);
             }
+        } else {
+            domNode.setAttribute(key, value);
+        }
+    };
 
-            adoptedCallback() {
-                if (this.hasOwnProperty("adoptedCallback")) this.adoptedCallback();
-            }
+    const makeReactiveAttributes = (attributes, domNode) => {
+        const reactiveAttrs = {};
 
-            disconnectedCallback() {
-                instances.delete(this);
-            }
+        for (let [key, value] of Object.entries(attributes)) {
+            if (key === 'onmount' || key === 'onunmount') {
+                const state = getOrSet(nodeState, domNode, nodeStateFactory);
+                state[key] = value;
 
-            connectedCallback() {
-                [...dom.attributes].forEach((attr) => {
-                    if(!this.hasAttribute(attr.name)) this.setAttribute(attr.name,attr.value);
-                })
-                if(dom.mount) {
-                    const script = document.createElement("script");
-                    document.currentComponent = this;
-                    script.innerHTML = `with(document.currentComponent.varsProxy) { 
-                        const component = document.currentComponent; 
-                        (async () => { await (${dom.mount}).call(self,self); 
-                        component.compile();  })(); 
-                    };`;
-                    this.appendChild(script);
-                    script.remove();
-                    document.currentComponent = null;
+                if (key === 'onmount' && domNode.isConnected) {
+                    value(domNode);
                 }
-            }
-            compile() {
-                // Promise.all(promises).then(() => {
-                const ctx = this,
-                    shadow = this.shadowRoot;
-                const nodes = getNodes(ctx),
-                    processNodes = (nodes,object) => {
-                        nodes.forEach((node) => {
-                            if (node.nodeType === Node.TEXT_NODE && node.template.includes("${")) {
-                                observe(() => resolveNodeOrText(node, this,true,node.extras));
-                                if(node.parentElement?.tagName==="TEXTAREA") {
-                                    const name = getTemplateVariableName(node.template);
-                                    if (name) {
-                                        const nameparts = name.split(".");
-                                        if(node.extras && node.extras[nameparts[0]]) {
-                                            object = node.extras[nameparts[0]];
-                                        }
-                                        if(!this.vars[nameparts[0]] || this.vars[nameparts[0]].reactive || object) {
-                                            bindInput(node.parentElement, name, this, resolveNodeOrText(node.template, this,true,node.extras), object);
-                                        }
-                                    }
-                                }
-                            } else if (node.nodeType === Node.ELEMENT_NODE) {
-                                // resolve the value before all else;
-                                const attr = node.attributes.value,
-                                    template = attr?.template;
-                                if (attr && template) {
-                                    //let value = resolveNodeOrText(attr, this),
-                                    //   ;
-                                    const eltype = node.attributes.type ? resolveNodeOrText(node.attributes.type, ctx, false,node.extras) : null,
-                                        template = attr.template;
-                                    if (template) {
-                                        const name = getTemplateVariableName(template);
-                                        if (name) {
-                                            const nameparts = name.split(".");
-                                            if(node.extras && node.extras[nameparts[0]]) {
-                                                object = node.extras[nameparts[0]];
-                                            }
-                                            if(!this.vars[nameparts[0]] || this.vars[nameparts[0]].reactive || object) {
-                                                bindInput(node, name, this, resolveNodeOrText(attr, this,false,node.extras), object);
-                                            }
-                                        }
-                                        observe(() => {
-                                            const value = resolveNodeOrText(template, ctx,false,node.extras);
-                                            if(value!==undefined) {
-                                                if (eltype === "checkbox") {
-                                                    if (coerce(value, "boolean") === true) {
-                                                        node.setAttribute("checked", "");
-                                                        node.checked = true;
-                                                    } else {
-                                                        node.removeAttribute("checked");
-                                                        node.checked = false;
-                                                    }
-                                                } else if (node.tagName === "SELECT") {
-                                                    let values = [value];
-                                                    if (node.hasAttribute("multiple")) values = coerce(value, Array);
-                                                    [...node.querySelectorAll("option")].forEach(async (option) => {
-                                                        if (option.hasAttribute("value")) {
-                                                            if (values.includes(resolveNodeOrText(option.attributes.value, ctx,false,node.extras))) {
-                                                                option.setAttribute("selected", "");
-                                                                option.selected = true;
-                                                            }
-                                                        } else if (values.includes(resolveNodeOrText(option.innerText, ctx,false,node.extras))) {
-                                                            option.setAttribute("selected", "");
-                                                            option.selected = true;
-                                                        }
-                                                    })
-                                                } else if (eltype!=="radio") {
-                                                    //attr.value = typeof(value)==="string" ? value : JSON.stringify(value);
-                                                    let avalue = typeof(value)==="string" ? value : value.toString ? value.toString() : JSON.stringify(value);
-                                                    if(avalue.startsWith('"')) avalue = avalue.substring(1);
-                                                    if(avalue.endsWith('"')) avalue = avalue.substring(0,avalue.length-1);
-                                                    attr.value = avalue;
-                                                }
-                                            }
-                                        });
-                                    }
-                                }
-                                [...node.attributes].forEach(async (attr) => {
-                                    if (attr.name === "value" && attr.template) return;
-                                    const {name, value} = attr,
-                                        vname = node.attributes.name?.value;
-                                    if(value.includes("${")) attr.template = value;
-                                    if (name === "type" && value=="radio" && vname) {
-                                        bindInput(node, vname, this, undefined, object);
-                                        observe(() => {
-                                            const varvalue =  Function("context", "with(context) { return `${" + vname + "}` }")(ctx.varsProxy);
-                                            if (node.attributes.value.value == varvalue) {
-                                                node.setAttribute("checked", "");
-                                                node.checked = true;
-                                            } else {
-                                                node.removeAttribute("checked");
-                                                node.checked = false;
-                                            }
-                                        });
-                                    }
-
-                                    const [type, ...params] = name.split(":");
-                                    if (type === "") { // name is :something
-                                        observe(() => {
-                                            const value = attr.value;
-                                            if (params[0]) {
-                                                if (value === "true") node.setAttribute(params[0], "")
-                                                else node.removeAttribute(params[0]);
-                                            } else {
-                                                const elvalue = node.attributes.value ? resolveNodeOrText(node.attributes.value, ctx,false,node.extras) : null,
-                                                    eltype = node.attributes.type ? resolveNodeOrText(node.attributes.type, ctx,false,node.extras) : null;
-                                                if (eltype === "checkbox" || node.tagName === "OPTION") {
-                                                    if (elvalue === true) node.setAttribute("checked", "")
-                                                    else node.removeAttribute("checked");
-                                                }
-                                            }
-                                        })
-                                    } else if (type === "l-on") {
-                                        let listener;
-                                        observe(() => {
-                                            const value = resolveNodeOrText(attr, this,true,node.extras);
-                                            if (listener) node.removeEventListener(params[0], listener);
-                                            listener = null;
-                                            if(typeof(value)==="function") {
-                                                listener = value;
-                                            } else {
-                                                try {
-                                                    listener = Function("return " + value)();
-                                                } catch(e) {
-
-                                                }
-                                            }
-                                            if(listener) addListener(node, params[0], listener,ctx);
-                                        })
-                                    } else if (type === "l-if") {
-                                        observe(() => {
-                                            const value = resolveNodeOrText(attr, this,true,node.extras);
-                                            node.style.setProperty("display", value == true || value === "true" ? "revert" : "none");
-                                        })
-                                    } else if (type === "l-for") {
-                                        node.template ||= node.innerHTML;
-                                        node.clone ||= node.cloneNode(true);
-                                        observe(() => {
-                                            const [what = "each", vname = "item", index = "index", array = "array", after = false] = params,
-                                                value = resolveNodeOrText(attr, this,false,node.extras),
-                                                coerced = coerce(value, what === "each" ? Array : "object"),
-                                                target = what === "each" ? coerced : Object[what](coerced),
-                                                children = target.reduce((children,item,i,target) => {
-                                                    const clone = node.clone.cloneNode(true),
-                                                        extras = node.extras = {
-                                                            [vname]: item,
-                                                            [index]: i,
-                                                            [array]: target
-                                                        },
-                                                        nodes = [...getNodes(clone)].map((node) => {
-                                                            node.extras = extras;
-                                                            return node;
-                                                        });
-                                                    processNodes(nodes);
-                                                    children.push(...clone.childNodes);
-                                                    return children;
-                                                },[]);
-                                            if (!window.lightviewDebug) {
-                                                if (after) {
-                                                    node.style.setProperty("display", "none")
-                                                } else {
-                                                    while (node.lastElementChild) node.lastElementChild.remove();
-                                                }
-                                            }
-                                            //const nodes = getNodes(parsed.body);
-                                            children.forEach((child) => {
-                                                //while (parsed.body.firstChild) {
-                                                //const child = parsed.body.firstChild;
-                                                if (after) node.parentElement.insertBefore(child, node);
-                                                else node.appendChild(child);
-                                            })
-                                            //processNodes(nodes);
-                                        })
-                                    } else if(attr.template) {
-                                        observe(() => {
-                                            resolveNodeOrText(attr, this,false,node.extras);
-                                        })
-                                    }
-                                })
-                            }
-                        })
-                    };
-                nodes.forEach((node) => {
-                    if(node.tagName==="FORM") {
-                        const value = node.getAttribute("value"),
-                            name = getTemplateVariableName(value);
-                        if(name) {
-                            const childnodes = [...nodes].filter((childnode) => node!==childnode && node.contains(childnode));
-                            childnodes.forEach((node) => nodes.delete(node));
-                            const variable = ctx.vars[name] ||= {type: "object", reactive:true, value: Reactor({})};
-                            if(variable.type !== "object" || !variable.reactive || !variable.value || typeof(variable.value)!=="object") {
-                                throw new TypeError(`Can't bind form ${node.getAttribute("id")} to non-object variable ${name}`);
-                            }
-                            processNodes(childnodes,variable.value);
-                        }
+            } else if (key.startsWith('on')) {
+                // Event handler
+                if (typeof value === 'function') {
+                    // Function handler - use addEventListener
+                    const eventName = key.slice(2).toLowerCase();
+                    domNode.addEventListener(eventName, value);
+                } else if (typeof value === 'string') {
+                    // String handler (from parsed HTML) - use setAttribute
+                    // Browser will compile the string into a handler function
+                    domNode.setAttribute(key, value);
+                }
+                reactiveAttrs[key] = value;
+            } else if (typeof value === 'function') {
+                // Reactive binding
+                const runner = effect(() => {
+                    const result = value();
+                    if (key === 'style' && typeof result === 'object') {
+                        Object.assign(domNode.style, result);
+                    } else {
+                        setAttributeValue(domNode, key, result);
                     }
-                })
-                processNodes(nodes);
-                shadow.normalize();
-                observer ||= createObserver(ctx, framed);
-                observer.observe(ctx, {attributeOldValue: true, subtree:true, characterData:true, characterDataOldValue:true});
-                if(this.hasAttribute("l-unhide")) this.removeAttribute("hidden");
-                //ctx.vars.postEvent.value("connected");
-                this.dispatchEvent(new Event("mounted"));
-                // })
-            }
-            adoptedCallback(callback) {
-                this.dispatchEvent(new Event("adopted"));
-            }
-            disconnectedCallback() {
-                this.dispatchEvent(new Event("disconnected"));
-            }
-            get observedAttributes() {
-                return CustomElement.observedAttributes;
-            }
-            static get observedAttributes() {
-                return observedAttributes;
+                });
+                trackEffect(domNode, runner);
+                reactiveAttrs[key] = value;
+            } else if (key === 'style' && typeof value === 'object') {
+                // Handle style object which may contain reactive values
+                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 {
+                // Static attribute - handle undefined/null/boolean properly
+                setAttributeValue(domNode, key, value);
+                reactiveAttrs[key] = value;
             }
+        }
 
-            getVariableNames() {
-                return Object.keys(this.vars)
-                    .filter(name => !(name in reserved) && !["self", "addEventListener", "postEvent","observe"].includes(name))
+        return reactiveAttrs;
+    };
+
+    /**
+     * Core child processing logic - shared between setupChildren and setupChildrenInTarget
+     * @param {Array} children - Children to process
+     * @param {HTMLElement|ShadowRoot} targetNode - Where to append children
+     * @param {boolean} clearExisting - Whether to clear existing content
+     * @returns {Array} - Processed child elements
+     */
+    const processChildren = (children, targetNode, clearExisting = true) => {
+        if (clearExisting && targetNode.innerHTML !== undefined) {
+            targetNode.innerHTML = ''; // Clear existing
+        }
+        const childElements = [];
+
+        // Check if we're processing children of script or style elements
+        // These need raw text content preserved, not reactive transformations
+        const isSpecialElement = targetNode.tagName &&
+            (targetNode.tagName.toLowerCase() === 'script' || targetNode.tagName.toLowerCase() === 'style');
+
+        for (let child of children) {
+            // Allow extensions to transform children (e.g., template literals)
+            // BUT skip for script/style elements which need raw content
+            if (Lightview.hooks.processChild && !isSpecialElement) {
+                child = Lightview.hooks.processChild(child) ?? child;
             }
 
-            getVariable(name) {
-                return this.vars[name] ? {...this.vars[name]} : undefined;
+            // Handle nested arrays (flattening)
+            if (Array.isArray(child)) {
+                childElements.push(...processChildren(child, targetNode, false));
+                continue;
             }
 
-            setVariableValue(variableName, value, {coerceTo = typeof (value)} = {}) {
-                if (!this.isConnected) {
-                    instances.delete(this);
-                    return false;
+            // Handle shadowDOM markers - attach shadow to parent and process shadow children
+            if (isShadowDOMMarker(child)) {
+                // targetNode is the parent element that should get the shadow root
+                // For ShadowRoot targets, we can't attach another shadow, so warn
+                if (targetNode instanceof ShadowRoot) {
+                    console.warn('Lightview: Cannot nest shadowDOM inside another shadowDOM');
+                    continue;
                 }
-                let {type} = this.vars[variableName] || {};
-                if (type) {
-                    if (this.varsProxy[variableName] !== value) {
-                        const variable = this.vars[variableName];
-                        if (variable.shared) {
-                            value = type.validate ? type.validate(value,variable) : coerce(value,coerceTo);
-                            const event = new VariableEvent({
-                                variableName: variableName,
-                                value: value,
-                                oldValue: variable.value
-                            });
-                            variable.value = value;
-                            this.vars.postEvent.value("change", event);
-                            if (event.defaultPrevented) variable.value = value;
-                        } else {
-                            this.varsProxy[variableName] = value;
+                processShadowDOM(child, targetNode);
+                continue;
+            }
+
+            const type = typeof child;
+            if (type === 'function') {
+                const result = child();
+                // Determine if the result implies complex content (DOM/vDOM/Array)
+                // Treat as complex if it's an object (including arrays) but not null
+                const isComplex = result && (typeof result === 'object' || Array.isArray(result));
+
+                if (isComplex) {
+                    // Reactive element, vDOM object, or list of items
+                    // Use a stable wrapper div to hold the reactive content
+                    const wrapper = document.createElement('span');
+                    wrapper.style.display = 'contents';
+                    targetNode.appendChild(wrapper);
+
+                    let runner;
+                    const update = () => {
+                        const val = child();
+                        // Check if wrapper is still in the DOM (skip check on first run)
+                        if (runner && !wrapper.parentNode) {
+                            runner.stop();
+                            return;
                         }
-                    }
-                    return true;
-                }
-                this.vars[variableName] = {name, type: coerceTo, value: coerce(value, coerceTo)};
-                return false;
-            }
-
-            getVariableValue(variableName) {
-                return this.vars[variableName]?.value;
-            }
+                        const childrenToProcess = Array.isArray(val) ? val : [val];
+                        // processChildren handles clearing existing content via 3rd arg=true
+                        processChildren(childrenToProcess, wrapper, true);
+                    };
 
-            variables(variables, {remote, constant,set,...rest} = {}) { // options = {observed,reactive,shared,exported,imported}
-                const options = {remote, constant,...rest},
-                    addEventListener = this.varsProxy.addEventListener;
-                if (variables !== undefined) {
-                    Object.entries(variables)
-                        .forEach(([key, type]) => {
-                            if(isArrowFunction(type)) type = type();
-                            const variable = this.vars[key] ||= {name: key, type};
-                            if(set!==undefined && constant!==undefined) throw new TypeError(`${key} has the constant value ${constant} and can't be set to ${set}`);
-                            variable.value = set;
-                            if(constant!==undefined) {
-                                if(remote || imported) throw new TypeError(`${key} can't be a constant and also remote or imported`)
-                                variable.constant = true;
-                                variable.value = constant;
-                            }
-                            if (remote) {
-                                if(typeof(remote)==="function") remote = remote(`./${key}`);
-                                variable.remote = remote;
-                                remote.handleRemote({variable, config:remote.config,component:this});
-                            }
-                            // todo: handle custom functional types, remote should actually be handled this way
-                            Object.entries(rest).forEach(([type,f]) => {
-                                const functionalType = variable[type] = typeof(f)==="function" ? f() : f;
-                                if(functionalType.init) functionalType.init({variable,options,component:this});
-                                if((rest.get!==undefined || rest.set!==undefined) && constant!==undefined) throw new TypeError(`${key} has the constant value ${constant} and can't have a getter or setter`);
-                                variable.set != functionalType.set;
-                                variable.get != functionalType.get;
-                            });
-                            if(type.validate && variable.value!==undefined) type.validate(variable.value,variable);
-                        });
+                    runner = effect(update);
+                    trackEffect(wrapper, runner);
+                    childElements.push(child);
+                } else {
+                    // Reactive text node for primitives
+                    const textNode = document.createTextNode('');
+                    targetNode.appendChild(textNode);
+                    const runner = effect(() => {
+                        const val = child();
+                        textNode.textContent = val !== undefined ? val : '';
+                    });
+                    trackEffect(textNode, runner);
+                    childElements.push(child);
                 }
-                return Object.entries(this.vars)
-                    .reduce((result, [key, variable]) => {
-                        result[key] = {...variable};
-                        return result;
-                    }, {});
+            } else if (['string', 'number', 'boolean', 'symbol'].includes(type)) {
+                // Static text
+                targetNode.appendChild(document.createTextNode(child));
+                childElements.push(child);
+            } else if (child && type === 'object' && child.tag) {
+                // Child element (already wrapped or plain object) - tag can be string or function
+                const childEl = child.domEl ? child : element(child.tag, child.attributes || {}, child.children || []);
+                targetNode.appendChild(childEl.domEl);
+                childElements.push(childEl);
             }
         }
-        cls.setTemplateNode(domElementNode);
-        return cls;
-    }
 
-    const createComponent = (name, node, {framed, observer, href} = {}) => {
-        let ctor = customElements.get(name);
-        if (ctor) {
-            if (framed && !ctor.lightviewFramed) ctor.lightviewFramed = true;
-            else console.warn(new Error(`${name} is already a CustomElement. Not redefining`));
-            return ctor;
-        }
-        ctor = createClass(node, {observer, framed, href});
-        customElements.define(name, ctor);
-        Lightview.customElements.set(name, ctor);
-        return ctor;
-    }
-    Lightview.customElements = new Map();
-    Lightview.createComponent = createComponent;
-    const importLink = async (link, observer) => {
-        const url = (new URL(link.getAttribute("href"), window.location.href)),
-            as = link.getAttribute("as") || getNameFromPath(url.pathname);
-        if (url.hostname !== window.location.hostname && !link.getAttribute("crossorigin")) {
-            throw new URIError(`importLink:HTML imports must be from same domain: ${url.hostname}!=${location.hostname} unless 'crossorigin' attribute is set.`)
+        return childElements;
+    };
+
+    /**
+     * Setup children in a target node (for shadow roots and other targets)
+     * Does not clear existing content
+     */
+    const setupChildrenInTarget = (children, targetNode) => {
+        return processChildren(children, targetNode, false);
+    };
+
+    /**
+     * Setup children on a DOM node, clearing existing content
+     */
+    const setupChildren = (children, domNode) => {
+        return processChildren(children, domNode, true);
+    };
+
+    // ============= EXPORTS =============
+    const enhance = (selectorOrNode, options = {}) => {
+        const domNode = typeof selectorOrNode === 'string'
+            ? document.querySelector(selectorOrNode)
+            : selectorOrNode;
+
+        // If it's already a Lightview element, use its domEl
+        const node = domNode.domEl || domNode;
+        if (!(node instanceof HTMLElement)) return null;
+
+        const tagName = node.tagName.toLowerCase();
+        let el = domToElement.get(node);
+
+        if (!el) {
+            el = wrapDomElement(node, tagName);
         }
-        if (!customElements.get(as)) {
-            const html = await (await fetch(url.href)).text(),
-                dom = parser.parseFromString(html, "text/html"),
-                unhide = !!dom.head.querySelector('meta[name="l-unhide"]'),
-                modulelinks = dom.head.querySelectorAll('link[href$=".html"][rel=module]');
-            for (const childlink of modulelinks) {
-                const href = childlink.getAttribute("href"),
-                    childurl = new URL(href, url.href);
-                childlink.setAttribute("href", childurl.href);
-                if (link.hasAttribute("crossorigin")) childlink.setAttribute("crossorigin", link.getAttribute("crossorigin"))
-                await importLink(childlink, observer);
-            }
-            const links =  dom.head.querySelectorAll('link:not([href$=".html"][rel=module])');
-            for(const childlink of links) {
-                const href = childlink.getAttribute("href"),
-                    childurl = new URL(href, url.href);
-                childlink.setAttribute("href", childurl.href);
-                if (link.hasAttribute("crossorigin")) childlink.setAttribute("crossorigin", link.getAttribute("crossorigin"));
-                dom.body.insertBefore(childlink,dom.body.firstChild);
-            }
-            document.currentComponent = dom.body;
-            document.currentComponent.componentBaseURI = url.href;
-            const lvscript = dom.getElementById("lightview");
-            if(lvscript) {
-                const script = document.createElement("script");
-                script.innerHTML = lvscript.innerHTML;
-                document.body.appendChild(script);
-                script.remove();
+
+        const { innerText, innerHTML, ...attrs } = options;
+
+        if (innerText !== undefined) {
+            if (typeof innerText === 'function') {
+                effect(() => { node.innerText = innerText(); });
+            } else {
+                node.innerText = innerText;
             }
-            document.currentComponent = null;
-            createComponent(as, dom.body, {observer,href:url.href});
-            if (unhide) dom.body.removeAttribute("hidden");
-        }
-        return {as};
-    }
-    const importLinks = async () => {
-        const observer = createObserver(document.body);
-        for (const link of [...document.querySelectorAll(`link[href$=".html"][rel=module]`)]) {
-            await importLink(link, observer);
         }
-    }
 
-    const bodyAsComponent = ({as = "x-body", unhide, framed} = {}) => {
-        const parent = document.body.parentElement;
-        createComponent(as, document.body, {framed});
-        const component = document.createElement(as);
-        parent.replaceChild(component, document.body);
-        Object.defineProperty(document, "body", {
-            enumerable: true, configurable: true, get() {
-                return component;
-            }
-        });
-        if (unhide) component.removeAttribute("hidden");
-    }
-    Lightview.bodyAsComponent = bodyAsComponent;
-    const postMessage = (data, target = window.parent) => {
-        if (postMessage.enabled) {
-            if (target instanceof HTMLIFrameElement) {
-                data = {...data, href: window.location.href};
-                target.contentWindow.postMessage(JSON.stringify(data), "*");
+        if (innerHTML !== undefined) {
+            if (typeof innerHTML === 'function') {
+                effect(() => { node.innerHTML = innerHTML(); });
             } else {
-                data = {...data, iframeId: document.lightviewId, href: window.location.href};
-                target.postMessage(JSON.stringify(data), "*");
+                node.innerHTML = innerHTML;
             }
         }
-    }
-    const setComponentAttribute = (node, name, value) => {
-        if (node.getAttribute(name) !== value) node.setAttribute(name, value);
-        postMessage({type: "setAttribute", argsList: [name, value]});
-    }
-    const removeComponentAttribute = (node, name, value) => {
-        node.removeAttribute(name);
-        postMessage({type: "removeAttribute", argsList: [name]});
-    }
-    const getNodePath = (node, path = []) => {
-        path.unshift(node);
-        if (node.parentNode && node.parentNode !== node.parentNode) getNodePath(node.parentNode, path);
-        return path;
-    }
-    const onresize = (node, callback) => {
-        const resizeObserver = new ResizeObserver(() => callback());
-        resizeObserver.observe(node);
+
+        if (Object.keys(attrs).length > 0) {
+            // Merge with existing attributes or simply set them triggers the proxy
+            el.attributes = attrs;
+        }
+
+        return el;
     };
 
-    const url = new URL(document.currentScript.getAttribute("src"), window.location.href);
-    let domContentLoadedEvent;
-    if (!domContentLoadedEvent) addListener(window, "DOMContentLoaded", (event) => domContentLoadedEvent = event);
-    let OBSERVER;
-    const loader = async (whenFramed) => {
-        await importLinks();
-        const unhide = !!document.querySelector('meta[name="l-unhide"]'),
-            isolated = !!document.querySelector('meta[name="l-isolate"]'),
-            enableFrames = !!document.querySelector('meta[name="l-enableFrames"]');
-        if (whenFramed) {
-            whenFramed({unhide, isolated, enableFrames, framed: true});
-            if (!isolated) {
-                postMessage.enabled = true;
-                addListener(window, "message", ({data}) => {
-                    const {type, argsList} = JSON.parse(data);
-                    if (type === "framed") {
-                        const resize = () => {
-                            const {width, height} = document.body.getBoundingClientRect();
-                            postMessage({type: "setAttribute", argsList: ["width", width]})
-                            postMessage({type: "setAttribute", argsList: ["height", height + 20]});
-                        }
-                        resize();
-                        onresize(document.body, () => resize());
-                        return
+    const $ = (cssSelectorOrElement, startingDomEl = document.body) => {
+        const el = typeof cssSelectorOrElement === 'string' ? startingDomEl.querySelector(cssSelectorOrElement) : cssSelectorOrElement;
+        if (!el) return null;
+        Object.defineProperty(el, 'content', {
+            value(child, location = 'inner') {
+                location = location.toLowerCase();
+                const tags = Lightview.tags;
+
+                // Check if target element is script or style
+                const isSpecialElement = el.tagName &&
+                    (el.tagName.toLowerCase() === 'script' || el.tagName.toLowerCase() === 'style');
+
+                const array = (Array.isArray(child) ? child : [child]).map(item => {
+                    // Allow extensions to transform children (e.g., Object DOM syntax)
+                    // BUT skip for script/style elements which need raw content
+                    if (Lightview.hooks.processChild && !isSpecialElement) {
+                        item = Lightview.hooks.processChild(item) ?? item;
                     }
-                    if (type === "setAttribute") {
-                        const [name, value] = [...argsList],
-                            variable = document.body.vars[name];
-                        if (variable && variable.imported) document.body.setVariableValue(name, value);
-                        return;
+                    if (item.tag && !item.domEl) {
+                        return element(item.tag, item.attributes || {}, item.children || []).domEl;
+                    } else {
+                        return item.domEl || item;
                     }
-                    if (type === "removeAttribute") {
-                        const [name] = argsList[0],
-                            variable = document.body.vars[name];
-                        if (variable && variable.imported) document.body.setVariableValue(name, undefined);
+                });
 
+                if (location === 'shadow') {
+                    let shadow = el.shadowRoot;
+                    if (!shadow) {
+                        shadow = el.attachShadow({ mode: 'open' });
                     }
+                    shadow.innerHTML = '';
+                    array.forEach(item => {
+                        shadow.appendChild(item);
+                    });
+                    return el;
+                }
+
+                if (location === 'inner') {
+                    el.innerHTML = '';
+                    array.forEach(item => {
+                        el.appendChild(item);
+                    });
+                    return el;
+                }
+
+                if (location === 'outer') {
+                    el.replaceWith(...array);
+                    return el;
+                }
+
+                if (location === 'afterbegin' || location === 'afterend') {
+                    array.reverse();
+                }
+                array.forEach(item => {
+                    el.insertAdjacentElement(location, item);
                 });
-                const url = new URL(window.location.href);
-                document.lightviewId = url.searchParams.get("id");
-                postMessage({type: "DOMContentLoaded"})
+                return el;
+            },
+            configurable: true,
+            writable: true
+        });
+        return el;
+    };
+
+    const customTags = {}
+    const tags = new Proxy({}, {
+        get(_, tag) {
+            if (tag === "_customTags") return { ...customTags };
+
+            const wrapper = (...args) => {
+                let attributes = {};
+                let children = args;
+                const arg0 = args[0];
+                if (args.length > 0 && arg0 && typeof arg0 === 'object' && !arg0.tag && !arg0.domEl && !Array.isArray(arg0)) {
+                    attributes = arg0;
+                    children = args.slice(1);
+                }
+                return element(customTags[tag] || tag, attributes, children.flat());
+            };
+
+            // Lift static methods/properties from the component onto the wrapper
+            // This allows patterns like Card.Figure to work when Card is retrieved from tags
+            if (customTags[tag]) {
+                Object.assign(wrapper, customTags[tag]);
             }
-        } else if (url.searchParams.has("as")) {
-            bodyAsComponent({as: url.searchParams.get("as"), unhide});
+
+            return wrapper;
+        },
+        set(_, tag, value) {
+            customTags[tag] = value;
+            return true;
         }
-        if (enableFrames) {
-            postMessage.enabled = true;
-            addListener(window, "message", (message) => {
-                const {type, iframeId, argsList, href} = JSON.parse(message.data),
-                    iframe = document.getElementById(iframeId);
-                if (iframe) {
-                    if (type === "DOMContentLoaded") {
-                        postMessage({type: "framed", href: window.location.href}, iframe);
-                        Object.defineProperty(domContentLoadedEvent, "currentTarget", {
-                            enumerable: false,
-                            configurable: true,
-                            value: iframe
-                        });
-                        domContentLoadedEvent.href = href;
-                        domContentLoadedEvent.srcElement = iframe;
-                        domContentLoadedEvent.bubbles = false;
-                        domContentLoadedEvent.path = getNodePath(iframe);
-                        Object.defineProperty(domContentLoadedEvent, "timeStamp", {
-                            enumerable: false,
-                            configurable: true,
-                            value: performance.now()
-                        })
-                        iframe.dispatchEvent(domContentLoadedEvent);
-                        return;
-                    }
-                    if (type === "setAttribute") {
-                        const [name, value] = [...argsList];
-                        if (iframe.getAttribute(name) !== value + "") iframe.setAttribute(name, value);
-                        return;
-                    }
-                    if (type === "removeAttribute") {
-                        iframe.removeAttribute(...argsList);
-                        return;
+    });
+
+    const Lightview = {
+        signal,
+        computed,
+        effect,
+        element, // do not document this
+        enhance,
+        tags,
+        $,
+        // Extension hooks
+        hooks: {
+            onNonStandardHref: null,
+            processChild: null
+        },
+        // Internals exposed for extensions
+        internals: {
+            domToElement,
+            wrapDomElement,
+            setupChildren
+        }
+    };
+
+    // Export for use
+    if (typeof module !== 'undefined' && module.exports) {
+        module.exports = Lightview;
+    }
+    if (typeof window !== 'undefined') {
+        window.Lightview = Lightview;
+
+        // Global click handler delegates to hook if registered
+        window.addEventListener('click', (e) => {
+            // Support fragment navigation piercing Shadow DOM
+            // Use composedPath() to find the actual clicked element, even inside shadow roots
+            const path = e.composedPath();
+            const link = path.find(el => el.tagName === 'A' && el.getAttribute?.('href')?.startsWith('#'));
+
+            if (link && !e.defaultPrevented) {
+                const href = link.getAttribute('href');
+                if (href.length > 1) {
+                    const id = href.slice(1);
+                    const root = link.getRootNode();
+                    const target = (root.getElementById ? root.getElementById(id) : null) ||
+                        (root.querySelector ? root.querySelector(`#${id}`) : null);
+
+                    if (target) {
+                        e.preventDefault();
+                        target.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
                     }
                 }
-                console.warn("iframe posted a message without providing an id", message);
+            }
+
+            if (Lightview.hooks.onNonStandardHref) {
+                Lightview.hooks.onNonStandardHref(e);
+            }
+        });
+
+        // Automatic Cleanup & Lifecycle Hooks
+        const walkNodes = (node, fn) => {
+            fn(node);
+            node.childNodes?.forEach(n => walkNodes(n, fn));
+            if (node.shadowRoot) walkNodes(node.shadowRoot, fn);
+        };
+
+        const cleanupNode = (node) => walkNodes(node, n => {
+            const s = nodeState.get(n);
+            if (s) {
+                s.effects?.forEach(e => e.stop());
+                s.onunmount?.(n);
+                nodeState.delete(n);
+            }
+        });
+
+        const mountNode = (node) => walkNodes(node, n => {
+            nodeState.get(n)?.onmount?.(n);
+        });
+
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.removedNodes.forEach(cleanupNode);
+                mutation.addedNodes.forEach(mountNode);
             });
-            if (!OBSERVER) {
-                const mutationCallback = (mutationsList) => {
-                    const console = document.getElementById("console");
-                    for (const {target, attributeName, oldValue} of mutationsList) {
-                        const value = target.getAttribute(attributeName);
-                        if (!["height", "width", "message"].includes(attributeName)) {
-                            if (!value) postMessage({type: "removeAttribute", argsList: [attributeName]}, iframe)
-                            else if (value !== oldValue) {
-                                postMessage({
-                                    type: "setAttribute",
-                                    argsList: [attributeName, value]
-                                }, iframe)
-                            }
-                        }
-                        if (attributeName === "message") {
-                            if (value) {
-                                target.removeAttribute("message");
-                                target.dispatchEvent(new CustomEvent("message", {target, detail: JSON.parse(value)}))
-                            }
-                        } else {
-                            target.dispatchEvent(new CustomEvent("attribute.changed", {
-                                target,
-                                detail: {attributeName, value, oldValue}
-                            }))
-                        }
-                    }
-                };
-                const observer = OBSERVER = new MutationObserver(mutationCallback),
-                    iframe = document.getElementById("myframe");
-                observer.observe(iframe, {attributes: true, attributeOldValue: true});
+        });
+
+        // Wait for DOM to be ready before observing
+        const startObserving = () => {
+            if (document.body) {
+                observer.observe(document.body, {
+                    childList: true,
+                    subtree: true
+                });
             }
-        }
-    }
-    const whenFramed = (callback, {isolated} = {}) => {
-        // loads for framed content
-        addListener(document, "DOMContentLoaded", (event) => loader(callback));
-    }
-    Lightview.whenFramed = whenFramed;
+        };
 
-    if (window.location === window.parent.location || !(window.parent instanceof Window) || window.parent !== window) {
-        // loads for unframed content
-        // CodePen mucks with window.parent
-        addListener(document, "DOMContentLoaded", () => loader())
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', startObserving);
+        } else {
+            startObserving();
+        }
     }
-
-    return {observe}
-})();
+})();