juxscript 1.1.14 → 1.1.15

package/lib/components/sidebar.ts

@@ -1,11 +1,20 @@
-import { BaseComponent } from './base/BaseComponent.js';
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
 import { renderIcon } from './icons.js';
-import { Menu, MenuOptions } from './menu.js';
-
+import { req } from './req.js';
 
 // Event definitions
 const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['toggle'] 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';
@@ -14,26 +23,27 @@ export interface SidebarOptions {
   showToggle?: boolean;
   expandOnHover?: boolean;
   collapsed?: boolean;
-  menu?: MenuOptions;
+  items?: SidebarItem[];
+  header?: string;
+  footer?: string;
   style?: string;
   class?: string;
 }
 
-type SidebarState = {
+type SidebarState = BaseState & {
   position: 'left' | 'right';
   width: string;
   collapsible: boolean;
   showToggle: boolean;
   expandOnHover: boolean;
   collapsed: boolean;
-  menu: MenuOptions | null;
-  style: string;
-  class: string;
+  items: SidebarItem[];
+  header: string;
+  footer: string;
 };
 
 export class Sidebar extends BaseComponent<SidebarState> {
   private _sidebar: HTMLElement | null = null;
-  private _menu: Menu | null = null;
 
   constructor(id: string, options: SidebarOptions = {}) {
     // Restore collapsed state from localStorage if available
@@ -48,14 +58,18 @@ export class Sidebar extends BaseComponent<SidebarState> {
       showToggle: options.showToggle ?? false,
       expandOnHover: options.expandOnHover ?? false,
       collapsed: initialCollapsed,
-      menu: options.menu ?? null,
+      items: options.items ?? [],
+      header: options.header ?? '',
+      footer: options.footer ?? '',
       style: options.style ?? '',
       class: options.class ?? ''
     });
 
-    // Listen for URL changes to update menu active states
+    this._setActiveStates();
+
+    // Listen for URL changes to update active states
     if (typeof window !== 'undefined') {
-      window.addEventListener('popstate', () => this.refreshMenu());
+      window.addEventListener('popstate', () => this.refreshActiveStates());
     }
   }
 
@@ -68,20 +82,160 @@ export class Sidebar extends BaseComponent<SidebarState> {
   }
 
   /* ═════════════════════════════════════════════════════════════════
-   * FLUENT API
+   * PRIVATE HELPERS
    * ═════════════════════════════════════════════════════════════════ */
 
-  // ✅ Inherited from BaseComponent:
-  // - style(), class()
-  // - bind(), sync(), renderTo()
-  // - addClass(), removeClass(), toggleClass()
-  // - visible(), show(), hide()
-  // - attr(), attrs(), removeAttr()
-  // - disabled(), enable(), disable()
-  // - loading(), focus(), blur(), remove()
+  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);
+    }
+
+    // Handle sub-items
+    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);
+
+      // Toggle submenu expansion
+      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;
   }
 
