juxscript 1.1.60 → 1.1.62

package/lib/components/modal.d.ts

@@ -1,20 +1,38 @@
 import { BaseComponent } from './base/BaseComponent.js';
+export type EmojiIconType = {
+    icon: string;
+    collection?: 'lucide' | 'heroicons' | 'material-symbols' | 'material' | 'icon-park' | string;
+};
 export interface ModalOptions {
     title?: string;
-    content?: string;
-    showCloseButton?: boolean;
-    closeOnBackdropClick?: boolean;
+    content?: string | BaseComponent<any> | Array<string | BaseComponent<any>>;
+    icon?: EmojiIconType | undefined;
+    close?: boolean;
+    backdropClose?: boolean;
+    position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover';
     size?: 'small' | 'medium' | 'large';
+    actions?: Array<{
+        label: string;
+        variant?: string;
+        click?: () => void;
+    } | Array<BaseComponent<any>>>;
     style?: string;
     class?: string;
 }
 type ModalState = {
     title: string;
-    content: string;
-    showCloseButton: boolean;
-    closeOnBackdropClick: boolean;
+    content: string | BaseComponent<any> | Array<string | BaseComponent<any>>;
+    icon: EmojiIconType | undefined;
+    close: boolean;
+    backdropClose: boolean;
+    position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover';
     size: string;
     open: boolean;
+    actions: Array<{
+        label: string;
+        variant?: string;
+        click?: () => void;
+    } | Array<BaseComponent<any>>>;
     style: string;
     class: string;
 };
@@ -23,29 +41,47 @@ export declare class Modal extends BaseComponent<ModalState> {
     constructor(id: string, options?: ModalOptions);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
+    update(prop: string, value: any): void;
+    private _updateTitle;
+    private _updateIcon;
+    private _updateContent;
+    private _rebuildActions;
     title(value: string): this;
-    content(value: string): this;
-    showCloseButton(value: boolean): this;
-    closeOnBackdropClick(value: boolean): this;
+    content(value: string | BaseComponent<any> | Array<string | BaseComponent<any>>): this;
+    icon(value: EmojiIconType): this;
+    close(value: boolean): this;
+    backdropClose(value: boolean): this;
     size(value: 'small' | 'medium' | 'large'): this;
+    actions(value: Array<{
+        label: string;
+        variant?: string;
+        click?: () => void;
+    }>): this;
+    addAction(action: {
+        label: string;
+        variant?: string;
+        click?: () => void;
+    }): this;
     open(): this;
-    close(): this;
+    closeModal(): this;
+    toggle(): this;
+    /**
+     * Add content to modal (supports strings and BaseComponents)
+     */
+    addContent(content: string | BaseComponent<any> | Array<string | BaseComponent<any>>): this;
     /**
-     * Get the modal body element ID for rendering child components
-     * @returns The ID of the modal body element (e.g., 'mymodal-body')
-     *
-     * Usage:
-     *   const modal = jux.modal('files-modal', { title: 'Files' }).render('body').open();
-     *   jux.table('files-table', {...}).render(modal.bodyId());
+     * Clear all content from modal
      */
-    bodyId(): string;
+    clearContent(): this;
     /**
-     * Get the modal body element (only available after render)
-     * @returns The modal body element or null if not rendered
+     * Get the modal content element ID for rendering child components
      */
-    getBodyElement(): HTMLElement | null;
+    contentId(): string;
+    /**
+     * Get the modal content element (only available after render)
+     */
+    getContentElement(): HTMLElement | null;
     render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-    update(prop: string, value: any): void;
 }
 export declare function modal(id: string, options?: ModalOptions): Modal;
 export {};

package/lib/components/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,OAAO,CAAC;IACzB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,KAAM,SAAQ,aAAa,CAAC,UAAU,CAAC;IAClD,OAAO,CAAC,QAAQ,CAA4B;gBAEhC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB;IAalD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAehD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAY1B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAW5B,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKrC,oBAAoB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK1C,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI;IAW/C,IAAI,IAAI,IAAI;IAUZ,KAAK,IAAI,IAAI;IAUb;;;;;;;OAOG;IACH,MAAM,IAAI,MAAM;IAIhB;;;OAGG;IACH,cAAc,IAAI,WAAW,GAAG,IAAI;IAQpC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IAkIlE,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;CAGvC;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,KAAK,CAEnE"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["modal.ts"],"names":[],"mappings":"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"}

package/lib/components/modal.js

@@ -1,4 +1,5 @@
 import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
 // Event definitions
 const TRIGGER_EVENTS = [];
 const CALLBACK_EVENTS = ['open', 'close'];
