lightview 2.0.0 → 2.0.2

package/README.md

@@ -11,16 +11,19 @@ A lightweight reactive UI library with signal-based reactivity and a clean API.
 
 Access the full documentaion at [lightview.dev](/index.html).
 
+This NPM package is both the library and the website supporting the library. The website is built using Lightview. The core library files are in the root directory. The Website entry point is index.html and the restr of the site is under ./docs. The site is served by a Cloudflare pages deployment.
+
 **Core**: ~6KB | **With Hypermedia Extensions and Component Library Support**: ~18KB total
 
 Fast: This [gallery of components](/docs/components) loads in about 1 second: 
 
 ## Modular Architecture
 
-Lightview is split into two files:
+Lightview is split into three files:
 
 - **`lightview.js`** - Core reactivity (signals, state, effects, elements)
 - **`lightview-x.js`** - Hypermedia extension (src fetching, href navigation, template literals, named registries, Object DOM syntax, UI component library support)
+- **`lightview-router.js`** - Router (src fetching, href navigation, template literals, named registries, Object DOM syntax, UI component library support)
 
 ### API Behavior
 
@@ -49,6 +52,11 @@ Lightview is split into two files:
 <!-- Full features (hypermedia + templates) -->
 <script src="lightview.js"></script>
 <script src="lightview-x.js"></script>
+
+<!-- Full features (hypermedia + templates + router) -->
+<script src="lightview.js"></script>
+<script src="lightview-x.js"></script>
+<script src="lightview-router.js"></script>
 ```
 
 ## Core Concepts
@@ -56,11 +64,11 @@ Lightview is split into two files:
 **Lightview** provides four ways to build UIs:
 
 1. **Tagged API** - Concise, Bau.js-style syntax: `tags.div(...)`
-2. **Element Function** - Explicit: `element('div', {}, [...])`
-3. **vDOM Syntax** - JSON data structures: `{ tag: "div", attributes: {}, children: [] }`
-4. **Object DOM Syntax** *(lightview-x)* - Compact: `{ div: { class: "foo", children: [] } }`
+2. **vDOM Syntax** - JSON data structures: `{ tag: "div", attributes: {}, children: [] }`
+3. **Object DOM Syntax** *(lightview-x)* - Compact: `{ div: { class: "foo", children: [] } }`
+4. **HTML** *(lightview-x)* - Custom HTML elements.
 
-All four approaches use the same underlying reactive system based on **signals**.
+All four approaches use the same underlying reactive system based on **signals** and **state**.
 
 ## Installation
 
@@ -91,25 +99,7 @@ const app = div({ class: 'container' },
 document.body.appendChild(app.domEl);
 ```
 
-### Style 2: Element Function
-
-```javascript
-const { signal, element } = new Lightview();
-
-const count = signal(0);
-
-const app = element('div', { class: 'container' }, [
-  element('h1', {}, ['Counter App']),
-  element('p', {}, [() => `Count: ${count.value}`]),
-  element('button', { 
-    onclick: () => count.value++ 
-  }, ['Increment'])
-]);
-
-document.body.appendChild(app.domEl);
-```
-
-### Style 3: vDOM Syntax (Plain JSON)
+### Style 2: vDOM Syntax (Plain JSON)
 
 ```javascript
 const { signal, element } = new Lightview();
@@ -138,7 +128,7 @@ const app = element('div', { class: 'container' }, [
 document.body.appendChild(app.domEl);
 ```
 
-### Style 4: Object DOM Syntax (lightview-x)
+### Style 3: Object DOM Syntax (lightview-x)
 
 Object DOM syntax provides a more compact way to define elements. Instead of `{ tag, attributes, children }`, you use `{ tag: { ...attributes, children } }`.
 

package/docs/components/component-nav.html

@@ -21,7 +21,7 @@
             'Indicator', 'Input', 'Join', 'Kbd', 'Loading', 'Menu', 'Modal', 'Navbar',
             'Pagination', 'Progress', 'Radial Progress', 'Radio', 'Range', 'Rating',
             'Select', 'Skeleton', 'Stats', 'Steps', 'Swap', 'Table', 'Tabs', 'Textarea',
