luciddom 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luciddom",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "LucidDOM.js is a lightweight browser-side DOM helper. ...",
   "main": "lucidDOM.js",
   "module": "lucidDOM.js",

package/lucidDOM.js

@@ -1,797 +0,0 @@
-/**
- * A lightweight DOM helper that wraps a parent element and exposes fluent
- * methods for creating, selecting, styling, and removing elements.
- *
- * @example
- * const app = new LucidDOM(document.querySelector('#root'));
- *
- * const header = app.select('header');
- * header.update({ className: 'love' });
- * header.styles({ backgroundColor: 'red' });
- * header.on('click', () => console.log('clicked'));
- */
-
-class LucidDOM{
-    constructor(parent = document.querySelector('body')){
-        this.parent = parent;
-        this.element;
-    }
-
-    /**
- * Creates an HTML element, applies attributes, appends it to the parent,
- * and returns a small handle for interacting with the created element.
- *
- * @param {Object} options
- * @param {string} options.tag - Tag name of the element to create (e.g. 'div', 'input').
- * @param {string} [options.className] - Value for the element's `class` attribute.
- * @param {string} [options.id] - Value for the element's `id` attribute.
- * @param {string} [options.value] - Text content / value for the element.
- * @param {string} [options.type] - `type` attribute (mainly for `<input>`).
- * @param {string} [options.placeholder] - `placeholder` attribute (mainly for `<input>` / `<textarea>`).
- * @param {string} [options.name] - `name` attribute.
- * @param {string} [options.htmlFor] - `for` attribute (mainly for `<label>`).
- * @param {string} [options.formAction] - `formaction` attribute (mainly for `<button>` / `<input>`).
- * @param {string} [options.formMethod] - `formmethod` attribute (mainly for `<button>` / `<input>`).
- * @param {string} [options.formTarget] - `formtarget` attribute (mainly for `<button>` / `<input>`).
- * @param {string} [options.formEnctype] - `formenctype` attribute (mainly for `<button>` / `<input>`).
- * @param {boolean} [options.formNoValidate] - `formnovalidate` attribute (mainly for `<button>` / `<input>`).
- * @param {string} [options.ariaLabel] - Value for the `aria-label` attribute.
- * @param {string} [options.title] - `title` attribute.
- * @param {string} [options.html] - Raw HTML to inject via `innerHTML`.
- *
- * @returns {{
- *   on: (event?: string, callback?: (e: Event) => void) => void,
- * addChildren: (attrs?: {
- *     className?: string,
- *     id?: string,
- *     value?: string,
- *     type?: string,
- *     placeholder?: string,
- *     name?: string,
- *     htmlFor?: string,
- *     formAction?: string,
- *     formMethod?: string,
- *     formTarget?: string,
- *     formEnctype?: string,
- *     formNoValidate?: boolean,
- *     ariaLabel?: string,
- *     title?: string,
- *     html?: string}),
- *   off: (event?: string, callback?: (e: Event) => void) => void,
- *   styles: (styles?: Partial<CSSStyleDeclaration>) => void,
- *   remove: () => void
- * }} A handle exposing event, style, and removal helpers for the created element.
- *
- * @throws {Error} If element creation or attribute assignment fails
- *                  (wraps a generic {@link DOMException}).
- *
- * @example
- * const div = app.addElement({
- *   tag: 'div',
- *   className: 'card',
- *   value: 'Hello',
- *   html: '<strong>Hello</strong>'
- * });
- * div.styles({ padding: '8px', backgroundColor: 'red' });
- * div.on('click', () => console.log('clicked'));
- */
-    addElement({tag, className,id, value,type, placeholder, name, htmlFor, formAction, formMethod, formTarget, formEnctype, formNoValidate, ariaLabel, title, html}){
-        
-        try{
-            // ATTRIBUTES
-        this.element = document.createElement(tag);
-        className?this.element.className = className: '';
-        type?this.element.type = type: '';
-        value?this.element.innerText = value : '';
-        this.element.value = value;
-        id?this.element.id = id: '';
-        html?this.element.innerHTML = html: '';
-        placeholder? this.element.placeholder = placeholder: '';
-        this.element.name = name;
-        title?this.element.title = title: '';
-        ariaLabel?this.element.ariaLabel = ariaLabel: '';
-        this.element.htmlFor = htmlFor;
-        formAction?this.element.formAction = formAction: '';
-        formEnctype?this.element.formEnctype = formEnctype: '';
-        formMethod?this.element.formMethod =formMethod: '';
-        formTarget?this.element.formTarget = formTarget: '';
-        formNoValidate?this.element.formNoValidate =formNoValidate: '';
-
-        
-
-
-        // APPENDING ELEMENT TO PARENT
-        this.parent.appendChild(this.element);
-        
-        
-
-        return{
-            on: (event = '', callback = () => {}) =>{
-                this.element.addEventListener(event, callback);
-                
-            },
-
-            off: (event = '', callback = () => {}) => {
-                this.element.removeEventListener(event, callback)
-            },
-
-            styles : (styles = {}) => {
-                Object.assign(this.element.style, styles)
-            },
-            remove: ()=> {
-                this.element.remove();
-            },
-
-                 /**
-         * Creates an HTML element, applies attributes, appends it to the parent,
-         * and returns a small handle for interacting with the created element.
-         *
-         * @param {Object} options
-         * @param {string} options.tag - Tag name of the element to create (e.g. 'div', 'input').
-         * @param {string} [options.className] - Value for the element's `class` attribute.
-         * @param {string} [options.id] - Value for the element's `id` attribute.
-         * @param {string} [options.value] - Text content / value for the element.
-         * @param {string} [options.type] - `type` attribute (mainly for `<input>`).
-         * @param {string} [options.placeholder] - `placeholder` attribute (mainly for `<input>` / `<textarea>`).
-         * @param {string} [options.name] - `name` attribute.
-         * @param {string} [options.htmlFor] - `for` attribute (mainly for `<label>`).
-         * @param {string} [options.formAction] - `formaction` attribute (mainly for `<button>` / `<input>`).
-         * @param {string} [options.formMethod] - `formmethod` attribute (mainly for `<button>` / `<input>`).
-         * @param {string} [options.formTarget] - `formtarget` attribute (mainly for `<button>` / `<input>`).
-         * @param {string} [options.formEnctype] - `formenctype` attribute (mainly for `<button>` / `<input>`).
-         * @param {boolean} [options.formNoValidate] - `formnovalidate` attribute (mainly for `<button>` / `<input>`).
-         * @param {string} [options.ariaLabel] - Value for the `aria-label` attribute.
-         * @param {string} [options.title] - `title` attribute.
-         * @param {string} [options.html] - Raw HTML to inject via `innerHTML`.
-         *
-         * @returns {{
-         *   on: (event?: string, callback?: (e: Event) => void) => void,
-         *   off: (event?: string, callback?: (e: Event) => void) => void,
-         *   styles: (styles?: Partial<CSSStyleDeclaration>) => void,
-         *   remove: () => void
-         * }} A handle exposing event, style, and removal helpers for the created element.
-         *
-         * @throws {Error} If element creation or attribute assignment fails
-         *                  (wraps a generic {@link DOMException}).
-         *
-         * @example
-         * const div = app.addElement({
-         *   tag: 'div',
-         *   className: 'card',
-         *   value: 'Hello',
-         *   html: '<strong>Hello</strong>'
-         * });
-         * div.styles({ padding: '8px', backgroundColor: 'red' });
-         * div.on('click', () => console.log('clicked'));
-         */
-        addChildren: ({tag, className,id, value,type, placeholder, name, htmlFor, formAction, formMethod, formTarget, formEnctype, formNoValidate, ariaLabel, title, html}) =>{
-
-            // ATTRIBUTES
-            let element;
-        element = document.createElement(tag);
-        className?element.className = className: '';
-        type?element.type = type: '';
-        value?element.innerText = value : '';
-        element.value = value;
-        id?element.id = id: '';
-        html?element.innerHTML = html: '';
-        placeholder? element.placeholder = placeholder: '';
-        element.name = name;
-        title?element.title = title: '';
-        ariaLabel?element.ariaLabel = ariaLabel: '';
-        this.element.htmlFor = htmlFor;
-        formAction?element.formAction = formAction: '';
-        formEnctype?element.formEnctype = formEnctype: '';
-        formMethod?element.formMethod =formMethod: '';
-        formTarget?element.formTarget = formTarget: '';
-        formNoValidate?element.formNoValidate =formNoValidate: '';
-
-        
-
-
-        // APPENDING ELEMENT TO PARENT
-        this.element.appendChild(element);
-        
-        
-
-        return{
-            on: (event = '', callback = () => {}) =>{
-                this.element.addEventListener(event, callback);
-                
-            },
-
-            off: (event = '', callback = () => {}) => {
-                this.element.removeEventListener(event, callback)
-            },
-
-            styles : (styles = {}) => {
-                Object.assign(this.element.style, styles)
-            },
-            remove: ()=> {
-                this.element.remove();
-            }
-        }
-        }
-
-
-        }
-
-
-            }catch{
-            throw new Error(new DOMException);
-            
-        }
-    }
-
-
-
-    /**
- * Attaches an event listener to the parent element.
- *
- * @param {string} [event=''] - Event type to listen for (e.g. 'click', 'input').
- * @param {(e: Event) => void} [callback=() => {}] - Handler invoked when the event fires.
- * @returns {void}
- *
- * @example
- * app.on('click', (e) => console.log('parent clicked'));
- */
-    on(event = '', callback = () => {}){
-        this.parent.addEventListener(event, callback)
-    };
-
-
-    /**
- * Removes a previously attached event listener from the parent element.
- *
- * @param {string} [event=''] - Event type the listener was registered for.
- * @param {(e: Event) => void} [callback=() => {}] - The exact handler reference
- *        originally passed to `on`. Inline arrow functions cannot be removed.
- * @returns {void}
- *
- * @example
- * const handler = () => console.log('clicked');
- * app.on('click', handler);
- * app.off('click', handler);
- */
-    off(event = '', callback = () => {}){
-        this.parent.removeEventListener(event, callback)
-    };
-
-    /**
- * Merges the given styles into the parent element's inline style.
- *
- * @param {Partial<CSSStyleDeclaration>} [styles={}] - Object of camelCased CSS
- *        properties and their values (e.g. `{ backgroundColor: 'red' }`).
- * @returns {void}
- *
- * @example
- * app.styles({ width: '100vw', height: '2rem' });
- */
-    styles(styles = {}){
-        Object.assign(this.parent.style, styles)
-    }
-
-
-    /**
-     * @param {ClassAccessorDecoratorContext} [className={}]
-     *The addClass() method  adds the given tokens to the list, omitting any that are already present.
-        MDN Reference
-
-        * @returns {void}
-        */
-    addClass(className)  {
-        this.element.classList.add(className);
-    }
-
-    /**
-     * @param {ClassAccessorDecoratorContext} [className={}]
-     *The removeClass() method  removes the given tokens from the specified list.
-
-
-        * @returns {void}
-        */
-    removeClass (className) {
-        this.element.classList.remove(className);
-    }
-
-    // Element selector
-    /**
- * Selects the first descendant of the parent matching `selector` and returns
- * a handle for interacting with it.
- *
- * @param {string} selector - Any valid CSS selector (e.g. 'header', '.card', '#root').
- * @returns {{
- *   current: Element | null,
- *   on: (event?: string, callback?: (e: Event) => void) => void,
- *   off: (event?: string, callback?: (e: Event) => void) => void,
- *   styles: (styles?: Partial<CSSStyleDeclaration>) => void,
- *    addChildren: (attrs?: {
- *     className?: string,
- *     id?: string,
- *     value?: string,
- *     type?: string,
- *     placeholder?: string,
- *     name?: string,
- *     htmlFor?: string,
- *     formAction?: string,
- *     formMethod?: string,
- *     formTarget?: string,
- *     formEnctype?: string,
- *     formNoValidate?: boolean,
- *     ariaLabel?: string,
- *     title?: string,
- *     html?: string}),
- *   remove: () => void,
- *   update: (attrs?: {
- *     className?: string,
- *     id?: string,
- *     value?: string,
- *     type?: string,
- *     placeholder?: string,
- *     name?: string,
- *     htmlFor?: string,
- *     formAction?: string,
- *     formMethod?: string,
- *     formTarget?: string,
- *     formEnctype?: string,
- *     formNoValidate?: boolean,
- *     ariaLabel?: string,
- *     title?: string,
- *     html?: string
- *   }) => void
- * }} A wrapper around the matched element. `current` is `null` if nothing matched.
- *
- * @example
- * const header = app.select('header');
- * header.update({ className: 'love', id: 'hatred' });
- * header.styles({ backgroundColor: 'red' });
- * header.on('click', () => console.log('clicked'));
- */
-    select(selector){
-        const element = this.parent.querySelector(selector);
-        return {
-            // Element
-            current: element,
-
-            /**
-         * Attaches an event listener to the matched element.
-         * @param {string} [event='']
-         * @param {(e: Event) => void} [callback=() => {}]
-         * @returns {void}
-         */
-            on: (event = '', callback = () => {}) =>{
-                element.addEventListener(event, callback)
-            },
-
-            /**
-         * Removes an event listener from the matched element.
-         * @param {string} [event='']
-         * @param {(e: Event) => void} [callback=() => {}]
-         * @returns {void}
-         */
-            off: (event = '', callback = () => {}) => {
-                element.removeEventListener(event, callback)
-            },
-
-             /**
-         * Merges styles into the matched element's inline style.
-         * @param {Partial<CSSStyleDeclaration>} [styles={}]
-         * @returns {void}
-         */
-            styles : (styles = {}) => {
-                Object.assign(element.style, styles)
-            },
-
-            /**
-             * Removes the matched element from the DOM.
-             * @returns {void}
-             */
-            remove: ()=> {
-                element.remove();
-            },
-
-            /**
-             * @param {ClassAccessorDecoratorContext} [className={}]
-             *The addClass() method  adds the given tokens to the list, omitting any that are already present.
-             MDN Reference
-
-             * @returns {void}
-             */
-            addClass: (className) => {
-                element.classList.add(className);
-            },
-            /**
-             * @param {ClassAccessorDecoratorContext} [className={}]
-             *The removeClass() method  removes the given tokens from the specified list.
-
-
-             * @returns {void}
-             */
-            removeClass: (className) => {
-                element.classList.remove(className);
-            },
-
-             /**
-         * Updates attributes and content on the matched element.
-         *
-         * @param {{
-         *   className?: string,
-         *   id?: string,
-         *   value?: string,
-         *   type?: string,
-         *   placeholder?: string,
-         *   name?: string,
-         *   htmlFor?: string,
-         *   formAction?: string,
-         *   formMethod?: string,
-         *   formTarget?: string,
-         *   formEnctype?: string,
-         *   formNoValidate?: boolean,
-         *   ariaLabel?: string,
-         *   title?: string,
-         *   html?: string
-         * }} [attrs]
-         * @returns {void}
-         */
-            update: ({ className,id, value,type, placeholder, name, htmlFor,formAction, formMethod, formTarget, formEnctype, formNoValidate, ariaLabel, title,html}) => {
-                className?element.className = className: '';
-                id?element.id= id: '';
-                value?element.value = value: '';
-                value?element.innerText = value : '';
-                type?element.type = type: '';
-                html?element.innerHTML = html: '';
-                placeholder? element.placeholder = placeholder: '';
-                element.name = name;
-                element.htmlFor = htmlFor;
-                formAction?element.formAction = formAction: '';
-                formEnctype?element.formEnctype = formEnctype: '';
-                formMethod?element.formMethod =formMethod: '';
-                formTarget?element.formTarget = formTarget: '';
-                formNoValidate?element.formNoValidate =formNoValidate: '';
-                title?element.title = title: '';
-                ariaLabel?element.ariaLabel = ariaLabel: '';
-            },
-
-            /**
-         * Creates an HTML element, applies attributes, appends it to the parent,
-         * and returns a small handle for interacting with the created element.
-         *
-         * @param {Object} options
-         * @param {string} options.tag - Tag name of the element to create (e.g. 'div', 'input').
-         * @param {string} [options.className] - Value for the element's `class` attribute.
-         * @param {string} [options.id] - Value for the element's `id` attribute.
-         * @param {string} [options.value] - Text content / value for the element.
-         * @param {string} [options.type] - `type` attribute (mainly for `<input>`).
-         * @param {string} [options.placeholder] - `placeholder` attribute (mainly for `<input>` / `<textarea>`).
-         * @param {string} [options.name] - `name` attribute.
-         * @param {string} [options.htmlFor] - `for` attribute (mainly for `<label>`).
-         * @param {string} [options.formAction] - `formaction` attribute (mainly for `<button>` / `<input>`).
-         * @param {string} [options.formMethod] - `formmethod` attribute (mainly for `<button>` / `<input>`).
-         * @param {string} [options.formTarget] - `formtarget` attribute (mainly for `<button>` / `<input>`).
-         * @param {string} [options.formEnctype] - `formenctype` attribute (mainly for `<button>` / `<input>`).
-         * @param {boolean} [options.formNoValidate] - `formnovalidate` attribute (mainly for `<button>` / `<input>`).
-         * @param {string} [options.ariaLabel] - Value for the `aria-label` attribute.
-         * @param {string} [options.title] - `title` attribute.
-         * @param {string} [options.html] - Raw HTML to inject via `innerHTML`.
-         *
-         * @returns {{
-         *   on: (event?: string, callback?: (e: Event) => void) => void,
-         *   off: (event?: string, callback?: (e: Event) => void) => void,
-         *   styles: (styles?: Partial<CSSStyleDeclaration>) => void,
-         *   remove: () => void
-         * }} A handle exposing event, style, and removal helpers for the created element.
-         *
-         * @throws {Error} If element creation or attribute assignment fails
-         *                  (wraps a generic {@link DOMException}).
-         *
-         * @example
-         * const div = app.addElement({
-         *   tag: 'div',
-         *   className: 'card',
-         *   value: 'Hello',
-         *   html: '<strong>Hello</strong>'
-         * });
-         * div.styles({ padding: '8px', backgroundColor: 'red' });
-         * div.on('click', () => console.log('clicked'));
-         */
-            addChildren: ({tag, className,id, value,type, placeholder, name, htmlFor, formAction, formMethod, formTarget, formEnctype, formNoValidate, ariaLabel, title, html}) =>{
-        try{
-            // ATTRIBUTES
-        this.element = document.createElement(tag);
-        className?this.element.className = className: '';
-        type?this.element.type = type: '';
-        value?this.element.innerText = value : '';
-        this.element.value = value;
-        id?this.element.id = id: '';
-        html?this.element.innerHTML = html: '';
-        placeholder? this.element.placeholder = placeholder: '';
-        this.element.name = name;
-        title?this.element.title = title: '';
-        ariaLabel?this.element.ariaLabel = ariaLabel: '';
-        this.element.htmlFor = htmlFor;
-        formAction?this.element.formAction = formAction: '';
-        formEnctype?this.element.formEnctype = formEnctype: '';
-        formMethod?this.element.formMethod =formMethod: '';
-        formTarget?this.element.formTarget = formTarget: '';
-        formNoValidate?this.element.formNoValidate =formNoValidate: '';
-
-        
-
-
-        // APPENDING ELEMENT TO PARENT
-        element.appendChild(this.element);
-        
-        
-
-        return{
-            on: (event = '', callback = () => {}) =>{
-                this.element.addEventListener(event, callback);
-                
-            },
-
-            off: (event = '', callback = () => {}) => {
-                this.element.removeEventListener(event, callback)
-            },
-
-            styles : (styles = {}) => {
-                Object.assign(this.element.style, styles)
-            },
-            remove: ()=> {
-                this.element.remove();
-            }
-        }
-
-
-        }catch{
-            throw new Error(new DOMException);
-            
-        }
-    }
-    };
-    }
-
-
-    // Element selector bulk
-    /**
- * Selects all descendants of the parent matching `selector` and returns a
- * handle for interacting with the matched elements as a group.
- *
- * @param {string} selector - Any valid CSS selector (e.g. '.card', 'li', 'input[type="text"]').
- * @returns {{
- *   current: NodeListOf<Element>,
- *   on: (event?: string, callback?: (e: Event) => void) => void,
- *   off: (event?: string, callback?: (e: Event) => void) => void,
- *   styles: (styles?: Partial<CSSStyleDeclaration>) => void,
- *   remove: () => void,
- *  addChildren: (attrs?: {
- *     className?: string,
- *     id?: string,
- *     value?: string,
- *     type?: string,
- *     placeholder?: string,
- *     name?: string,
- *     htmlFor?: string,
- *     formAction?: string,
- *     formMethod?: string,
- *     formTarget?: string,
- *     formEnctype?: string,
- *     formNoValidate?: boolean,
- *     ariaLabel?: string,
- *     title?: string,
- *     html?: string}),
- *   update: (attrs?: {
- *     className?: string,
- *     id?: string,
- *     value?: string,
- *     type?: string,
- *     placeholder?: string,
- *     name?: string,
- *     htmlFor?: string,
- *     formAction?: string,
- *     formMethod?: string,
- *     formTarget?: string,
- *     formEnctype?: string,
- *     formNoValidate?: boolean,
- *     ariaLabel?: string,
- *     title?: string,
- *     html?: string
- *   }) => void
- * }} A wrapper around the matched elements. `current` is an empty `NodeList`
- *    if nothing matched.
- *
- * @example
- * const items = app.selectAll('.item');
- * items.styles({ color: 'red' });
- * items.on('click', (e) => console.log('clicked', e.currentTarget));
- */
-    selectAll(selector){
-        const elements = this.parent.querySelectorAll(selector);
-        return {
-            // Element
-            /** @type {NodeListOf<Element>} The matched elements (may be empty). */
-            current: elements,
-            /**
-         * Attaches an event listener to the matched elements.
-         * @param {string} [event='']
-         * @param {(e: Event) => void} [callback=() => {}]
-         * @returns {void}
-         */
-            on: (event = '', callback = () => {}) =>{
-                elements.forEach((element) => element.addEventListener(event, callback));
-            },
-
-            /**
-         * Removes an event listener from the matched elements.
-         * @param {string} [event='']
-         * @param {(e: Event) => void} [callback=() => {}]
-         * @returns {void}
-         */
-            off: (event = '', callback = () => {}) => {
-                elements.forEach((element) => element.removeEventListener(event, callback));
-            },
-
-             /**
-         * Merges styles into each matched element's inline style.
-         * @param {Partial<CSSStyleDeclaration>} [styles={}]
-         * @returns {void}
-         */
-            styles : (styles = {}) => {
-                elements.forEach((element) => Object.assign(element.style, styles));
-            },
-            
-            /**
-         * Removes all matched elements from the DOM.
-         * @returns {void}
-         */
-            remove: ()=> {
-                elements.forEach((element) => element.remove());
-            },
-
-
-            /**
-             * @param {ClassAccessorDecoratorContext} [className={}]
-             *The addClass() method  adds the given tokens to the list, omitting any that are already present.
-             MDN Reference
-
-             * @returns {void}
-             */
-            addClass: (className) => {
-                elements.forEach((element) => element.classList.add(className));
-            },
-
-            /**
-             * @param {ClassAccessorDecoratorContext} [className={}]
-             *The removeClass() method  removes the given tokens from the specified list.
-
-
-             * @returns {void}
-             */
-            removeClass: (className) => {
-                elements.forEach((element) => element.classList.remove(className));
-            },
-
-             /**
-         * Updates attributes and content on each matched element.
-         *
-         * @param {{
-         *   className?: string,
-         *   id?: string,
-         *   value?: string,
-         *   type?: string,
-         *   placeholder?: string,
-         *   name?: string,
-         *   htmlFor?: string,
-         *   formAction?: string,
-         *   formMethod?: string,
-         *   formTarget?: string,
-         *   formEnctype?: string,
-         *   formNoValidate?: boolean,
-         *   ariaLabel?: string,
-         *   title?: string,
-         *   html?: string
-         * }} [attrs]
-         * @returns {void}
-         */
-            update: (attrs = {}) => {
-                const { className, id, value, type, placeholder, name, htmlFor, formAction, formMethod, formTarget, formEnctype, formNoValidate, ariaLabel, title, html } = attrs;
-                elements.forEach((element) => {
-                    if (className !== undefined) element.className = className;
-                    if (id !== undefined) element.id = id;
-                    if (value !== undefined) {
-                        element.value = value;
-                        element.innerText = value;
-                    }
-                    if (type !== undefined) element.type = type;
-                    if (placeholder !== undefined) element.placeholder = placeholder;
-                    if (name !== undefined) element.name = name;
-                    if (html !== undefined) element.innerHTML = html;
-                    if (htmlFor !== undefined) element.htmlFor = htmlFor;
-                    if (formAction !== undefined) element.formAction = formAction;
-                    if (formEnctype !== undefined) element.formEnctype = formEnctype;
-                    if (formMethod !== undefined) element.formMethod = formMethod;
-                    if (formTarget !== undefined) element.formTarget = formTarget;
-                    if (formNoValidate !== undefined) element.formNoValidate = formNoValidate;
-                    if (title !== undefined) element.title = title;
-                    if (ariaLabel !== undefined) element.ariaLabel = ariaLabel;
-                });
-            },
-
-              /**
-         * Creates an HTML element, applies attributes, appends it to the parent,
-         * and returns a small handle for interacting with the created element.
-         *
-         * @param {Object} options
-         * @param {string} options.tag - Tag name of the element to create (e.g. 'div', 'input').
-         * @param {string} [options.className] - Value for the element's `class` attribute.
-         * @param {string} [options.id] - Value for the element's `id` attribute.
-         * @param {string} [options.value] - Text content / value for the element.
-         * @param {string} [options.type] - `type` attribute (mainly for `<input>`).
-         * @param {string} [options.placeholder] - `placeholder` attribute (mainly for `<input>` / `<textarea>`).
-         * @param {string} [options.name] - `name` attribute.
-         * @param {string} [options.htmlFor] - `for` attribute (mainly for `<label>`).
-         * @param {string} [options.formAction] - `formaction` attribute (mainly for `<button>` / `<input>`).
-         * @param {string} [options.formMethod] - `formmethod` attribute (mainly for `<button>` / `<input>`).
-         * @param {string} [options.formTarget] - `formtarget` attribute (mainly for `<button>` / `<input>`).
-         * @param {string} [options.formEnctype] - `formenctype` attribute (mainly for `<button>` / `<input>`).
-         * @param {boolean} [options.formNoValidate] - `formnovalidate` attribute (mainly for `<button>` / `<input>`).
-         * @param {string} [options.ariaLabel] - Value for the `aria-label` attribute.
-         * @param {string} [options.title] - `title` attribute.
-         * @param {string} [options.html] - Raw HTML to inject via `innerHTML`.
-         *
-         * @returns {{
-         *   on: (event?: string, callback?: (e: Event) => void) => void,
-         *   off: (event?: string, callback?: (e: Event) => void) => void,
-         *   styles: (styles?: Partial<CSSStyleDeclaration>) => void,
-         *   remove: () => void
-         * }} A handle exposing event, style, and removal helpers for the created element.
-         *
-         * @throws {Error} If element creation or attribute assignment fails
-         *                  (wraps a generic {@link DOMException}).
-         *
-         * @example
-         * const div = app.addElement({
-         *   tag: 'div',
-         *   className: 'card',
-         *   value: 'Hello',
-         *   html: '<strong>Hello</strong>'
-         * });
-         * div.styles({ padding: '8px', backgroundColor: 'red' });
-         * div.on('click', () => console.log('clicked'));
-         */
-        addChildren: (attrs) => {
-            const children = [];
-            elements.forEach((parent) => {
-                const child = document.createElement(attrs.tag);
-                const { tag, className, id, value, type, placeholder, name, htmlFor, formAction, formMethod, formTarget, formEnctype, formNoValidate, ariaLabel, title, html } = attrs;
-                if (className !== undefined) child.className = className;
-                if (id !== undefined) child.id = id;
-                if (value !== undefined) {
-                    child.innerText = value;
-                    child.value = value;
-                }
-                if (type !== undefined) child.type = type;
-                if (placeholder !== undefined) child.placeholder = placeholder;
-                if (name !== undefined) child.name = name;
-                if (htmlFor !== undefined) child.htmlFor = htmlFor;
-                if (formAction !== undefined) child.formAction = formAction;
-                if (formMethod !== undefined) child.formMethod = formMethod;
-                if (formTarget !== undefined) child.formTarget = formTarget;
-                if (formEnctype !== undefined) child.formEnctype = formEnctype;
-                if (formNoValidate !== undefined) child.formNoValidate = formNoValidate;
-                if (ariaLabel !== undefined) child.ariaLabel = ariaLabel;
-                if (title !== undefined) child.title = title;
-                if (html !== undefined) child.innerHTML = html;
-
-                parent.appendChild(child);
-                children.push(child);
-            });
-
-            return children;
-        }
-        };
-    }
-
-
-}
-
-export default LucidDOM