juxscript 1.1.239 → 1.1.243

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

@@ -1 +0,0 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["sidebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAQnE,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,YAAY,GAAG,SAAS,GAAG;IAC9B,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBAAa,OAAQ,SAAQ,aAAa,CAAC,YAAY,CAAC;IACtD,OAAO,CAAC,QAAQ,CAA4B;gBAEhC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB;IA4BpD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,WAAW;IA+FnB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAsCtC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQ1B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAKvC,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKjC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKhC,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKnC,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK/B,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI;IAKjC,OAAO,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAKhC,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK3B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK3B,MAAM,IAAI,IAAI;IAKd,mBAAmB,IAAI,IAAI;IAU3B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA2FnE;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB,GAAG,OAAO,CAEzE"}

package/lib/components/sidebar.js

@@ -1,298 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { renderIcon } from './icons.js';
-import { req } from './req.js';
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = ['toggle', 'itemClick'];
-export class Sidebar extends BaseComponent {
-    constructor(id, options = {}) {
-        // Restore collapsed state from localStorage if available
-        const storageKey = `jux-sidebar-${id}-collapsed`;
-        const savedCollapsed = localStorage.getItem(storageKey);
-        const initialCollapsed = savedCollapsed !== null ? savedCollapsed === 'true' : (options.collapsed ?? false);
-        super(id, {
-            position: options.position ?? 'left',
-            width: options.width ?? '',
-            collapsible: options.collapsible ?? true,
-            showToggle: options.showToggle ?? false,
-            expandOnHover: options.expandOnHover ?? false,
-            collapsed: initialCollapsed,
-            items: options.items ?? [],
-            header: options.header ?? '',
-            footer: options.footer ?? '',
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
-        this._sidebar = null;
-        this._setActiveStates();
-        // Listen for URL changes to update active states
-        if (typeof window !== 'undefined') {
-            window.addEventListener('popstate', () => this.refreshActiveStates());
-        }
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * PRIVATE HELPERS
-     * ═════════════════════════════════════════════════════════════════ */
-    _setActiveStates() {
-        this.state.items = this.state.items.map(item => ({
-            ...item,
-            active: item.href ? req.isActiveNavItem(item.href) : false,
-            items: item.items?.map(subItem => ({
-                ...subItem,
-                active: subItem.href ? req.isActiveNavItem(subItem.href) : false
-            }))
-        }));
-    }
-    _renderItem(item) {
-        const itemEl = document.createElement('div');
-        itemEl.className = 'jux-sidebar-item';
-        if (item.itemClass) {
-            itemEl.className += ` ${item.itemClass}`;
-        }
-        if (item.active) {
-            itemEl.classList.add('jux-sidebar-item-active');
-        }
-        if (item.href) {
-            const link = document.createElement('a');
-            link.className = 'jux-sidebar-link';
-            link.href = item.href;
-            if (item.active) {
-                link.classList.add('jux-sidebar-link-active');
-            }
-            if (item.icon) {
-                const icon = document.createElement('span');
-                icon.className = 'jux-sidebar-icon';
-                icon.appendChild(renderIcon(item.icon));
-                link.appendChild(icon);
-            }
-            const label = document.createElement('span');
-            label.className = 'jux-sidebar-label';
-            label.textContent = item.label;
-            link.appendChild(label);
-            link.addEventListener('click', (e) => {
-                this._triggerCallback('itemClick', { item, event: e });
-            });
-            itemEl.appendChild(link);
-        }
-        else {
-            const button = document.createElement('button');
-            button.className = 'jux-sidebar-button';
-            button.type = 'button';
-            if (item.icon) {
-                const icon = document.createElement('span');
-                icon.className = 'jux-sidebar-icon';
-                icon.appendChild(renderIcon(item.icon));
-                button.appendChild(icon);
-            }
-            const label = document.createElement('span');
-            label.className = 'jux-sidebar-label';
-            label.textContent = item.label;
-            button.appendChild(label);
-            button.addEventListener('click', (e) => {
-                if (item.click) {
-                    item.click();
-                }
-                this._triggerCallback('itemClick', { item, event: e });
-            });
-            itemEl.appendChild(button);
-        }
-        if (item.items && item.items.length > 0) {
-            itemEl.classList.add('jux-sidebar-item-has-submenu');
-            const submenu = document.createElement('div');
-            submenu.className = 'jux-sidebar-submenu';
-            item.items.forEach(subItem => {
-                submenu.appendChild(this._renderItem(subItem));
-            });
-            itemEl.appendChild(submenu);
-            const clickTarget = itemEl.querySelector('a, button');
-            if (clickTarget) {
-                clickTarget.addEventListener('click', (e) => {
-                    if (!item.href) {
-                        e.preventDefault();
-                    }
-                    itemEl.classList.toggle('jux-sidebar-item-expanded');
-                });
-            }
-        }
-        return itemEl;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * REACTIVE UPDATE
-     * ═════════════════════════════════════════════════════════════════ */
-    update(prop, value) {
-        if (!this._sidebar)
-            return;
-        if (prop === 'collapsed') {
-            this._sidebar.classList.toggle('jux-sidebar-collapsed', value);
-            // Update toggle button state
-            const toggleBtn = this._sidebar.querySelector('.jux-sidebar-toggle');
-            if (toggleBtn) {
-                toggleBtn.classList.toggle('jux-sidebar-toggle-collapsed', value);
-            }
-            // Save to localStorage
-            const storageKey = `jux-sidebar-${this._id}-collapsed`;
-            localStorage.setItem(storageKey, String(value));
-        }
-        else if (prop === 'items') {
-            this._setActiveStates();
-            const nav = this._sidebar.querySelector('.jux-sidebar-nav');
-            if (nav) {
-                nav.innerHTML = '';
-                this.state.items.forEach(item => {
-                    nav.appendChild(this._renderItem(item));
-                });
-            }
-        }
-        else if (prop === 'header') {
-            const header = this._sidebar.querySelector('.jux-sidebar-header');
-            if (header)
-                header.textContent = value;
-        }
-        else if (prop === 'footer') {
-            const footer = this._sidebar.querySelector('.jux-sidebar-footer');
-            if (footer)
-                footer.textContent = value;
-        }
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    width(value) {
-        this.state.width = value;
-        if (this._sidebar) {
-            this._sidebar.style.width = value;
-        }
-        return this;
-    }
-    position(value) {
-        this.state.position = value;
-        return this;
-    }
-    collapsible(value) {
-        this.state.collapsible = value;
-        return this;
-    }
-    showToggle(value) {
-        this.state.showToggle = value;
-        return this;
-    }
-    expandOnHover(value) {
-        this.state.expandOnHover = value;
-        return this;
-    }
-    collapsed(value) {
-        this.state.collapsed = value;
-        return this;
-    }
-    items(value) {
-        this.state.items = value;
-        return this;
-    }
-    addItem(item) {
-        this.state.items = [...this.state.items, item];
-        return this;
-    }
-    header(value) {
-        this.state.header = value;
-        return this;
-    }
-    footer(value) {
-        this.state.footer = value;
-        return this;
-    }
-    toggle() {
-        this.state.collapsed = !this.state.collapsed;
-        this._triggerCallback('toggle', this.state.collapsed);
-    }
-    refreshActiveStates() {
-        this._setActiveStates();
-        this.state.items = [...this.state.items]; // Trigger update
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { position, collapsed, expandOnHover, items, header, footer, width, style, class: className } = this.state;
-        const sidebar = document.createElement('aside');
-        sidebar.className = `jux-sidebar jux-sidebar-${position}`;
-        sidebar.id = this._id;
-        if (collapsed) {
-            sidebar.classList.add('jux-sidebar-collapsed');
-        }
-        if (className)
-            sidebar.className += ` ${className}`;
-        if (style)
-            sidebar.setAttribute('style', style);
-        if (width)
-            sidebar.style.width = width;
-        if (header) {
-            const headerEl = document.createElement('div');
-            headerEl.className = 'jux-sidebar-header';
-            headerEl.textContent = header;
-            sidebar.appendChild(headerEl);
-        }
-        const nav = document.createElement('nav');
-        nav.className = 'jux-sidebar-nav';
-        items.forEach(item => {
-            nav.appendChild(this._renderItem(item));
-        });
-        sidebar.appendChild(nav);
-        if (footer) {
-            const footerEl = document.createElement('div');
-            footerEl.className = 'jux-sidebar-footer';
-            footerEl.textContent = footer;
-            sidebar.appendChild(footerEl);
-        }
-        if (this.state.collapsible || this.state.showToggle) {
-            const toggleBtn = document.createElement('button');
-            toggleBtn.className = 'jux-sidebar-toggle';
-            toggleBtn.type = 'button';
-            toggleBtn.setAttribute('aria-label', 'Toggle sidebar');
-            const toggleIcon = document.createElement('span');
-            toggleIcon.className = 'jux-sidebar-toggle-icon';
-            const chevronIcon = renderIcon(position === 'left' ? '➡️' : '⬅️');
-            toggleIcon.appendChild(chevronIcon);
-            toggleBtn.appendChild(toggleIcon);
-            if (collapsed) {
-                toggleBtn.classList.add('jux-sidebar-toggle-collapsed');
-            }
-            toggleBtn.addEventListener('click', () => {
-                this.toggle();
-            });
-            sidebar.appendChild(toggleBtn);
-        }
-        if (expandOnHover) {
-            sidebar.addEventListener('mouseenter', () => {
-                if (this.state.collapsed) {
-                    sidebar.classList.add('jux-sidebar-hover-expanded');
-                }
-            });
-            sidebar.addEventListener('mouseleave', () => {
-                if (this.state.collapsed) {
-                    sidebar.classList.remove('jux-sidebar-hover-expanded');
-                }
-            });
-        }
-        this._wireStandardEvents(sidebar);
-        this._wireAllSyncs();
-        container.appendChild(sidebar);
-        this._sidebar = sidebar;
-        requestAnimationFrame(() => {
-            if (window.Iconify) {
-                window.Iconify.scan();
-            }
-        });
-        return this;
-    }
-}
-export function sidebar(id, options = {}) {
-    return new Sidebar(id, options);
-}

package/lib/components/sidebar.ts

@@ -1,395 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-import { renderIcon } from './icons.js';
-import { req } from './req.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['toggle', 'itemClick'] as const;
-
-export interface SidebarItem {
-  label: string;
-  href?: string;
-  click?: () => void;
-  icon?: string;
-  items?: SidebarItem[];
-  active?: boolean;
-  itemClass?: string;
-}
-
-export interface SidebarOptions {
-  position?: 'left' | 'right';
-  width?: string;
-  collapsible?: boolean;
-  showToggle?: boolean;
-  expandOnHover?: boolean;
-  collapsed?: boolean;
-  items?: SidebarItem[];
-  header?: string;
-  footer?: string;
-  style?: string;
-  class?: string;
-}
-
-type SidebarState = BaseState & {
-  position: 'left' | 'right';
-  width: string;
-  collapsible: boolean;
-  showToggle: boolean;
-  expandOnHover: boolean;
-  collapsed: boolean;
-  items: SidebarItem[];
-  header: string;
-  footer: string;
-};
-
-export class Sidebar extends BaseComponent<SidebarState> {
-  private _sidebar: HTMLElement | null = null;
-
-  constructor(id: string, options: SidebarOptions = {}) {
-    // Restore collapsed state from localStorage if available
-    const storageKey = `jux-sidebar-${id}-collapsed`;
-    const savedCollapsed = localStorage.getItem(storageKey);
-    const initialCollapsed = savedCollapsed !== null ? savedCollapsed === 'true' : (options.collapsed ?? false);
-
-    super(id, {
-      position: options.position ?? 'left',
-      width: options.width ?? '',
-      collapsible: options.collapsible ?? true,
-      showToggle: options.showToggle ?? false,
-      expandOnHover: options.expandOnHover ?? false,
-      collapsed: initialCollapsed,
-      items: options.items ?? [],
-      header: options.header ?? '',
-      footer: options.footer ?? '',
-      style: options.style ?? '',
-      class: options.class ?? ''
-    });
-
-    this._setActiveStates();
-
-    // Listen for URL changes to update active states
-    if (typeof window !== 'undefined') {
-      window.addEventListener('popstate', () => this.refreshActiveStates());
-    }
-  }
-
-  protected getTriggerEvents(): readonly string[] {
-    return TRIGGER_EVENTS;
-  }
-
-  protected getCallbackEvents(): readonly string[] {
-    return CALLBACK_EVENTS;
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * PRIVATE HELPERS
-   * ═════════════════════════════════════════════════════════════════ */
-
-  private _setActiveStates(): void {
-    this.state.items = this.state.items.map(item => ({
-      ...item,
-      active: item.href ? req.isActiveNavItem(item.href) : false,
-      items: item.items?.map(subItem => ({
-        ...subItem,
-        active: subItem.href ? req.isActiveNavItem(subItem.href) : false
-      }))
-    }));
-  }
-
-  private _renderItem(item: SidebarItem): HTMLElement {
-    const itemEl = document.createElement('div');
-    itemEl.className = 'jux-sidebar-item';
-
-    if (item.itemClass) {
-      itemEl.className += ` ${item.itemClass}`;
-    }
-
-    if (item.active) {
-      itemEl.classList.add('jux-sidebar-item-active');
-    }
-
-    if (item.href) {
-      const link = document.createElement('a');
-      link.className = 'jux-sidebar-link';
-      link.href = item.href;
-
-      if (item.active) {
-        link.classList.add('jux-sidebar-link-active');
-      }
-
-      if (item.icon) {
-        const icon = document.createElement('span');
-        icon.className = 'jux-sidebar-icon';
-        icon.appendChild(renderIcon(item.icon));
-        link.appendChild(icon);
-      }
-
-      const label = document.createElement('span');
-      label.className = 'jux-sidebar-label';
-      label.textContent = item.label;
-      link.appendChild(label);
-
-      link.addEventListener('click', (e) => {
-        this._triggerCallback('itemClick', { item, event: e });
-      });
-
-      itemEl.appendChild(link);
-    } else {
-      const button = document.createElement('button');
-      button.className = 'jux-sidebar-button';
-      button.type = 'button';
-
-      if (item.icon) {
-        const icon = document.createElement('span');
-        icon.className = 'jux-sidebar-icon';
-        icon.appendChild(renderIcon(item.icon));
-        button.appendChild(icon);
-      }
-
-      const label = document.createElement('span');
-      label.className = 'jux-sidebar-label';
-      label.textContent = item.label;
-      button.appendChild(label);
-
-      button.addEventListener('click', (e) => {
-        if (item.click) {
-          item.click();
-        }
-        this._triggerCallback('itemClick', { item, event: e });
-      });
-
-      itemEl.appendChild(button);
-    }
-
-    if (item.items && item.items.length > 0) {
-      itemEl.classList.add('jux-sidebar-item-has-submenu');
-
-      const submenu = document.createElement('div');
-      submenu.className = 'jux-sidebar-submenu';
-
-      item.items.forEach(subItem => {
-        submenu.appendChild(this._renderItem(subItem));
-      });
-
-      itemEl.appendChild(submenu);
-
-      const clickTarget = itemEl.querySelector('a, button');
-      if (clickTarget) {
-        clickTarget.addEventListener('click', (e) => {
-          if (!item.href) {
-            e.preventDefault();
-          }
-          itemEl.classList.toggle('jux-sidebar-item-expanded');
-        });
-      }
-    }
-
-    return itemEl;
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * REACTIVE UPDATE
-   * ═════════════════════════════════════════════════════════════════ */
-
-  update(prop: string, value: any): void {
-
-    if (!this._sidebar) return;
-
-    if (prop === 'collapsed') {
-      this._sidebar.classList.toggle('jux-sidebar-collapsed', value);
-
-      // Update toggle button state
-      const toggleBtn = this._sidebar.querySelector('.jux-sidebar-toggle');
-      if (toggleBtn) {
-        toggleBtn.classList.toggle('jux-sidebar-toggle-collapsed', value);
-      }
-
-      // Save to localStorage
-      const storageKey = `jux-sidebar-${this._id}-collapsed`;
-      localStorage.setItem(storageKey, String(value));
-    } else if (prop === 'items') {
-      this._setActiveStates();
-      const nav = this._sidebar.querySelector('.jux-sidebar-nav');
-      if (nav) {
-        nav.innerHTML = '';
-        this.state.items.forEach(item => {
-          nav.appendChild(this._renderItem(item));
-        });
-      }
-    } else if (prop === 'header') {
-      const header = this._sidebar.querySelector('.jux-sidebar-header');
-      if (header) header.textContent = value;
-    } else if (prop === 'footer') {
-      const footer = this._sidebar.querySelector('.jux-sidebar-footer');
-      if (footer) footer.textContent = value;
-    }
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * FLUENT API
-   * ═════════════════════════════════════════════════════════════════ */
-
-  width(value: string): this {
-    this.state.width = value;
-    if (this._sidebar) {
-      this._sidebar.style.width = value;
-    }
-    return this;
-  }
-
-  position(value: 'left' | 'right'): this {
-    this.state.position = value;
-    return this;
-  }
-
-  collapsible(value: boolean): this {
-    this.state.collapsible = value;
-    return this;
-  }
-
-  showToggle(value: boolean): this {
-    this.state.showToggle = value;
-    return this;
-  }
-
-  expandOnHover(value: boolean): this {
-    this.state.expandOnHover = value;
-    return this;
-  }
-
-  collapsed(value: boolean): this {
-    this.state.collapsed = value;
-    return this;
-  }
-
-  items(value: SidebarItem[]): this {
-    this.state.items = value;
-    return this;
-  }
-
-  addItem(item: SidebarItem): this {
-    this.state.items = [...this.state.items, item];
-    return this;
-  }
-
-  header(value: string): this {
-    this.state.header = value;
-    return this;
-  }
-
-  footer(value: string): this {
-    this.state.footer = value;
-    return this;
-  }
-
-  toggle(): void {
-    this.state.collapsed = !this.state.collapsed;
-    this._triggerCallback('toggle', this.state.collapsed);
-  }
-
-  refreshActiveStates(): this {
-    this._setActiveStates();
-    this.state.items = [...this.state.items]; // Trigger update
-    return this;
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * RENDER
-   * ═════════════════════════════════════════════════════════════════ */
-
-  render(targetId?: string | HTMLElement | BaseComponent<any>): this {
-    const container = this._setupContainer(targetId);
-
-    const { position, collapsed, expandOnHover, items, header, footer, width, style, class: className } = this.state;
-
-    const sidebar = document.createElement('aside');
-    sidebar.className = `jux-sidebar jux-sidebar-${position}`;
-    sidebar.id = this._id;
-
-    if (collapsed) {
-      sidebar.classList.add('jux-sidebar-collapsed');
-    }
-
-    if (className) sidebar.className += ` ${className}`;
-    if (style) sidebar.setAttribute('style', style);
-    if (width) sidebar.style.width = width;
-
-    if (header) {
-      const headerEl = document.createElement('div');
-      headerEl.className = 'jux-sidebar-header';
-      headerEl.textContent = header;
-      sidebar.appendChild(headerEl);
-    }
-
-    const nav = document.createElement('nav');
-    nav.className = 'jux-sidebar-nav';
-
-    items.forEach(item => {
-      nav.appendChild(this._renderItem(item));
-    });
-
-    sidebar.appendChild(nav);
-
-    if (footer) {
-      const footerEl = document.createElement('div');
-      footerEl.className = 'jux-sidebar-footer';
-      footerEl.textContent = footer;
-      sidebar.appendChild(footerEl);
-    }
-
-    if (this.state.collapsible || this.state.showToggle) {
-      const toggleBtn = document.createElement('button');
-      toggleBtn.className = 'jux-sidebar-toggle';
-      toggleBtn.type = 'button';
-      toggleBtn.setAttribute('aria-label', 'Toggle sidebar');
-
-      const toggleIcon = document.createElement('span');
-      toggleIcon.className = 'jux-sidebar-toggle-icon';
-      const chevronIcon = renderIcon(position === 'left' ? '➡️' : '⬅️');
-      toggleIcon.appendChild(chevronIcon);
-      toggleBtn.appendChild(toggleIcon);
-
-      if (collapsed) {
-        toggleBtn.classList.add('jux-sidebar-toggle-collapsed');
-      }
-
-      toggleBtn.addEventListener('click', () => {
-        this.toggle();
-      });
-
-      sidebar.appendChild(toggleBtn);
-    }
-
-    if (expandOnHover) {
-      sidebar.addEventListener('mouseenter', () => {
-        if (this.state.collapsed) {
-          sidebar.classList.add('jux-sidebar-hover-expanded');
-        }
-      });
-
-      sidebar.addEventListener('mouseleave', () => {
-        if (this.state.collapsed) {
-          sidebar.classList.remove('jux-sidebar-hover-expanded');
-        }
-      });
-    }
-
-    this._wireStandardEvents(sidebar);
-    this._wireAllSyncs();
-
-    container.appendChild(sidebar);
-    this._sidebar = sidebar;
-
-    requestAnimationFrame(() => {
-      if ((window as any).Iconify) {
-        (window as any).Iconify.scan();
-      }
-    });
-
-    return this;
-  }
-}
-
-export function sidebar(id: string, options: SidebarOptions = {}): Sidebar {
-  return new Sidebar(id, options);
-}