lightview 2.0.9 → 2.1.0

package/lightview.js

@@ -1,766 +1 @@
-(() => {
-    /**
-     * LIGHTVIEW CORE
-     * A minimalist library for signals-based reactivity and functional UI components.
-     */
-
-    // ============= SIGNALS =============
-
-    let currentEffect = null;
-
-
-    /**
-     * Helper to get a value from a Map or create and set it if it doesn't exist.
-     */
-    const getOrSet = (map, key, factory) => {
-        let v = map.get(key);
-        if (!v) {
-            v = factory();
-            map.set(key, v);
-        }
-        return v;
-    };
-
-    const nodeState = new WeakMap();
-    const nodeStateFactory = () => ({ effects: [], onmount: null, onunmount: null });
-
-    const signalRegistry = new Map();
-
-    /**
-     * Creates a reactive signal.
-     * @param {*} initialValue - The initial value of the signal.
-     * @param {Object|string} [optionsOrName] - Optional name (for registry) or options object.
-     */
-    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 {
-                    initialValue = JSON.parse(stored);
-                } catch (e) {
-                    // Ignore storage errors
-                }
-            }
-        }
-
-        let value = initialValue;
-        const subscribers = new Set();
-
-        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(newValue) {
-                if (value !== newValue) {
-                    value = newValue;
-                    if (name && storage) {
-                        try {
-                            storage.setItem(name, JSON.stringify(value));
-                        } catch (e) {
-                            // Ignore storage errors
-                        }
-                    }
-                    // Copy subscribers to avoid infinite loop when effect re-subscribes during iteration
-                    [...subscribers].forEach(effect => effect());
-                }
-            }
-        });
-
-        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);
-    };
-
-    /**
-     * Creates a side-effect that automatically tracks and re-runs when its signal dependencies change.
-     * @param {Function} fn - The function to execute as an effect.
-     */
-    const effect = (fn) => {
-        const execute = () => {
-            if (!execute.active || execute.running) return;
-            // Cleanup old dependencies
-            execute.dependencies.forEach(dep => dep.delete(execute));
-            execute.dependencies.clear();
-
-            execute.running = true;
-            currentEffect = execute;
-            try {
-                fn();
-            } finally {
-                currentEffect = null;
-                execute.running = false;
-            }
-        };
-
-        execute.active = true;
-        execute.running = false;
-        execute.dependencies = new Set();
-        execute.stop = () => {
-            execute.dependencies.forEach(dep => dep.delete(execute));
-            execute.dependencies.clear();
-            execute.active = false;
-        };
-        execute();
-        return execute;
-    };
-
-    /**
-     * Assocates an effect with a DOM node for automatic cleanup when the node is removed.
-     */
-    const trackEffect = (node, effectFn) => {
-        const state = getOrSet(nodeState, node, nodeStateFactory);
-        if (!state.effects) state.effects = [];
-        state.effects.push(effectFn);
-    };
-
-    /**
-     * Creates a read-only signal derived from other signals.
-     */
-    const computed = (fn) => {
-        const sig = signal(undefined);
-        effect(() => {
-            sig.value = fn();
-        });
-        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;
-        }
-
-        // 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);
-                }
-            });
-        }
-
-        // Handle adoptedStyleSheets (modern, efficient approach)
-        if (sheets.length > 0) {
-            try {
-                shadowRoot.adoptedStyleSheets = sheets;
-            } catch (e) {
-                console.warn('Lightview: adoptedStyleSheets not supported');
-            }
-        }
-
-        // Inject stylesheet links
-        for (const styleUrl of linkUrls) {
-            const link = document.createElement('link');
-            link.rel = 'stylesheet';
-            link.href = styleUrl;
-            shadowRoot.appendChild(link);
-        }
-
-        // Setup children inside shadow root
-        if (marker.children && marker.children.length > 0) {
-            setupChildrenInTarget(marker.children, shadowRoot);
-        }
-    };
-
-    // ============= REACTIVE UI =============
-    let inSVG = false;
-
-    const domToElement = new WeakMap();
-
-    /**
-     * Wraps a native DOM element in a Lightview reactive proxy.
-     */
-    const wrapDomElement = (domNode, tag, attributes = {}, children = []) => {
-        const el = {
-            tag,
-            attributes,
-            children,
-            get domEl() { return domNode; }
-        };
-        const proxy = makeReactive(el);
-        domToElement.set(domNode, proxy);
-        return proxy;
-    };
-
-    /**
-     * The core virtual-DOM-to-real-DOM factory.
-     * Handles tag functions (components), shadow DOM directives, and SVG namespaces.
-     */
-    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);
-        }
-
-        // Special handling for shadowDOM pseudo-element
-        if (tag === 'shadowDOM') {
-            return createShadowDOMMarker(attributes, children);
-        }
-
-        const isSVG = tag.toLowerCase() === 'svg';
-        const wasInSVG = inSVG;
-        if (isSVG) inSVG = true;
-
-        const domNode = inSVG
-            ? document.createElementNS('http://www.w3.org/2000/svg', tag)
-            : document.createElement(tag);
-
-        const proxy = wrapDomElement(domNode, tag, attributes, children);
-        proxy.attributes = attributes;
-        proxy.children = children;
-
-        if (isSVG) inSVG = wasInSVG;
-        return proxy;
-    };
-
-    // Process component function return value (HTML string, DOM node, vDOM, or Object DOM)
-    const processComponentResult = (result) => {
-        if (!result) return null;
-
-        if (Lightview.hooks.processChild) {
-            result = Lightview.hooks.processChild(result) ?? result;
-        }
-
-        // Already a Lightview element
-        if (result.domEl) return result;
-
-        // DOM node - wrap it
-        if (result instanceof HTMLElement) {
-            return wrapDomElement(result, result.tagName.toLowerCase(), {}, []);
-        }
-
-        // 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', {}, []);
-            }
-        }
-
-        // vDOM object with tag property
-        if (typeof result === 'object' && result.tag) {
-            return element(result.tag, result.attributes || {}, result.children || []);
-        }
-
-        return null;
-    };
-
-    /**
-     * Internal proxy to intercept 'attributes' and 'children' updates on an element.
-     */
-    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;
-                }
-                return true;
-            }
-        });
-    };
-
-    // Properties that should be set directly on the DOM node object rather than as attributes
-    const NODE_PROPERTIES = new Set(['value', 'checked', 'selected', 'selectedIndex', 'className', 'innerHTML', 'innerText']);
-
-    // Set attribute with proper handling of boolean attributes and undefined/null values
-    const setAttributeValue = (domNode, key, value) => {
-        const isBool = typeof domNode[key] === 'boolean';
-
-        // Sanitize href/src attributes to prevent javascript: and other dangerous protocols
-        if ((key === 'href' || key === 'src') && typeof value === 'string' && /^(javascript|vbscript|data:text\/html|data:application\/javascript)/i.test(value)) {
-            console.warn(`[Lightview] Blocked dangerous protocol in ${key}: ${value}`);
-            value = 'javascript:void(0)'; // Safer fallback than # which might trigger scroll or router
-        }
-
-        if (NODE_PROPERTIES.has(key) || isBool) {
-            domNode[key] = isBool ? (value !== null && value !== undefined && value !== false && value !== 'false') : value;
-        } else if (value === null || value === undefined) {
-            domNode.removeAttribute(key);
-        } else {
-            domNode.setAttribute(key, value);
-        }
-    };
-
-    /**
-     * Processes attributes, handling event listeners, reactive bindings, and special 'onmount' hooks.
-     */
-    const makeReactiveAttributes = (attributes, domNode) => {
-        const reactiveAttrs = {};
-
-        for (let [key, value] of Object.entries(attributes)) {
-            if (key === 'onmount' || key === 'onunmount') {
-                const state = getOrSet(nodeState, domNode, nodeStateFactory);
-                state[key] = value;
-
-                if (key === 'onmount' && domNode.isConnected) {
-                    value(domNode);
-                }
-            } 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);
-                    }
-                });
-                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;
-            }
-        }
-
-        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
-     */
-    /**
-     * Core child processing logic. Recursively handles strings, arrays, 
-     * reactive functions, vDOM objects, and Shadow DOM markers.
-     */
-    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');
-
-        const flatChildren = children.flat(Infinity);
-
-        for (let child of flatChildren) {
-            // 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;
-            }
-
-            // 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;
-                }
-                processShadowDOM(child, targetNode);
-                continue;
-            }
-
-            const type = typeof child;
-            if (type === 'function') {
-                const startMarker = document.createComment('lv:s');
-                const endMarker = document.createComment('lv:e');
-                targetNode.appendChild(startMarker);
-                targetNode.appendChild(endMarker);
-
-                let runner;
-                const update = () => {
-                    // 1. Cleanup: Remove everything between markers
-                    while (startMarker.nextSibling && startMarker.nextSibling !== endMarker) {
-                        startMarker.nextSibling.remove();
-                        // Note: MutationObserver handles cleanupNode(removedNode)
-                    }
-
-                    // 2. Execution: Get new value and process it
-                    const val = child();
-                    if (val === undefined || val === null) return;
-
-                    // 3. Render: Process children into a fragment and insert before endMarker
-                    const fragment = document.createDocumentFragment();
-                    const childrenToProcess = Array.isArray(val) ? val : [val];
-
-                    // Stop the runner if the markers are no longer in the DOM
-                    if (runner && !startMarker.isConnected) {
-                        runner.stop();
-                        return;
-                    }
-
-                    processChildren(childrenToProcess, fragment, false);
-                    endMarker.parentNode.insertBefore(fragment, endMarker);
-                };
-
-                runner = effect(update);
-                trackEffect(startMarker, runner);
-                childElements.push(child);
-            } 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);
-            }
-        }
-
-        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 =============
-    /**
-     * Enhances an existing DOM element with Lightview reactivity.
-     */
-    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);
-        }
-
-        const { innerText, innerHTML, ...attrs } = options;
-
-        if (innerText !== undefined) {
-            if (typeof innerText === 'function') {
-                effect(() => { node.innerText = innerText(); });
-            } else {
-                node.innerText = innerText;
-            }
-        }
-
-        if (innerHTML !== undefined) {
-            if (typeof innerHTML === 'function') {
-                effect(() => { node.innerHTML = innerHTML(); });
-            } else {
-                node.innerHTML = innerHTML;
-            }
-        }
-
-        if (Object.keys(attrs).length > 0) {
-            // Merge with existing attributes or simply set them triggers the proxy
-            el.attributes = attrs;
-        }
-
-        return el;
-    };
-
-    /**
-     * Query selector helper that adds a .content() method for easy DOM manipulation.
-     */
-    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 (item.tag && !item.domEl) {
-                        return element(item.tag, item.attributes || {}, item.children || []).domEl;
-                    } else {
-                        return item.domEl || item;
-                    }
-                });
-
-                const target = location === 'shadow' ? (el.shadowRoot || el.attachShadow({ mode: 'open' })) : el;
-
-                if (location === 'inner' || location === 'shadow') {
-                    target.replaceChildren(...array);
-                } else if (location === 'outer') {
-                    target.replaceWith(...array);
-                } else if (location === 'afterbegin') {
-                    target.prepend(...array);
-                } else if (location === 'beforeend') {
-                    target.append(...array);
-                } else {
-                    array.forEach(item => el.insertAdjacentElement(location, item));
-                }
-                return el;
-            },
-            configurable: true,
-            writable: true
-        });
-        return el;
-    };
-
-    const customTags = {}
-    /**
-     * Proxy for accessing or registering tags/components.
-     * e.g., Lightview.tags.div(...) or Lightview.tags.MyComponent = ...
-     */
-    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);
-            };
-
-            // 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]);
-            }
-
-            return wrapper;
-        },
-        set(_, tag, value) {
-            customTags[tag] = value;
-            return true;
-        }
-    });
-
-    const Lightview = {
-        signal,
-        computed,
-        effect,
-        element, // do not document this
-        enhance,
-        tags,
-        $,
-        // Extension hooks
-        hooks: {
-            onNonStandardHref: null,
-            processChild: null,
-            validateUrl: 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') {
-        globalThis.Lightview = Lightview;
-
-        // Global click handler delegates to hook if registered
-        globalThis.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();
-                        requestAnimationFrame(() => {
-                            requestAnimationFrame(() => {
-                                target.style.scrollMarginTop = 'calc(var(--site-nav-height, 0px) + 2rem)';
-                                target.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
-                            });
-                        });
-                    }
-                }
-            }
-
-            if (Lightview.hooks.onNonStandardHref) {
-                Lightview.hooks.onNonStandardHref(e);
-            }
-        });
-
-        // Automatic Cleanup & Lifecycle Hooks
-        if (typeof MutationObserver !== 'undefined') {
-            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);
-                });
-            });
-
-            // Wait for DOM to be ready before observing
-            const startObserving = () => {
-                if (document.body) {
-                    observer.observe(document.body, {
-                        childList: true,
-                        subtree: true
-                    });
-                }
-            };
-
-            if (document.readyState === 'loading') {
-                document.addEventListener('DOMContentLoaded', startObserving);
-            } else {
-                startObserving();
-            }
-        }
-    }
-})();
+!function(){"use strict";const e=globalThis.__LIGHTVIEW_INTERNALS__||(globalThis.__LIGHTVIEW_INTERNALS__={currentEffect:null,registry:new Map,dependencyMap:new WeakMap}),t=(t,n)=>{let o="string"==typeof n?n:null==n?void 0:n.name;const r=null==n?void 0:n.storage;if(o&&r)try{const e=r.getItem(o);null!==e&&(t=JSON.parse(e))}catch(l){}let s=t;const i=new Set,a=(...e)=>{if(0===e.length)return a.value;a.value=e[0]};if(Object.defineProperty(a,"value",{get:()=>(e.currentEffect&&(i.add(e.currentEffect),e.currentEffect.dependencies.add(i)),s),set(e){if(s!==e){if(s=e,o&&r)try{r.setItem(o,JSON.stringify(s))}catch(l){}[...i].forEach(e=>e())}}}),o)if(e.registry.has(o)){if(e.registry.get(o)!==a)throw new Error(`Lightview: A signal or state with the name "${o}" is already registered.`)}else e.registry.set(o,a);return a};t.get=(n,o)=>e.registry.has(n)||void 0===o?e.registry.get(n):t(o,n);const n=t=>{const n=()=>{if(n.active&&!n.running){n.dependencies.forEach(e=>e.delete(n)),n.dependencies.clear(),n.running=!0,e.currentEffect=n;try{t()}finally{e.currentEffect=null,n.running=!1}}};return n.active=!0,n.running=!1,n.dependencies=new Set,n.stop=()=>{n.dependencies.forEach(e=>e.delete(n)),n.dependencies.clear(),n.active=!1},n(),n},o=(e,t)=>Object.getOwnPropertyNames(e).filter(n=>"function"==typeof e[n]&&t(n));o(Date.prototype,e=>/^(to|get|valueOf)/.test(e)),o(Date.prototype,e=>/^set/.test(e));const r=(e,t,n)=>{let o=e.get(t);return o||(o=n(),e.set(t,o)),o},s={get currentEffect(){return(globalThis.__LIGHTVIEW_INTERNALS__||(globalThis.__LIGHTVIEW_INTERNALS__={})).currentEffect}},i=new WeakMap,a=()=>({effects:[],onmount:null,onunmount:null}),l=e.registry,c=(e,t)=>{const n=r(i,e,a);n.effects||(n.effects=[]),n.effects.push(t)},d=Symbol("lightview.shadowDOM"),u=e=>e&&"object"==typeof e&&!0===e[d],f=(e,t)=>{if(t.shadowRoot)return void console.warn("Lightview: Element already has a shadowRoot, skipping shadowDOM directive");const n=t.attachShadow({mode:e.mode}),o=[],r=[...e.styles||[]];if(e.adoptedStyleSheets&&e.adoptedStyleSheets.length>0&&e.adoptedStyleSheets.forEach(e=>{e instanceof CSSStyleSheet?o.push(e):"string"==typeof e&&r.push(e)}),o.length>0)try{n.adoptedStyleSheets=o}catch(s){console.warn("Lightview: adoptedStyleSheets not supported")}for(const i of r){const e=document.createElement("link");e.rel="stylesheet",e.href=i,n.appendChild(e)}e.children&&e.children.length>0&&L(e.children,n)};let h=!1;const p=new WeakMap,g=(e,t,n={},o=[])=>{const r=b({tag:t,attributes:n,children:o,get domEl(){return e}});return p.set(e,r),r},m=(e,t={},o=[])=>{if(N[e]&&(e=N[e]),"function"==typeof e){const n=e({...t},o);return y(n)}if("shadowDOM"===e)return((e,t)=>({[d]:!0,mode:e.mode||"open",styles:e.styles||[],adoptedStyleSheets:e.adoptedStyleSheets||[],children:t}))(t,o);if("text"===e&&!h){const r=document.createTextNode(""),s={tag:e,attributes:t,children:o,get domEl(){return r}},i=()=>{const e=(Array.isArray(s.children)?s.children:[s.children]).flat(1/0).map(e=>{const t="function"==typeof e?e():e;return t&&"object"==typeof t&&t.domEl?t.domEl.textContent:null==t?"":String(t)});r.textContent=e.join(" ")},a=new Proxy(s,{set:(e,t,n)=>(e[t]=n,"children"===t&&i(),!0)});if(o.flat(1/0).some(e=>"function"==typeof e)){const e=n(i);c(r,e)}return i(),a}const r="svg"===e.toLowerCase(),s=h;r&&(h=!0);const i=h?document.createElementNS("http://www.w3.org/2000/svg",e):document.createElement(e),a=g(i,e,t,o);return a.attributes=t,a.children=o,r&&(h=s),a},y=e=>{if(!e)return null;if(j.hooks.processChild&&(e=j.hooks.processChild(e)??e),e.domEl)return e;const t=typeof e;if("object"===t&&e instanceof HTMLElement)return g(e,e.tagName.toLowerCase(),{},[]);if("object"===t&&e instanceof String){const t=document.createElement("span");return t.textContent=e.toString(),g(t,"span",{},[])}if("string"===t){const t=document.createElement("template");t.innerHTML=e.trim();const n=t.content;if(1===n.childNodes.length&&n.firstChild instanceof HTMLElement){const e=n.firstChild;return g(e,e.tagName.toLowerCase(),{},[])}{const e=document.createElement("span");return e.style.display="contents",e.appendChild(n),g(e,"span",{},[])}}return"object"==typeof e&&e.tag?m(e.tag,e.attributes||{},e.children||[]):null},b=e=>{const t=e.domEl;return new Proxy(e,{set:(e,n,o)=>(e[n]="attributes"===n?v(o,t):"children"===n?C(o,t):o,!0)})},w=new Set(["value","checked","selected","selectedIndex","className","innerHTML","innerText"]),E=(e,t,n)=>{const o="boolean"==typeof e[t];"href"!==t&&"src"!==t||"string"!=typeof n||!/^(javascript|vbscript|data:text\/html|data:application\/javascript)/i.test(n)||(console.warn(`[Lightview] Blocked dangerous protocol in ${t}: ${n}`),n="javascript:void(0)"),w.has(t)||o?e[t]=o?null!=n&&!1!==n&&"false"!==n:n:null==n?e.removeAttribute(t):e.setAttribute(t,n)},v=(e,t)=>{const o={};for(let[s,l]of Object.entries(e))if("onmount"===s||"onunmount"===s){r(i,t,a)[s]=l,"onmount"===s&&t.isConnected&&l(t)}else if(s.startsWith("on")){if("function"==typeof l){const e=s.slice(2).toLowerCase();t.addEventListener(e,l)}else"string"==typeof l&&t.setAttribute(s,l);o[s]=l}else if("function"==typeof l){const e=n(()=>{const e=l();"style"===s&&"object"==typeof e?Object.assign(t.style,e):E(t,s,e)});c(t,e),o[s]=l}else"style"===s&&"object"==typeof l?(Object.entries(l).forEach(([e,o])=>{if("function"==typeof o){const r=n(()=>{t.style[e]=o()});c(t,r)}else t.style[e]=o}),o[s]=l):(E(t,s,l),o[s]=l);return o},S=(e,t,o=!0)=>{o&&void 0!==t.innerHTML&&(t.innerHTML="");const r=[],s=t.tagName&&("script"===t.tagName.toLowerCase()||"style"===t.tagName.toLowerCase()),i=e.flat(1/0);for(let a of i){if(j.hooks.processChild&&!s&&(a=j.hooks.processChild(a)??a),u(a)){if(t instanceof ShadowRoot){console.warn("Lightview: Cannot nest shadowDOM inside another shadowDOM");continue}f(a,t);continue}const e=typeof a;if("function"===e){const e=document.createComment("lv:s"),o=document.createComment("lv:e");let s;t.appendChild(e),t.appendChild(o);const i=()=>{for(;e.nextSibling&&e.nextSibling!==o;)e.nextSibling.remove();const t=a();if(null!=t)if(!s||e.isConnected)if("object"==typeof t&&t instanceof String){const e=document.createTextNode(t);o.parentNode.insertBefore(e,o)}else{const e=document.createDocumentFragment(),n=Array.isArray(t)?t:[t];S(n,e,!1),o.parentNode.insertBefore(e,o)}else s.stop()};s=n(i),c(e,s),r.push(a)}else if(["string","number","boolean","symbol"].includes(e)||a&&"object"===e&&a instanceof String)t.appendChild(document.createTextNode(a)),r.push(a);else if(a&&"object"===e&&a.tag){const e=a.domEl?a:m(a.tag,a.attributes||{},a.children||[]);t.appendChild(e.domEl),r.push(e)}}return r},L=(e,t)=>S(e,t,!1),C=(e,t)=>S(e,t,!0),N={},T=new Proxy({},{get(e,t){if("_customTags"===t)return{...N};const n=(...e)=>{let n={},o=e;const r=e[0];return e.length>0&&r&&"object"==typeof r&&!r.tag&&!r.domEl&&!Array.isArray(r)&&(n=r,o=e.slice(1)),m(N[t]||t,n,o)};return N[t]&&Object.assign(n,N[t]),n},set:(e,t,n)=>(N[t]=n,!0)}),j={signal:t,get:t.get,computed:e=>{const o=t(void 0);return n(()=>{o.value=e()}),o},effect:n,registry:l,element:m,enhance:(e,t={})=>{const o="string"==typeof e?document.querySelector(e):e,r=o.domEl||o;if(!(r instanceof HTMLElement))return null;const s=r.tagName.toLowerCase();let i=p.get(r);i||(i=g(r,s));const{innerText:a,innerHTML:l,...c}=t;return void 0!==a&&("function"==typeof a?n(()=>{r.innerText=a()}):r.innerText=a),void 0!==l&&("function"==typeof l?n(()=>{r.innerHTML=l()}):r.innerHTML=l),Object.keys(c).length>0&&(i.attributes=c),i},tags:T,$:(e,t=document.body)=>{const n="string"==typeof e?t.querySelector(e):e;return n?(Object.defineProperty(n,"content",{value(e,t="inner"){t=t.toLowerCase(),j.tags;const o=n.tagName&&("script"===n.tagName.toLowerCase()||"style"===n.tagName.toLowerCase()),r=(Array.isArray(e)?e:[e]).map(e=>(j.hooks.processChild&&!o&&(e=j.hooks.processChild(e)??e),e.tag&&!e.domEl?m(e.tag,e.attributes||{},e.children||[]).domEl:e.domEl||e)),s="shadow"===t?n.shadowRoot||n.attachShadow({mode:"open"}):n;return"inner"===t||"shadow"===t?s.replaceChildren(...r):"outer"===t?s.replaceWith(...r):"afterbegin"===t?s.prepend(...r):"beforeend"===t?s.append(...r):r.forEach(e=>n.insertAdjacentElement(t,e)),n},configurable:!0,writable:!0}),n):null},hooks:{onNonStandardHref:null,processChild:null,validateUrl:null},internals:{core:s,domToElement:p,wrapDomElement:g,setupChildren:C}};if("undefined"!=typeof module&&module.exports&&(module.exports=j),"undefined"!=typeof window&&(globalThis.Lightview=j,globalThis.addEventListener("click",e=>{const t=e.composedPath().find(e=>{var t,n;return"A"===e.tagName&&(null==(n=null==(t=e.getAttribute)?void 0:t.call(e,"href"))?void 0:n.startsWith("#"))});if(t&&!e.defaultPrevented){const n=t.getAttribute("href");if(n.length>1){const o=n.slice(1),r=t.getRootNode(),s=(r.getElementById?r.getElementById(o):null)||(r.querySelector?r.querySelector(`#${o}`):null);s&&(e.preventDefault(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{s.style.scrollMarginTop="calc(var(--site-nav-height, 0px) + 2rem)",s.scrollIntoView({behavior:"smooth",block:"start",inline:"start"})})}))}}j.hooks.onNonStandardHref&&j.hooks.onNonStandardHref(e)}),"undefined"!=typeof MutationObserver)){const e=(t,n)=>{var o;n(t),null==(o=t.childNodes)||o.forEach(t=>e(t,n)),t.shadowRoot&&e(t.shadowRoot,n)},t=t=>e(t,e=>{var t,n;const o=i.get(e);o&&(null==(t=o.effects)||t.forEach(e=>e.stop()),null==(n=o.onunmount)||n.call(o,e),i.delete(e))}),n=t=>e(t,e=>{var t,n;null==(n=null==(t=i.get(e))?void 0:t.onmount)||n.call(t,e)}),o=new MutationObserver(e=>{e.forEach(e=>{e.removedNodes.forEach(t),e.addedNodes.forEach(n)})}),r=()=>{document.body&&o.observe(document.body,{childList:!0,subtree:!0})};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",r):r()}}();