@@ -7,10 +8,13 @@ export class Modal extends BaseComponent {
         super(id, {
             title: options.title ?? '',
             content: options.content ?? '',
-            showCloseButton: options.showCloseButton ?? true,
-            closeOnBackdropClick: options.closeOnBackdropClick ?? true,
+            icon: options.icon ?? undefined,
+            close: options.close ?? true,
+            backdropClose: options.backdropClose ?? true,
+            position: options.position,
             size: options.size ?? 'medium',
             open: false,
+            actions: options.actions ?? [],
             style: options.style ?? '',
             class: options.class ?? ''
         });
@@ -23,95 +27,243 @@ export class Modal extends BaseComponent {
         return CALLBACK_EVENTS;
     }
     /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
+     * REACTIVE UPDATE (Precision DOM edits)
      * ═════════════════════════════════════════════════════════════════ */
-    // ✅ Inherited from BaseComponent:
-    // - style(), class()
-    // - bind(), sync(), renderTo()
-    // - addClass(), removeClass(), toggleClass()
-    // - visible(), show(), hide()
-    // - attr(), attrs(), removeAttr()
-    title(value) {
-        this.state.title = value;
-        if (this._overlay) {
+    update(prop, value) {
+        super.update(prop, value);
+        if (!this._overlay)
+            return;
+        const modal = this._overlay.querySelector('.jux-modal');
+        if (!modal)
+            return;
+        switch (prop) {
+            case 'open':
+                this._overlay.style.display = value ? 'flex' : 'none';
+                if (value) {
+                    this._triggerCallback('open');
+                }
+                else {
+                    this._triggerCallback('close');
+                }
+                break;
+            case 'title':
+                this._updateTitle(value);
+                break;
+            case 'content':
+                this._updateContent(value);
+                break;
+            case 'icon':
+                this._updateIcon(value);
+                break;
+            case 'size':
+                modal.className = modal.className.replace(/jux-modal-(small|medium|large)/, `jux-modal-${value}`);
+                break;
+            case 'actions':
+                this._rebuildActions();
+                break;
+        }
+    }
+    _updateTitle(value) {
+        let headerEl = this._overlay.querySelector('.jux-modal-header');
+        if (!headerEl && value) {
+            // Create header if it doesn't exist
+            headerEl = document.createElement('div');
+            headerEl.className = 'jux-modal-header';
             const modal = this._overlay.querySelector('.jux-modal');
-            const header = modal?.querySelector('.jux-modal-header');
-            if (header) {
-                header.textContent = value;
+            const body = modal.querySelector('.jux-modal-body');
+            modal.insertBefore(headerEl, body);
+        }
+        if (headerEl) {
+            // Preserve icon if exists
+            const iconEl = headerEl.querySelector('.jux-modal-header-icon');
+            headerEl.innerHTML = '';
+            if (iconEl) {
+                headerEl.appendChild(iconEl);
+            }
+            const titleEl = document.createElement('span');
+            titleEl.className = 'jux-modal-header-title';
+            titleEl.textContent = value;
+            headerEl.appendChild(titleEl);
+        }
+    }
+    _updateIcon(value) {
+        const headerEl = this._overlay.querySelector('.jux-modal-header');
+        if (!headerEl)
+            return;
+        let iconEl = headerEl.querySelector('.jux-modal-header-icon');
+        if (value) {
+            if (!iconEl) {
+                iconEl = document.createElement('span');
+                iconEl.className = 'jux-modal-header-icon';
+                headerEl.insertBefore(iconEl, headerEl.firstChild);
+            }
+            iconEl.innerHTML = '';
+            iconEl.appendChild(renderIcon(value.icon, value.collection));
+        }
+        else if (iconEl) {
+            iconEl.remove();
+        }
+    }
+    _updateContent(value) {
+        const contentEl = this._overlay.querySelector('.jux-modal-content');
+        if (!contentEl)
+            return;
+        contentEl.innerHTML = '';
+        const items = Array.isArray(value) ? value : [value];
+        items.forEach(item => {
+            if (typeof item === 'string') {
+                const tempDiv = document.createElement('div');
+                tempDiv.innerHTML = item;
+                while (tempDiv.firstChild) {
+                    contentEl.appendChild(tempDiv.firstChild);
+                }
+            }
+            else if (item instanceof BaseComponent) {
+                item.render(contentEl);
             }
+        });
+    }
+    _rebuildActions() {
+        const modal = this._overlay.querySelector('.jux-modal');
+        if (!modal)
+            return;
+        let footerEl = modal.querySelector('.jux-modal-footer');
+        if (this.state.actions.length === 0) {
+            if (footerEl)
+                footerEl.remove();
+            return;
         }
+        if (!footerEl) {
+            footerEl = document.createElement('div');
+            footerEl.className = 'jux-modal-footer';
+            modal.appendChild(footerEl);
+        }
+        footerEl.innerHTML = '';
+        this.state.actions.forEach(action => {
+            // Check if it's an array of BaseComponents
+            if (Array.isArray(action)) {
+                action.forEach(component => {
+                    if (component instanceof BaseComponent) {
+                        component.render(footerEl);
+                    }
+                });
+            }
+            // Otherwise it's an action object with label property
+            else if ('label' in action) {
+                const btn = document.createElement('button');
+                btn.className = `jux-modal-action jux-modal-action-${action.variant || 'default'}`;
+                btn.textContent = action.label;
+                btn.type = 'button';
+                btn.addEventListener('click', () => {
+                    if (action.click)
+                        action.click();
+                });
+                footerEl.appendChild(btn);
+            }
+        });
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API (Just set state, update() handles DOM)
+     * ═════════════════════════════════════════════════════════════════ */
+    title(value) {
+        this.state.title = value;
         return this;
     }
     content(value) {
         this.state.content = value;
-        if (this._overlay) {
-            const body = this._overlay.querySelector('.jux-modal-body');
-            if (body) {
-                body.innerHTML = value;
-            }
-        }
         return this;
     }
-    showCloseButton(value) {
-        this.state.showCloseButton = value;
+    icon(value) {
+        this.state.icon = value;
+        return this;
+    }
+    close(value) {
+        this.state.close = value;
         return this;
     }
-    closeOnBackdropClick(value) {
-        this.state.closeOnBackdropClick = value;
+    backdropClose(value) {
+        this.state.backdropClose = value;
         return this;
     }
     size(value) {
         this.state.size = value;
-        if (this._overlay) {
-            const modal = this._overlay.querySelector('.jux-modal');
-            if (modal) {
-                modal.className = modal.className.replace(/jux-modal-(small|medium|large)/, `jux-modal-${value}`);
-            }
-        }
+        return this;
+    }
+    actions(value) {
+        this.state.actions = value;
+        return this;
+    }
+    addAction(action) {
+        this.state.actions = [...this.state.actions, action];
         return this;
     }
     open() {
         this.state.open = true;
-        if (this._overlay) {
-            this._overlay.style.display = 'flex';
-        }
-        // 🎯 Fire the open callback event
-        this._triggerCallback('open');
         return this;
     }
-    close() {
+    closeModal() {
         this.state.open = false;
-        if (this._overlay) {
-            this._overlay.style.display = 'none';
+        return this;
+    }
+    toggle() {
+        this.state.open = !this.state.open;
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * DYNAMIC CONTENT ADDITION (Like tabs.addTabContent)
+     * ═════════════════════════════════════════════════════════════════ */
+    /**
+     * Add content to modal (supports strings and BaseComponents)
+     */
+    addContent(content) {
+        const contentEl = this._overlay?.querySelector('.jux-modal-content');
+        if (!contentEl) {
+            console.warn('[Modal] Content element not found');
+            return this;
         }
-        // 🎯 Fire the close callback event
-        this._triggerCallback('close');
+        const items = Array.isArray(content) ? content : [content];
+        items.forEach(item => {
+            if (typeof item === 'string') {
+                const tempDiv = document.createElement('div');
+                tempDiv.innerHTML = item;
+                while (tempDiv.firstChild) {
+                    contentEl.appendChild(tempDiv.firstChild);
+                }
+            }
+            else if (item instanceof BaseComponent) {
+                item.render(contentEl);
+            }
+        });
         return this;
     }
     /**
-     * Get the modal body element ID for rendering child components
-     * @returns The ID of the modal body element (e.g., 'mymodal-body')
-     *
-     * Usage:
-     *   const modal = jux.modal('files-modal', { title: 'Files' }).render('body').open();
-     *   jux.table('files-table', {...}).render(modal.bodyId());
+     * Clear all content from modal
      */
-    bodyId() {
-        return `${this._id}-body`;
+    clearContent() {
+        const contentEl = this._overlay?.querySelector('.jux-modal-content');
+        if (contentEl) {
+            contentEl.innerHTML = '';
+        }
+        return this;
     }
     /**
-     * Get the modal body element (only available after render)
-     * @returns The modal body element or null if not rendered
+     * Get the modal content element ID for rendering child components
      */
-    getBodyElement() {
-        return document.getElementById(this.bodyId());
+    contentId() {
+        return `${this._id}-content`;
+    }
+    /**
+     * Get the modal content element (only available after render)
+     */
+    getContentElement() {
+        return document.getElementById(this.contentId());
     }
     /* ═════════════════════════════════════════════════════════════════
      * RENDER
      * ═════════════════════════════════════════════════════════════════ */
     render(targetId) {
         const container = this._setupContainer(targetId);
-        const { open, title, content, size, closeOnBackdropClick: closeOnBackdrop, showCloseButton: showClose, style, class: className } = this.state;
+        const { open, title, content, icon, size, close, backdropClose, actions, style, class: className } = this.state;
         const hasOpenSync = this._syncBindings.some(b => b.property === 'open');
         const overlay = document.createElement('div');
         overlay.className = 'jux-modal-overlay';
@@ -124,42 +276,96 @@ export class Modal extends BaseComponent {
         this._overlay = overlay;
         const modal = document.createElement('div');
         modal.className = `jux-modal jux-modal-${size}`;
-        if (showClose) {
+        if (close) {
             const closeButton = document.createElement('button');
             closeButton.className = 'jux-modal-close';
             closeButton.innerHTML = '×';
+            closeButton.type = 'button';
             modal.appendChild(closeButton);
         }
-        if (title) {
+        if (title || icon) {
             const header = document.createElement('div');
             header.className = 'jux-modal-header';
-            header.textContent = title;
+            if (icon) {
+                const iconEl = document.createElement('span');
+                iconEl.className = 'jux-modal-header-icon';
+                iconEl.appendChild(renderIcon(icon.icon, icon.collection));
+                header.appendChild(iconEl);
+            }
+            if (title) {
+                const titleEl = document.createElement('span');
+                titleEl.className = 'jux-modal-header-title';
+                titleEl.textContent = title;
+                header.appendChild(titleEl);
+            }
             modal.appendChild(header);
         }
-        const body = document.createElement('div');
-        body.className = 'jux-modal-body';
-        body.id = this.bodyId(); // Set predictable ID for child component rendering
-        body.innerHTML = content;
-        modal.appendChild(body);
+        const contentElement = document.createElement('div');
+        contentElement.className = 'jux-modal-content';
+        contentElement.id = this.contentId();
+        modal.appendChild(contentElement);
+        // Render initial content
+        if (content) {
+            const items = Array.isArray(content) ? content : [content];
+            items.forEach(item => {
+                if (typeof item === 'string') {
+                    const tempDiv = document.createElement('div');
+                    tempDiv.innerHTML = item;
+                    while (tempDiv.firstChild) {
+                        contentElement.appendChild(tempDiv.firstChild);
+                    }
+                }
+                else if (item instanceof BaseComponent) {
+                    item.render(contentElement);
+                }
+            });
+        }
+        if (actions.length > 0) {
+            const footer = document.createElement('div');
+            footer.className = 'jux-modal-footer';
+            actions.forEach(action => {
+                // Check if it's an array of BaseComponents
+                if (Array.isArray(action)) {
+                    action.forEach(component => {
+                        if (component instanceof BaseComponent) {
+                            component.render(footer);
+                        }
+                    });
+                }
+                // Otherwise it's an action object with label property
+                else if ('label' in action) {
+                    const btn = document.createElement('button');
+                    btn.className = `jux-modal-action jux-modal-action-${action.variant || 'default'}`;
+                    btn.textContent = action.label;
+                    btn.type = 'button';
+                    btn.addEventListener('click', () => {
+                        if (action.click)
+                            action.click();
+                    });
+                    footer.appendChild(btn);
+                }
+            });
+            modal.appendChild(footer);
+        }
         overlay.appendChild(modal);
+        // Default dismiss behavior (only if NOT using sync)
         if (!hasOpenSync) {
-            if (showClose) {
+            if (close) {
                 const closeButton = modal.querySelector('.jux-modal-close');
                 closeButton?.addEventListener('click', () => {
                     this.state.open = false;
-                    overlay.style.display = 'none';
                 });
             }
-            if (closeOnBackdrop) {
+            if (backdropClose) {
                 overlay.addEventListener('click', (e) => {
                     if (e.target === overlay) {
                         this.state.open = false;
-                        overlay.style.display = 'none';
                     }
                 });
             }
         }
         this._wireStandardEvents(overlay);
+        // Wire sync bindings
         this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
             if (property === 'open') {
                 const transformToState = toState || ((v) => Boolean(v));
@@ -170,28 +376,25 @@ export class Modal extends BaseComponent {
                         return;
                     const transformed = transformToComponent(val);
                     this.state.open = transformed;
-                    overlay.style.display = transformed ? 'flex' : 'none';
                 });
-                if (showClose) {
+                if (close) {
                     const closeButton = modal.querySelector('.jux-modal-close');
                     closeButton?.addEventListener('click', () => {
                         if (isUpdating)
                             return;
                         isUpdating = true;
                         this.state.open = false;
-                        overlay.style.display = 'none';
                         stateObj.set(transformToState(false));
                         setTimeout(() => { isUpdating = false; }, 0);
                     });
                 }
-                if (closeOnBackdrop) {
+                if (backdropClose) {
                     overlay.addEventListener('click', (e) => {
                         if (e.target === overlay) {
                             if (isUpdating)
                                 return;
                             isUpdating = true;
                             this.state.open = false;
-                            overlay.style.display = 'none';
                             stateObj.set(transformToState(false));
                             setTimeout(() => { isUpdating = false; }, 0);
                         }
@@ -202,7 +405,6 @@ export class Modal extends BaseComponent {
                 const transform = toComponent || ((v) => String(v));
                 stateObj.subscribe((val) => {
                     const transformed = transform(val);
-                    body.innerHTML = transformed;
                     this.state.content = transformed;
                 });
             }
@@ -210,20 +412,18 @@ export class Modal extends BaseComponent {
                 const transform = toComponent || ((v) => String(v));
                 stateObj.subscribe((val) => {
                     const transformed = transform(val);
-                    const header = modal.querySelector('.jux-modal-header');
-                    if (header) {
-                        header.textContent = transformed;
-                    }
                     this.state.title = transformed;
                 });
             }
         });
         container.appendChild(overlay);
+        requestAnimationFrame(() => {
+            if (window.Iconify) {
+                window.Iconify.scan();
+            }
+        });
         return this;
     }
-    update(prop, value) {
-        // No reactive updates needed
-    }
 }
 export function modal(id, options = {}) {
     return new Modal(id, options);

package/lib/components/modal.ts

@@ -1,26 +1,38 @@
 import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
 
 // Event definitions
 const TRIGGER_EVENTS = [] as const;
 const CALLBACK_EVENTS = ['open', 'close'] as const;
 
+export type EmojiIconType = {
+  // Can be an emoji character or an icon name from a collection
+  icon: string;
+  collection?: 'lucide' | 'heroicons' | 'material-symbols' | 'material' | 'icon-park' | string;
+}
 export interface ModalOptions {
   title?: string;
-  content?: string;
-  showCloseButton?: boolean;
-  closeOnBackdropClick?: boolean;
+  content?: string | BaseComponent<any> | Array<string | BaseComponent<any>>;
+  icon?: EmojiIconType | undefined;
+  close?: boolean;
+  backdropClose?: boolean;
+  position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover';
   size?: 'small' | 'medium' | 'large';
+  actions?: Array<{ label: string; variant?: string; click?: () => void } | Array<BaseComponent<any>>>;
   style?: string;
   class?: string;
 }
 
 type ModalState = {
   title: string;
-  content: string;
-  showCloseButton: boolean;
-  closeOnBackdropClick: boolean;
+  content: string | BaseComponent<any> | Array<string | BaseComponent<any>>;
+  icon: EmojiIconType | undefined;
+  close: boolean;
+  backdropClose: boolean;
+  position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover';
   size: string;
   open: boolean;
+  actions: Array<{ label: string; variant?: string; click?: () => void } | Array<BaseComponent<any>>>;
   style: string;
   class: string;
 };
@@ -32,10 +44,13 @@ export class Modal extends BaseComponent<ModalState> {
     super(id, {
       title: options.title ?? '',
       content: options.content ?? '',
-      showCloseButton: options.showCloseButton ?? true,
-      closeOnBackdropClick: options.closeOnBackdropClick ?? true,
+      icon: options.icon ?? undefined,
+      close: options.close ?? true,
+      backdropClose: options.backdropClose ?? true,
+      position: options.position,
       size: options.size ?? 'medium',
       open: false,
+      actions: options.actions ?? [],
       style: options.style ?? '',
       class: options.class ?? ''
     });
@@ -50,98 +65,275 @@ export class Modal extends BaseComponent<ModalState> {
   }
 
   /* ═════════════════════════════════════════════════════════════════
-   * FLUENT API
+   * REACTIVE UPDATE (Precision DOM edits)
    * ═════════════════════════════════════════════════════════════════ */
 
-  // ✅ Inherited from BaseComponent:
-  // - style(), class()
-  // - bind(), sync(), renderTo()
-  // - addClass(), removeClass(), toggleClass()
-  // - visible(), show(), hide()
-  // - attr(), attrs(), removeAttr()
+  update(prop: string, value: any): void {
+    super.update(prop, value);
 
-  title(value: string): this {
-    this.state.title = value;
-    if (this._overlay) {
-      const modal = this._overlay.querySelector('.jux-modal');
-      const header = modal?.querySelector('.jux-modal-header');
-      if (header) {
-        header.textContent = value;
+    if (!this._overlay) return;
+
+    const modal = this._overlay.querySelector('.jux-modal');
+    if (!modal) return;
+
+    switch (prop) {
+      case 'open':
+        this._overlay.style.display = value ? 'flex' : 'none';
+        if (value) {
+          this._triggerCallback('open');
+        } else {
+          this._triggerCallback('close');
+        }
+        break;
+
+      case 'title':
+        this._updateTitle(value);
+        break;
+
+      case 'content':
+        this._updateContent(value);
+        break;
+
+      case 'icon':
+        this._updateIcon(value);
+        break;
+
+      case 'size':
+        modal.className = modal.className.replace(/jux-modal-(small|medium|large)/, `jux-modal-${value}`);
+        break;
+
+      case 'actions':
+        this._rebuildActions();
+        break;
+    }
+  }
+
+  private _updateTitle(value: string): void {
+    let headerEl = this._overlay!.querySelector('.jux-modal-header');
+
+    if (!headerEl && value) {
+      // Create header if it doesn't exist
+      headerEl = document.createElement('div');
+      headerEl.className = 'jux-modal-header';
+
+      const modal = this._overlay!.querySelector('.jux-modal');
+      const body = modal!.querySelector('.jux-modal-body');
+      modal!.insertBefore(headerEl, body);
+    }
+
+    if (headerEl) {
+      // Preserve icon if exists
+      const iconEl = headerEl.querySelector('.jux-modal-header-icon');
+      headerEl.innerHTML = '';
+
+      if (iconEl) {
+        headerEl.appendChild(iconEl);
       }
+
+      const titleEl = document.createElement('span');
+      titleEl.className = 'jux-modal-header-title';
+      titleEl.textContent = value;
+      headerEl.appendChild(titleEl);
     }
-    return this;
   }
 
-  content(value: string): this {
-    this.state.content = value;
-    if (this._overlay) {
-      const body = this._overlay.querySelector('.jux-modal-body');
-      if (body) {
-        body.innerHTML = value;
+  private _updateIcon(value?: EmojiIconType): void {
+    const headerEl = this._overlay!.querySelector('.jux-modal-header');
+    if (!headerEl) return;
+
+    let iconEl = headerEl.querySelector('.jux-modal-header-icon');
+
+    if (value) {
+      if (!iconEl) {
+        iconEl = document.createElement('span');
+        iconEl.className = 'jux-modal-header-icon';
+        headerEl.insertBefore(iconEl, headerEl.firstChild);
+      }
+      iconEl.innerHTML = '';
+      iconEl.appendChild(renderIcon(value.icon, value.collection));
+    } else if (iconEl) {
+      iconEl.remove();
+    }
+  }
+
+  private _updateContent(value: string | BaseComponent<any> | Array<string | BaseComponent<any>>): void {
+    const contentEl = this._overlay!.querySelector('.jux-modal-content') as HTMLElement;
+    if (!contentEl) return;
+
+    contentEl.innerHTML = '';
+
+    const items = Array.isArray(value) ? value : [value];
+
+    items.forEach(item => {
+      if (typeof item === 'string') {
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = item;
+        while (tempDiv.firstChild) {
+          contentEl.appendChild(tempDiv.firstChild);
+        }
+      } else if (item instanceof BaseComponent) {
+        item.render(contentEl);
       }
+    });
+  }
+
+  private _rebuildActions(): void {
+    const modal = this._overlay!.querySelector('.jux-modal');
+    if (!modal) return;
+
+    let footerEl = modal.querySelector('.jux-modal-footer') as HTMLElement | null;
+
+    if (this.state.actions.length === 0) {
+      if (footerEl) footerEl.remove();
+      return;
     }
+
+    if (!footerEl) {
+      footerEl = document.createElement('div');
+      footerEl.className = 'jux-modal-footer';
+      modal.appendChild(footerEl);
+    }
+
+    footerEl.innerHTML = '';
+
+    this.state.actions.forEach(action => {
+      // Check if it's an array of BaseComponents
+      if (Array.isArray(action)) {
+        action.forEach(component => {
+          if (component instanceof BaseComponent) {
+            component.render(footerEl!);
+          }
+        });
+      }
+      // Otherwise it's an action object with label property
+      else if ('label' in action) {
+        const btn = document.createElement('button');
+        btn.className = `jux-modal-action jux-modal-action-${action.variant || 'default'}`;
+        btn.textContent = action.label;
+        btn.type = 'button';
+
+        btn.addEventListener('click', () => {
+          if (action.click) action.click();
+        });
+
+        footerEl!.appendChild(btn);
+      }
+    });
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API (Just set state, update() handles DOM)
+   * ═════════════════════════════════════════════════════════════════ */
+
+  title(value: string): this {
+    this.state.title = value;
     return this;
   }
 
-  showCloseButton(value: boolean): this {
-    this.state.showCloseButton = value;
+  content(value: string | BaseComponent<any> | Array<string | BaseComponent<any>>): this {
+    this.state.content = value;
     return this;
   }
 
-  closeOnBackdropClick(value: boolean): this {
-    this.state.closeOnBackdropClick = value;
+  icon(value: EmojiIconType): this {
+    this.state.icon = value;
+    return this;
+  }
+
+  close(value: boolean): this {
+    this.state.close = value;
+    return this;
+  }
+
+  backdropClose(value: boolean): this {
+    this.state.backdropClose = value;
     return this;
   }
 
   size(value: 'small' | 'medium' | 'large'): this {
     this.state.size = value;
-    if (this._overlay) {
-      const modal = this._overlay.querySelector('.jux-modal');
-      if (modal) {
-        modal.className = modal.className.replace(/jux-modal-(small|medium|large)/, `jux-modal-${value}`);
-      }
-    }
+    return this;
+  }
+
+  actions(value: Array<{ label: string; variant?: string; click?: () => void }>): this {
+    this.state.actions = value;
+    return this;
+  }
+
+  addAction(action: { label: string; variant?: string; click?: () => void }): this {
+    this.state.actions = [...this.state.actions, action];
     return this;
   }
 
   open(): this {
     this.state.open = true;
-    if (this._overlay) {
-      this._overlay.style.display = 'flex';
-    }
-    // 🎯 Fire the open callback event
-    this._triggerCallback('open');
     return this;
   }
 
-  close(): this {
+  closeModal(): this {
     this.state.open = false;
-    if (this._overlay) {
-      this._overlay.style.display = 'none';
+    return this;
+  }
+
+  toggle(): this {
+    this.state.open = !this.state.open;
+    return this;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * DYNAMIC CONTENT ADDITION (Like tabs.addTabContent)
+   * ═════════════════════════════════════════════════════════════════ */
+
+  /**
+   * Add content to modal (supports strings and BaseComponents)
+   */
+  addContent(content: string | BaseComponent<any> | Array<string | BaseComponent<any>>): this {
+    const contentEl = this._overlay?.querySelector('.jux-modal-content') as HTMLElement;
+    if (!contentEl) {
+      console.warn('[Modal] Content element not found');
+      return this;
     }
-    // 🎯 Fire the close callback event
-    this._triggerCallback('close');
+
+    const items = Array.isArray(content) ? content : [content];
+
+    items.forEach(item => {
+      if (typeof item === 'string') {
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = item;
+        while (tempDiv.firstChild) {
+          contentEl.appendChild(tempDiv.firstChild);
+        }
+      } else if (item instanceof BaseComponent) {
+        item.render(contentEl);
+      }
+    });
+
     return this;
   }
 
   /**
-   * Get the modal body element ID for rendering child components
-   * @returns The ID of the modal body element (e.g., 'mymodal-body')
-   * 
-   * Usage:
-   *   const modal = jux.modal('files-modal', { title: 'Files' }).render('body').open();
-   *   jux.table('files-table', {...}).render(modal.bodyId());
+   * Clear all content from modal
    */
-  bodyId(): string {
-    return `${this._id}-body`;
+  clearContent(): this {
+    const contentEl = this._overlay?.querySelector('.jux-modal-content');
+    if (contentEl) {
+      contentEl.innerHTML = '';
+    }
+    return this;
   }
 
   /**
-   * Get the modal body element (only available after render)
-   * @returns The modal body element or null if not rendered
+   * Get the modal content element ID for rendering child components
    */
-  getBodyElement(): HTMLElement | null {
-    return document.getElementById(this.bodyId());
+  contentId(): string {
+    return `${this._id}-content`;
+  }
+
+  /**
+   * Get the modal content element (only available after render)
+   */
+  getContentElement(): HTMLElement | null {
+    return document.getElementById(this.contentId());
   }
 
   /* ═════════════════════════════════════════════════════════════════
@@ -151,7 +343,7 @@ export class Modal extends BaseComponent<ModalState> {
   render(targetId?: string | HTMLElement | BaseComponent<any>): this {
     const container = this._setupContainer(targetId);
 
-    const { open, title, content, size, closeOnBackdropClick: closeOnBackdrop, showCloseButton: showClose, style, class: className } = this.state;
+    const { open, title, content, icon, size, close, backdropClose, actions, style, class: className } = this.state;
     const hasOpenSync = this._syncBindings.some(b => b.property === 'open');
 
     const overlay = document.createElement('div');
@@ -165,42 +357,102 @@ export class Modal extends BaseComponent<ModalState> {
     const modal = document.createElement('div');
     modal.className = `jux-modal jux-modal-${size}`;
 
-    if (showClose) {
+    if (close) {
       const closeButton = document.createElement('button');
       closeButton.className = 'jux-modal-close';
       closeButton.innerHTML = '×';
+      closeButton.type = 'button';
       modal.appendChild(closeButton);
     }
 
-    if (title) {
+    if (title || icon) {
       const header = document.createElement('div');
       header.className = 'jux-modal-header';
-      header.textContent = title;
+
+      if (icon) {
+        const iconEl = document.createElement('span');
+        iconEl.className = 'jux-modal-header-icon';
+        iconEl.appendChild(renderIcon(icon.icon, icon.collection));
+        header.appendChild(iconEl);
+      }
+
+      if (title) {
+        const titleEl = document.createElement('span');
+        titleEl.className = 'jux-modal-header-title';
+        titleEl.textContent = title;
+        header.appendChild(titleEl);
+      }
+
       modal.appendChild(header);
     }
 
-    const body = document.createElement('div');
-    body.className = 'jux-modal-body';
-    body.id = this.bodyId(); // Set predictable ID for child component rendering
-    body.innerHTML = content;
-    modal.appendChild(body);
+    const contentElement = document.createElement('div');
+    contentElement.className = 'jux-modal-content';
+    contentElement.id = this.contentId();
+    modal.appendChild(contentElement);
+
+    // Render initial content
+    if (content) {
+      const items = Array.isArray(content) ? content : [content];
+      items.forEach(item => {
+        if (typeof item === 'string') {
+          const tempDiv = document.createElement('div');
+          tempDiv.innerHTML = item;
+          while (tempDiv.firstChild) {
+            contentElement.appendChild(tempDiv.firstChild);
+          }
+        } else if (item instanceof BaseComponent) {
+          item.render(contentElement);
+        }
+      });
+    }
+
+    if (actions.length > 0) {
+      const footer = document.createElement('div');
+      footer.className = 'jux-modal-footer';
+
+      actions.forEach(action => {
+        // Check if it's an array of BaseComponents
+        if (Array.isArray(action)) {
+          action.forEach(component => {
+            if (component instanceof BaseComponent) {
+              component.render(footer);
+            }
+          });
+        }
+        // Otherwise it's an action object with label property
+        else if ('label' in action) {
+          const btn = document.createElement('button');
+          btn.className = `jux-modal-action jux-modal-action-${action.variant || 'default'}`;
+          btn.textContent = action.label;
+          btn.type = 'button';
+
+          btn.addEventListener('click', () => {
+            if (action.click) action.click();
+          });
+
+          footer.appendChild(btn);
+        }
+      });
+
+      modal.appendChild(footer);
+    }
 
     overlay.appendChild(modal);
 
+    // Default dismiss behavior (only if NOT using sync)
     if (!hasOpenSync) {
-      if (showClose) {
+      if (close) {
         const closeButton = modal.querySelector('.jux-modal-close');
         closeButton?.addEventListener('click', () => {
           this.state.open = false;
-          overlay.style.display = 'none';
         });
       }
 
-      if (closeOnBackdrop) {
+      if (backdropClose) {
         overlay.addEventListener('click', (e) => {
           if (e.target === overlay) {
             this.state.open = false;
-            overlay.style.display = 'none';
           }
         });
       }
@@ -208,6 +460,7 @@ export class Modal extends BaseComponent<ModalState> {
 
     this._wireStandardEvents(overlay);
 
+    // Wire sync bindings
     this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
       if (property === 'open') {
         const transformToState = toState || ((v: any) => Boolean(v));
@@ -219,31 +472,28 @@ export class Modal extends BaseComponent<ModalState> {
           if (isUpdating) return;
           const transformed = transformToComponent(val);
           this.state.open = transformed;
-          overlay.style.display = transformed ? 'flex' : 'none';
         });
 
-        if (showClose) {
+        if (close) {
           const closeButton = modal.querySelector('.jux-modal-close');
           closeButton?.addEventListener('click', () => {
             if (isUpdating) return;
             isUpdating = true;
 
             this.state.open = false;
-            overlay.style.display = 'none';
             stateObj.set(transformToState(false));
 
             setTimeout(() => { isUpdating = false; }, 0);
           });
         }
 
-        if (closeOnBackdrop) {
+        if (backdropClose) {
           overlay.addEventListener('click', (e) => {
             if (e.target === overlay) {
               if (isUpdating) return;
               isUpdating = true;
 
               this.state.open = false;
-              overlay.style.display = 'none';
               stateObj.set(transformToState(false));
 
               setTimeout(() => { isUpdating = false; }, 0);
@@ -256,7 +506,6 @@ export class Modal extends BaseComponent<ModalState> {
 
         stateObj.subscribe((val: any) => {
           const transformed = transform(val);
-          body.innerHTML = transformed;
           this.state.content = transformed;
         });
       }
@@ -265,21 +514,20 @@ export class Modal extends BaseComponent<ModalState> {
 
         stateObj.subscribe((val: any) => {
           const transformed = transform(val);
-          const header = modal.querySelector('.jux-modal-header');
-          if (header) {
-            header.textContent = transformed;
-          }
           this.state.title = transformed;
         });
       }
     });
 
     container.appendChild(overlay);
-    return this;
-  }
 
-  update(prop: string, value: any): void {
-    // No reactive updates needed
+    requestAnimationFrame(() => {
+      if ((window as any).Iconify) {
+        (window as any).Iconify.scan();
+      }
+    });
+
+    return this;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.60",
+  "version": "1.1.62",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",