-            'Theme Controller', 'Timeline', 'Toast', 'Toggle', 'Tooltip'
+            'Timeline', 'Toast', 'Toggle', 'Tooltip'
         ].sort(); // Sort alphabetically
 
         const linksContainer = $('#sidebar-links');
@@ -50,4 +50,4 @@
             });
         }
     }
-</script>
+</script>

package/docs/getting-started/index.html

@@ -142,7 +142,7 @@ const { tags, $ } = Lightview;
 const { div, h1, p, style } = tags;
 
 // 1. Build UI using Tagged Functions
-// These functions return standard DOM elements
+// These functions return Lightview elements (access raw DOM via .domEl)
 const App = div({ class: 'hero' },
     h1('Welcome to Lightview'),
     p('Lightview is a tiny library for building modern web interfaces.')
@@ -171,11 +171,11 @@ $('#app').content(style({}, \`
                 
                 <h4>Key Concepts:</h4>
                 <ul style="padding-left: 1.25rem; color: var(--site-text-secondary);">
-                    <li style="margin-bottom: 0.75rem;"><code>tags</code> — Every HTML tag is available as a function. <code>div(...)</code> returns a real <code>HTMLDivElement</code>.</li>
+                    <li style="margin-bottom: 0.75rem;"><code>tags</code> — Every HTML tag is available as a function. <code>div(...)</code> returns a virtual proxy; the real DOM element is accessible via <code>.domEl</code>.</li>
                     <li style="margin-bottom: 0.75rem;"><code>$(selector)</code> — A powerful utility for selecting elements and manipulating them.</li>
-                    <li style="margin-bottom: 0.75rem;"><code>.content(node, location)</code> — Replaces or appends content. Locations like <code>'beforeend'</code> allow injecting styles or scripts dynamicly.</li>
+                    <li style="margin-bottom: 0.75rem;"><code>.content(node, location)</code> — Replaces or appends content. It automatically unboxes <code>.domEl</code> for you.</li>
                 </ul>
-                <p>This approach results in standard, lightweight DOM elements with no overhead.</p>
+                <p>Lightview elements are thin proxies over standard DOM elements, providing reactivity with minimal overhead.</p>
             `
             },
             2: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lightview",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "A lightweight reactive UI library with features of Bau, Juris, and HTMX",
   "main": "lightview.js",
   "directories": {

package/.agent/workflows/daisyui-component-migration.md

@@ -1,155 +0,0 @@
----
-description: Migrate all components to DaisyUI styling pattern with examplify docs
----
-
-# DaisyUI Component Migration Plan
-
-## Overview
-Migrate all Lightview components to use DaisyUI styling (like the reference `input.js` pattern):
-- Use DaisyUI classes directly (no BEM `.lv-*` classes)
-- Remove parallel `.css` files where possible
-- Use custom CSS only for advanced features not in DaisyUI
-- All components support Shadow DOM (global setting with local override)
-- Remove `getIcon()` usage - use inline SVGs or children
-- Update all `.html` docs to use `examplify()` with basic + reactive examples
-- Match DaisyUI directory structure (delete `components/core/`)
-
-## Reference Pattern (from input.js)
-```javascript
-// Key patterns:
-// 1. No CSS import - uses DaisyUI classes directly
-// 2. Uses fieldset/legend pattern for form fields
-// 3. Signal-based reactive state
-// 4. Controlled/uncontrolled modes
-// 5. Validation support
-// 6. Shadow DOM support with useShadow prop
-// 7. Auto-register with LightviewX
-```
-
-## Component Status Tracker
-
-### Batch 1: Form Inputs ✅ COMPLETE
-- [x] 1. Input (data-input/input.js) - DONE
-- [x] 2. Textarea (data-input/textarea.js) - DONE
-- [x] 3. Select (data-input/select.js) - DONE
-- [x] 4. Checkbox (data-input/checkbox.js) - DONE
-- [x] 5. Radio (data-input/radio.js) - DONE (also added RadioGroup)
-- [x] 6. Toggle (data-input/toggle.js) - DONE
-- [x] 7. Range (data-input/range.js) - DONE
-- [x] 8. Rating (data-input/rating.js) - DONE
-- [x] 9. File Input (data-input/file-input.js) - DONE
-
-### Batch 2: Actions & Feedback ✅ COMPLETE
-- [x] 10. Button (actions/button.js) - DONE (docs updated with examplify)
-- [x] 11. Modal (actions/modal.js) - DONE (docs updated with examplify)
-- [x] 12. Drawer (layout/drawer.js) - DONE (docs updated with examplify)
-- [x] 13. Dropdown (actions/dropdown.js) - DONE (docs updated with examplify)
-- [x] 14. Swap (actions/swap.js) - DONE (docs updated with examplify)
-- [x] 15. Alert (data-display/alert.js) - DONE (docs updated with examplify)
-- [x] 16. Toast (data-display/toast.js) - DONE (docs updated with examplify)
-- [x] 17. Loading (data-display/loading.js) - DONE (docs updated with examplify)
-- [x] 18. Progress (data-display/progress.js) - DONE (docs updated with examplify)
-- [x] 19. Tooltip (data-display/tooltip.js) - DONE (docs updated with examplify)
-
-### Batch 3: Data Display ✅ COMPLETE
-- [x] 20. Badge (data-display/badge.js) - DONE (docs updated with examplify)
-- [x] 21. Card (data-display/card.js) - DONE (docs updated with examplify)
-- [x] 22. Avatar (data-display/avatar.js) - DONE (docs updated with examplify)
-- [x] 23. Table (data-display/table.js) - DONE (docs updated with examplify)
-- [x] 24. Accordion (data-display/accordion.js) - DONE (docs updated with examplify)
-- [x] 25. Collapse (data-display/collapse.js) - DONE (docs updated with examplify)
-- [x] 26. Carousel (data-display/carousel.js) - DONE (docs updated with examplify)
-- [x] 27. Chat (data-display/chat.js) - DONE (docs updated with examplify)
-- [x] 28. Countdown (data-display/countdown.js) - DONE (docs updated with examplify)
-- [x] 29. Diff (data-display/diff.js) - DONE (docs updated with examplify)
-- [x] 30. Kbd (data-display/kbd.js) - DONE (docs updated with examplify)
-- [x] 31. Stats (data-display/stats.js) - DONE (docs updated with examplify)
-- [x] 32. Timeline (data-display/timeline.js) - DONE (docs updated with examplify)
-- [x] 33. Skeleton (data-display/skeleton.js) - DONE (docs updated with examplify)
-
-### Batch 4: Navigation & Layout ✅ COMPLETE
-- [x] 34. Tabs (navigation/tabs.js) - DONE (docs updated with examplify)
-- [x] 35. Menu (navigation/menu.js) - DONE (docs updated with examplify)
-- [x] 36. Breadcrumbs (navigation/breadcrumbs.js) - DONE (docs updated with examplify)
-- [x] 37. Pagination (navigation/pagination.js) - DONE (docs updated with examplify)
-- [x] 38. Steps (navigation/steps.js) - DONE (docs updated with examplify)
-- [x] 39. Dock (navigation/dock.js) - DONE (docs updated with examplify)
-- [x] 40. Navbar (layout/navbar.js) - DONE (docs updated with examplify)
-- [x] 41. Footer (layout/footer.js) - DONE (docs updated with examplify)
-- [x] 42. Hero (layout/hero.js) - DONE (docs updated with examplify)
-- [x] 43. Divider (layout/divider.js) - DONE (docs updated with examplify)
-- [x] 44. Indicator (layout/indicator.js) - DONE (docs updated with examplify)
-- [x] 45. Join (layout/join.js) - DONE (docs updated with examplify)
-
-### Batch 5: Specialized ✅ COMPLETE
-- [x] 46. Theme Controller (actions/theme-controller.js) - DONE (docs updated with examplify)
-- [x] 47. Chart (data-display/chart.js) - DONE (docs updated with examplify)
-- [x] 48. Radial Progress (data-display/radial-progress.js) - DONE (docs updated with examplify)
-
-### Batch 6: Shadow DOM Support
-Add `useShadow` prop and Shadow DOM rendering to all components following the `input.js` pattern:
-- Check `LightviewX.shouldUseShadow(useShadow)` to determine if shadow DOM should be used
-- Get adopted stylesheets via `LightviewX.getAdoptedStyleSheets()`
-- Get current theme from `document.documentElement.getAttribute('data-theme')`
-- Wrap component in `shadowDOM({ mode: 'open', adoptedStyleSheets }, div({ 'data-theme': currentTheme }, componentEl))`
-
-Components to update:
-- [x] Button (actions/button.js) - DONE
-- [x] Dropdown (actions/dropdown.js)
-- [x] Modal (actions/modal.js)
-- [x] Swap (actions/swap.js)
-- [x] Alert (data-display/alert.js)
-- [x] Toast (data-display/toast.js)
-- [x] Loading (data-display/loading.js)
-- [x] Progress (data-display/progress.js)
-- [x] Drawer (layout/drawer.js)
-- [x] Tooltip (data-display/tooltip.js)
-- [x] Badge (data-display/badge.js)
-- [x] Card (data-display/card.js)
-- [x] Avatar (data-display/avatar.js)
-- [x] Table (data-display/table.js)
-- [x] Accordion (data-display/accordion.js)
-- [x] Collapse (data-display/collapse.js)
-- [x] Carousel (data-display/carousel.js)
-- [x] Chat (data-display/chat.js)
-- [x] Countdown (data-display/countdown.js)
-- [x] Diff (data-display/diff.js)
-- [x] Kbd (data-display/kbd.js)
-- [x] Stats (data-display/stats.js)
-- [x] Timeline (data-display/timeline.js)
-- [x] Skeleton (data-display/skeleton.js)
-- [x] Tabs (navigation/tabs.js)
-- [x] Menu (navigation/menu.js)
-- [x] Breadcrumbs (navigation/breadcrumbs.js)
-- [x] Pagination (navigation/pagination.js)
-- [x] Steps (navigation/steps.js)
-- [x] Dock (navigation/dock.js)
-- [x] Navbar (layout/navbar.js)
-- [x] Footer (layout/footer.js)
-- [x] Hero (layout/hero.js)
-- [x] Divider (layout/divider.js)
-- [x] Indicator (layout/indicator.js)
-- [x] Join (layout/join.js)
-- [x] Theme Controller (actions/theme-controller.js)
-- [x] Chart (data-display/chart.js)
-- [x] Radial Progress (data-display/radial-progress.js)
-
-
-## Cleanup Tasks
-- [x] Delete components/core/ directory
-- [x] Delete components/display/ directory (after consolidation)
-- [x] Delete components/feedback/ directory (after consolidation)
-- [x] Delete unused .css files
-- [x] Delete components/utils/icons.js
-- [x] Update components/index.js exports
-
-## Per-Component Checklist
-For each component:
-1. [ ] Refactor .js to use DaisyUI classes
-2. [ ] Add Shadow DOM support (useShadow prop)
-3. [ ] Add validation/error support where applicable
-4. [ ] Add controlled/uncontrolled state support
-5. [ ] Remove getIcon() usage
-6. [ ] Update .html docs with examplify (basic + reactive examples)
-7. [ ] Delete old .css file if no longer needed
-8. [ ] Test in browser

package/lightview.js.backup

@@ -1,793 +0,0 @@
-(() => {
-    // ============= SIGNALS =============
-
-    let currentEffect = null;
-
-
-    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();
-
-    // Helper to attach .for() method to arrays for list reconciliation
-    const enhanceArray = (arr) => {
-        if (!Array.isArray(arr)) return;
-        // Avoid redefining if already present
-        if (arr.hasOwnProperty('for')) return;
-        Object.defineProperty(arr, 'for', {
-            configurable: true,
-            enumerable: false,
-            value: function (fn) {
-                return { [LIST_MARKER]: true, items: this, fn };
-            }
-        });
-    };
-
-    const signal = (initialValue, name) => {
-        enhanceArray(initialValue);
-        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) {
-                    enhanceArray(newValue);
-                    value = newValue;
-                    // 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);
-    };
-
-    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();
-        });
-        return sig;
-    };
-
-
-    // ============= SHADOW DOM SUPPORT =============
-    // Marker symbol to identify shadowDOM directives
-    const SHADOW_DOM_MARKER = Symbol('lightview.shadowDOM');
-    const LIST_MARKER = Symbol('lightview.list');
-
-    /**
-     * 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 =============
-    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; }
-        };
-        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);
-        }
-
-        // Special handling for shadowDOM pseudo-element
-        if (tag === 'shadowDOM') {
-            return createShadowDOMMarker(attributes, children);
-        }
-
-        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(), {}, []);
-        }
-
-        // 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 || []);
-        }
-
-        // 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 || []);
-            }
-        }
-
-        return 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;
-                }
-                return true;
-            }
-        });
-    };
-
-    // 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);
-        }
-    };
-
-    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
-     */
-    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;
-            }
-
-            // Handle nested arrays (flattening)
-            if (Array.isArray(child)) {
-                childElements.push(...processChildren(child, targetNode, false));
-                continue;
-            }
-
-            // 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 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;
-                    let oldState = []; // State for list reconciliation
-
-                    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;
-                        }
-
-                        if (val && val[LIST_MARKER]) {
-                            // Optimized list reconciliation
-                            oldState = reconcileList(wrapper, oldState, val.items, val.fn);
-                        } else {
-                            // Full re-render fallback
-                            oldState = []; // Reset optimization state
-                            const childrenToProcess = Array.isArray(val) ? val : [val];
-                            // processChildren handles clearing existing content via 3rd arg=true
-                            processChildren(childrenToProcess, wrapper, true);
-                        }
-                    };
-
-                    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);
-                }
-            } 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;
-    };
-
-    /**
-     * Efficiently reconcile list items to minimize DOM operations
-     */
-    const reconcileList = (parent, oldState, newItems, renderFn) => {
-        const reuse = new Map();
-
-        // 1. Map old nodes for potential reuse
-        for (const entry of oldState) {
-            let list = reuse.get(entry.item);
-            if (!list) { list = []; reuse.set(entry.item, list); }
-            list.push(entry.node);
-        }
-
-        const newState = [];
-
-        // 2. Build new state, reusing nodes where possible
-        for (const item of newItems) {
-            let node;
-            const list = reuse.get(item);
-            if (list && list.length > 0) {
-                // Reuse existing node for this item
-                node = list.shift();
-            } else {
-                // Create new node from render function
-                const raw = renderFn(item);
-
-                // Use a temporary container to process the result into DOM nodes
-                const temp = document.createElement('div');
-                // processChildren returns the Lightview wrappers/proxies; we need the DOM nodes
-                processChildren([raw], temp, false);
-
-                if (temp.childNodes.length === 1) {
-                    node = temp.firstChild;
-                } else if (temp.childNodes.length === 0) {
-                    node = document.createTextNode('');
-                } else {
-                    // Multiple nodes returned for one item, wrap in span
-                    node = document.createElement('span');
-                    node.style.display = 'contents';
-                    while (temp.firstChild) {
-                        node.appendChild(temp.firstChild);
-                    }
-                }
-            }
-            newState.push({ item, node });
-        }
-
-        // 3. Remove unused nodes
-        for (const list of reuse.values()) {
-            for (const n of list) {
-                n.remove();
-            }
-        }
-
-        // 4. Reorder/Append nodes in valid order
-        let sibling = parent.firstChild;
-        for (const entry of newState) {
-            const domNode = entry.node;
-            if (sibling === domNode) {
-                // Already in place
-                sibling = sibling.nextSibling;
-            } else {
-                // Needs to be moved or inserted
-                parent.insertBefore(domNode, sibling);
-            }
-        }
-
-        return newState;
-    };
-
-    /**
-     * 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);
-        }
-
-        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;
-    };
-
-    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;
-                    }
-                });
-
-                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);
-                });
-                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());
-            };
-
-            const original = customTags[tag];
-            if (original) {
-                Object.assign(wrapper, original);
-            }
-
-            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
-        },
-        // 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) => {
-            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)); };
-
-        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();
-        }
-    }
-})();