luciddom 1.0.0 → 1.0.1

package/README.md

@@ -2,9 +2,17 @@
 
 LucidDOM.js is a lightweight browser-side DOM helper. It wraps a parent element and provides methods for creating elements, selecting descendants, updating content, handling events, applying inline styles, and removing elements.
 
-## Quick start
+## Installation
 
-Copy `lucidDOM.js` into your project and import its default export from a JavaScript module:
+### npm
+
+Install LucidDOM from npm:
+
+```sh
+npm install luciddom
+```
+
+Import the default export in your app. Use a bundler that resolves npm packages:
 
 ```html
 <div id="app"></div>
@@ -13,7 +21,7 @@ Copy `lucidDOM.js` into your project and import its default export from a JavaSc
 
 ```js
 // app.js
-import LucidDOM from './lucidDOM.js';
+import LucidDOM from 'luciddom';
 
 const app = new LucidDOM(document.querySelector('#app'));
 
@@ -26,6 +34,23 @@ const message = app.addElement({
 message.styles({ color: 'darkslateblue', fontWeight: 'bold' });
 ```
 
+### unpkg CDN
+
+For a browser module without an npm install or bundler, import the package directly from unpkg:
+
+```html
+<div id="app"></div>
+<script type="module">
+    import LucidDOM from 'https://unpkg.com/luciddom@1.0.1/lucidDOM.js';
+
+    const app = new LucidDOM(document.querySelector('#app'));
+    app.addElement({
+        tag: 'p',
+        value: 'Hello from LucidDOM!'
+    });
+</script>
+```
+
 The constructor accepts a DOM element and scopes queries and element creation to it. If no parent is passed, it defaults to `document.body`.
 
 ## Common operations
@@ -114,14 +139,14 @@ When nothing matches, `current` is an empty NodeList and helper methods do nothi
 
 ## Build
 
-The package includes an esbuild script to create a minified ES module bundle:
+The package includes an esbuild script to create a minified browser bundle:
 
 ```sh
 npm install
 npm run build
 ```
 
-The output is written to `dist/lucid.min.js`.
+The output is written to `dist/luciddom.min.js`.
 
 ## Documentation
 

package/lucidDOM.js

@@ -0,0 +1,797 @@
+/**
+ * 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

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "luciddom",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "LucidDOM.js is a lightweight browser-side DOM helper. It wraps a parent element and provides methods for creating elements, selecting descendants, updating content, handling events, applying inline styles, and removing elements.",
-  "main": "dist/lucid.min.js",
+  "main": "lucidDOM.js",
   "dependencies": {
     "esbuild": "^0.28.2"
   },
@@ -11,8 +11,8 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "esbuild lucidDOM.js --bundle --minify --sourcemap --outfile=dist/luciddom.min.js"
   },
-  "keywords": [],
-  "author": "",
+  "keywords": ["LucidDOM", "DOM helper", "Jquery", "DOM", "javascript", "js", "helper lib", "New Dom Helper", "2026"],
+  "author": "Prince B. Adu",
   "license": "ISC",
   "type": "module"
 }