@@ -107,42 +261,38 @@ export class Sidebar extends BaseComponent<SidebarState> {
 
   collapsed(value: boolean): this {
     this.state.collapsed = value;
-    this._updateCollapsedState();
     return this;
   }
 
-  menu(value: MenuOptions): this {
-    this.state.menu = value;
+  items(value: SidebarItem[]): this {
+    this.state.items = value;
     return this;
   }
 
-  toggle(): void {
-    this.state.collapsed = !this.state.collapsed;
-    this._updateCollapsedState();
-
-    // Save to localStorage
-    const storageKey = `jux-sidebar-${this._id}-collapsed`;
-    localStorage.setItem(storageKey, String(this.state.collapsed));
+  addItem(item: SidebarItem): this {
+    this.state.items = [...this.state.items, item];
+    return this;
+  }
 
-    // 🎯 Fire the toggle callback event
-    this._triggerCallback('toggle', this.state.collapsed);
+  header(value: string): this {
+    this.state.header = value;
+    return this;
   }
 
-  /**
-   * Refresh menu active states (called automatically on URL changes)
-   */
-  refreshMenu(): this {
-    if (this._menu && this.state.menu) {
-      // Re-evaluate and update menu items with current active states
-      this._menu.items(this.state.menu.items || []);
-    }
+  footer(value: string): this {
+    this.state.footer = value;
     return this;
   }
 
-  private _updateCollapsedState(): void {
-    if (this._sidebar) {
-      this._sidebar.classList.toggle('jux-sidebar-collapsed', this.state.collapsed);
-    }
+  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;
   }
 
   /* ═════════════════════════════════════════════════════════════════
@@ -152,30 +302,52 @@ export class Sidebar extends BaseComponent<SidebarState> {
   render(targetId?: string): this {
     const container = this._setupContainer(targetId);
 
-    const { position, collapsed, expandOnHover, menu, style, class: className } = this.state;
+    const { position, collapsed, expandOnHover, items, header, footer, width, style, class: className } = this.state;
 
-    // Build sidebar element
     const sidebar = document.createElement('aside');
+    sidebar.className = `jux-sidebar jux-sidebar-${position}`;
     sidebar.id = this._id;
-    if (className) sidebar.className = className;
-    if (style) sidebar.setAttribute('style', style);
 
-    // Apply initial collapsed state
     if (collapsed) {
       sidebar.classList.add('jux-sidebar-collapsed');
     }
 
-    // Menu container (append first so toggle appears at bottom)
-    const menuContainer = document.createElement('div');
-    menuContainer.className = 'jux-sidebar-menu';
-    menuContainer.id = `${this._id}-menu`;
-    sidebar.appendChild(menuContainer);
+    if (className) sidebar.className += ` ${className}`;
+    if (style) sidebar.setAttribute('style', style);
+    if (width) sidebar.style.width = width;
+
+    // Header
+    if (header) {
+      const headerEl = document.createElement('div');
+      headerEl.className = 'jux-sidebar-header';
+      headerEl.textContent = header;
+      sidebar.appendChild(headerEl);
+    }
+
+    // Navigation
+    const nav = document.createElement('nav');
+    nav.className = 'jux-sidebar-nav';
+
+    items.forEach(item => {
+      nav.appendChild(this._renderItem(item));
+    });
+
+    sidebar.appendChild(nav);
+
+    // Footer
+    if (footer) {
+      const footerEl = document.createElement('div');
+      footerEl.className = 'jux-sidebar-footer';
+      footerEl.textContent = footer;
+      sidebar.appendChild(footerEl);
+    }
 
-    // Toggle button (append last so it appears at bottom)
+    // Toggle button
     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';
@@ -189,13 +361,12 @@ export class Sidebar extends BaseComponent<SidebarState> {
 
       toggleBtn.addEventListener('click', () => {
         this.toggle();
-        toggleBtn.classList.toggle('jux-sidebar-toggle-collapsed', this.state.collapsed);
       });
 
       sidebar.appendChild(toggleBtn);
     }
 
-    // Handle expand on hover
+    // Expand on hover
     if (expandOnHover) {
       sidebar.addEventListener('mouseenter', () => {
         if (this.state.collapsed) {
@@ -210,56 +381,12 @@ export class Sidebar extends BaseComponent<SidebarState> {
       });
     }
 
-    // Wire events using inherited method
     this._wireStandardEvents(sidebar);
-
-    // Wire sync bindings for 'collapsed' property
-    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-      if (property === 'collapsed') {
-        const transform = toComponent || ((v: any) => v);
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transform(val);
-          const isCollapsed = Boolean(transformed);
-          this.state.collapsed = isCollapsed;
-          this._updateCollapsedState();
-        });
-      }
-      else if (property === 'menu') {
-        const transform = toComponent || ((v: any) => v);
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transform(val);
-          this.state.menu = transformed;
-
-          // Update menu items if menu instance exists
-          if (this._menu) {
-            this._menu.items(transformed.items || []);
-
-            // Re-render the menu
-            const menuEl = menuContainer.querySelector(`#${this._id}-menu-instance`);
-            if (menuEl) {
-              menuEl.remove();
-            }
-            this._menu.render(`#${menuContainer.id}`);
-          }
-        });
-      }
-    });
+    this._wireAllSyncs();
 
     container.appendChild(sidebar);
     this._sidebar = sidebar;
 
-    // Create and render menu (after sidebar is in DOM)
-    if (menu) {
-      this._menu = new Menu(`${this._id}-menu-instance`, {
-        ...menu,
-        orientation: 'vertical'
-      });
-      this._menu.render(`#${menuContainer.id}`);
-    }
-
-    // Trigger Iconify icon rendering
     requestAnimationFrame(() => {
       if ((window as any).Iconify) {
         (window as any).Iconify.scan();
@@ -268,10 +395,6 @@ export class Sidebar extends BaseComponent<SidebarState> {
 
     return this;
   }
-
-  update(prop: string, value: any): void {
-    // No reactive updates needed
-  }
 }
 
 export function sidebar(id: string, options: SidebarOptions = {}): Sidebar {

package/package.json

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

package/lib/components/guard.d.ts

@@ -1,42 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { State } from '../reactivity/state.js';
-declare global {
-    interface Window {
-        juxBeforeNavigate?: (from: string, to: string) => boolean | string;
-        juxAfterNavigate?: (path: string) => void;
-    }
-}
-export interface GuardOptions {
-    authState?: State<boolean>;
-    loginPath?: string;
-    protectedPaths?: string[];
-}
-type GuardState = {
-    authState: State<boolean> | null;
-    loginPath: string;
-    protectedPaths: string[];
-    isActive: boolean;
-};
-/**
- * ⚠️ DEPRECATED: Guard component is no longer supported after removing global middleware.
- *
- * Recommended alternatives:
- * 1. Server-side authentication (Express, FastAPI, Laravel)
- * 2. Manual route checks in each view
- * 3. Custom wrapper components
- *
- * This component will be removed in a future version.
- */
-export declare class Guard extends BaseComponent<GuardState> {
-    constructor(id: string, options?: GuardOptions);
-    protected getTriggerEvents(): readonly string[];
-    protected getCallbackEvents(): readonly string[];
-    requireAuth(authState: State<boolean>, loginPath?: string): this;
-    protect(...paths: string[]): this;
-    render(targetId?: string): this;
-    deactivate(): this;
-    update(prop: string, value: any): void;
-}
-export declare function guard(id: string, options?: GuardOptions): Guard;
-export {};
-//# sourceMappingURL=guard.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"guard.d.ts","sourceRoot":"","sources":["guard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAG/C,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,OAAO,GAAG,MAAM,CAAC;QACnE,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;KAC7C;CACJ;AAMD,MAAM,WAAW,YAAY;IACzB,SAAS,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AAED,KAAK,UAAU,GAAG;IACd,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;;;;;;;;GASG;AACH,qBAAa,KAAM,SAAQ,aAAa,CAAC,UAAU,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB;IAclD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,WAAW,CAAC,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI;IAKhE,OAAO,CAAC,GAAG,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI;IASjC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;IAK/B,UAAU,IAAI,IAAI;IAIlB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;CAGzC;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,KAAK,CAE/D"}

package/lib/components/guard.js

@@ -1,59 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = ['blocked', 'allowed'];
-/**
- * ⚠️ DEPRECATED: Guard component is no longer supported after removing global middleware.
- *
- * Recommended alternatives:
- * 1. Server-side authentication (Express, FastAPI, Laravel)
- * 2. Manual route checks in each view
- * 3. Custom wrapper components
- *
- * This component will be removed in a future version.
- */
-export class Guard extends BaseComponent {
-    constructor(id, options = {}) {
-        super(id, {
-            authState: options.authState ?? null,
-            loginPath: options.loginPath ?? '/login',
-            protectedPaths: options.protectedPaths ?? [],
-            isActive: false
-        });
-        console.warn('[Jux Guard] DEPRECATED: Guard component no longer supported after middleware removal.\n' +
-            'Use server-side auth or manual checks instead.');
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API (No-ops now)
-     * ═════════════════════════════════════════════════════════════════ */
-    requireAuth(authState, loginPath) {
-        console.warn('[Jux Guard] DEPRECATED: requireAuth() has no effect');
-        return this;
-    }
-    protect(...paths) {
-        console.warn('[Jux Guard] DEPRECATED: protect() has no effect');
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER (No-op)
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        console.warn('[Jux Guard] DEPRECATED: Guard rendering has no effect');
-        return this;
-    }
-    deactivate() {
-        return this;
-    }
-    update(prop, value) {
-        // No reactive updates needed
-    }
-}
-export function guard(id, options) {
-    return new Guard(id, options);
-}

package/lib/components/guard.ts

@@ -1,96 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { State } from '../reactivity/state.js';
-
-// Extend Window interface to include Jux navigation hooks
-declare global {
-    interface Window {
-        juxBeforeNavigate?: (from: string, to: string) => boolean | string;
-        juxAfterNavigate?: (path: string) => void;
-    }
-}
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['blocked', 'allowed'] as const;
-
-export interface GuardOptions {
-    authState?: State<boolean>;       // Check if user is authenticated
-    loginPath?: string;               // Where to redirect if blocked
-    protectedPaths?: string[];        // Paths that require auth
-}
-
-type GuardState = {
-    authState: State<boolean> | null;
-    loginPath: string;
-    protectedPaths: string[];
-    isActive: boolean;
-};
-
-/**
- * ⚠️ DEPRECATED: Guard component is no longer supported after removing global middleware.
- * 
- * Recommended alternatives:
- * 1. Server-side authentication (Express, FastAPI, Laravel)
- * 2. Manual route checks in each view
- * 3. Custom wrapper components
- * 
- * This component will be removed in a future version.
- */
-export class Guard extends BaseComponent<GuardState> {
-    constructor(id: string, options: GuardOptions = {}) {
-        super(id, {
-            authState: options.authState ?? null,
-            loginPath: options.loginPath ?? '/login',
-            protectedPaths: options.protectedPaths ?? [],
-            isActive: false
-        });
-
-        console.warn(
-            '[Jux Guard] DEPRECATED: Guard component no longer supported after middleware removal.\n' +
-            'Use server-side auth or manual checks instead.'
-        );
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API (No-ops now)
-     * ═════════════════════════════════════════════════════════════════ */
-
-    requireAuth(authState: State<boolean>, loginPath?: string): this {
-        console.warn('[Jux Guard] DEPRECATED: requireAuth() has no effect');
-        return this;
-    }
-
-    protect(...paths: string[]): this {
-        console.warn('[Jux Guard] DEPRECATED: protect() has no effect');
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER (No-op)
-     * ═════════════════════════════════════════════════════════════════ */
-
-    render(targetId?: string): this {
-        console.warn('[Jux Guard] DEPRECATED: Guard rendering has no effect');
-        return this;
-    }
-
-    deactivate(): this {
-        return this;
-    }
-
-    update(prop: string, value: any): void {
-        // No reactive updates needed
-    }
-}
-
-export function guard(id: string, options?: GuardOptions): Guard {
-    return new Guard(id, options);
-}