juxscript 1.0.19 → 1.0.21

package/lib/components/sidebar.ts

@@ -1,72 +1,62 @@
-import { getOrCreateContainer } from './helpers.js';
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['toggle'] as const;
 
-/**
- * Sidebar component options
- */
 export interface SidebarOptions {
-  title?: string;
-  width?: string;
   position?: 'left' | 'right';
+  width?: string;
   collapsible?: boolean;
   collapsed?: boolean;
   style?: string;
   class?: string;
 }
 
-/**
- * Sidebar component state
- */
 type SidebarState = {
-  title: string;
-  width: string | null;
-  position: string;
+  position: 'left' | 'right';
+  width: string;
   collapsible: boolean;
   collapsed: boolean;
   style: string;
   class: string;
 };
 
-/**
- * Sidebar component
- * 
- * Usage:
- *   const sidebar = jux.sidebar('mySidebar', {
- *     title: 'Navigation',
- *     width: '250px',
- *     position: 'left'
- *   });
- *   sidebar.render('#appsidebar');
- */
-export class Sidebar {
-  state: SidebarState;
-  container: HTMLElement | null = null;
-  _id: string;
-  id: string;
+export class Sidebar extends BaseComponent<SidebarState> {
+  private _sidebar: HTMLElement | null = null;
 
   constructor(id: string, options: SidebarOptions = {}) {
-    this._id = id;
-    this.id = id;
-
-    this.state = {
-      title: options.title ?? '',
-      width: options.width ?? null, // No default width - let CSS handle it
+    super(id, {
       position: options.position ?? 'left',
-      collapsible: options.collapsible ?? false,
+      width: options.width ?? '',
+      collapsible: options.collapsible ?? true,
       collapsed: options.collapsed ?? false,
       style: options.style ?? '',
       class: options.class ?? ''
-    };
+    });
   }
 
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
+  }
 
-  title(value: string): this {
-    this.state.title = value;
-    return this;
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
   }
 
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from BaseComponent:
+  // - style(), class()
+  // - bind(), sync(), renderTo()
+  // - addClass(), removeClass(), toggleClass()
+  // - visible(), show(), hide()
+  // - attr(), attrs(), removeAttr()
+  // - disabled(), enable(), disable()
+  // - loading(), focus(), blur(), remove()
+
   width(value: string): this {
     this.state.width = value;
     return this;
@@ -84,143 +74,165 @@ export class Sidebar {
 
   collapsed(value: boolean): this {
     this.state.collapsed = value;
+    this._updateCollapsedState();
     return this;
   }
 
-  style(value: string): this {
-    this.state.style = value;
-    return this;
-  }
-
-  class(value: string): this {
-    this.state.class = value;
-    return this;
-  }
-
-  toggle(): this {
+  toggle(): void {
     this.state.collapsed = !this.state.collapsed;
-    this._updateDOM();
-    return this;
+    this._updateCollapsedState();
+    // 🎯 Fire the toggle callback event
+    this._triggerCallback('toggle', this.state.collapsed);
   }
 
-  /* -------------------------
-   * Helpers
-   * ------------------------- */
-
-  private _updateDOM(): void {
-    if (!this.container) return;
-
-    const sidebar = this.container.querySelector(`#${this._id}`);
-    if (!sidebar || !(sidebar instanceof HTMLElement)) return;
-
-    const { width, collapsed } = this.state;
-
-    if (collapsed) {
-      sidebar.classList.add('jux-sidebar-collapsed');
-      if (width) {
-        sidebar.style.width = '0';
-      }
-    } else {
-      sidebar.classList.remove('jux-sidebar-collapsed');
-      if (width) {
-        sidebar.style.width = width;
-      }
-    }
-
-    const toggleBtn = sidebar.querySelector('.jux-sidebar-toggle');
-    if (toggleBtn) {
-      toggleBtn.textContent = collapsed ? '>' : '<';
+  private _updateCollapsedState(): void {
+    if (this._sidebar) {
+      this._sidebar.classList.toggle('jux-sidebar-collapsed', this.state.collapsed);
     }
   }
 
-  /* -------------------------
-   * Render
-   * ------------------------- */
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
 
   render(targetId?: string): this {
-    let container: HTMLElement;
+    const container = this._setupContainer(targetId);
 
-    if (targetId) {
-      const target = document.querySelector(targetId);
-      if (!target || !(target instanceof HTMLElement)) {
-        throw new Error(`Sidebar: Target element "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      container = getOrCreateContainer(this._id);
-    }
-
-    this.container = container;
-    const { title, width, position, collapsible, collapsed, style, class: className } = this.state;
+    const { position, width, collapsible, collapsed, style, class: className } = this.state;
 
+    // Build sidebar element
     const sidebar = document.createElement('aside');
     sidebar.className = `jux-sidebar jux-sidebar-${position}`;
     sidebar.id = this._id;
-    
-    // Only set width if explicitly provided
-    if (width) {
-      sidebar.style.width = collapsed ? '0' : width;
-    }
-
-    if (className) {
-      sidebar.className += ` ${className}`;
-    }
-
-    if (style) {
-      sidebar.setAttribute('style', sidebar.getAttribute('style') + '; ' + style);
-    }
+    if (className) sidebar.className += ` ${className}`;
+    if (collapsed) sidebar.classList.add('jux-sidebar-collapsed');
 
-    if (collapsed) {
-      sidebar.classList.add('jux-sidebar-collapsed');
+    const sidebarStyle = `${width ? `width: ${collapsed ? '60px' : width};` : ''} ${style}`;
+    if (sidebarStyle.trim()) {
+      sidebar.setAttribute('style', sidebarStyle);
     }
 
-    if (title) {
-      const titleEl = document.createElement('div');
-      titleEl.className = 'jux-sidebar-title';
-      titleEl.textContent = title;
-      sidebar.appendChild(titleEl);
-    }
-
-    const content = document.createElement('div');
-    content.className = 'jux-sidebar-content';
-    sidebar.appendChild(content);
-
-    // Event binding - toggle button
     if (collapsible) {
       const toggleBtn = document.createElement('button');
       toggleBtn.className = 'jux-sidebar-toggle';
-      toggleBtn.textContent = collapsed ? '>' : '<';
+      toggleBtn.innerHTML = collapsed
+        ? (position === 'left' ? '▶' : '◀')
+        : (position === 'left' ? '◀' : '▶');
+      toggleBtn.setAttribute('aria-label', 'Toggle sidebar');
+      toggleBtn.setAttribute('title', collapsed ? 'Expand sidebar' : 'Collapse sidebar');
 
       toggleBtn.addEventListener('click', () => {
         this.toggle();
+
+        const isCollapsed = this.state.collapsed;
+        toggleBtn.innerHTML = isCollapsed
+          ? (position === 'left' ? '▶' : '◀')
+          : (position === 'left' ? '◀' : '▶');
+        toggleBtn.setAttribute('title', isCollapsed ? 'Expand sidebar' : 'Collapse sidebar');
+
+        if (width) {
+          sidebar.style.width = isCollapsed ? '60px' : width;
+        }
       });
 
       sidebar.appendChild(toggleBtn);
     }
 
+    // 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();
+        });
+      }
+    });
+
     container.appendChild(sidebar);
+    this._sidebar = sidebar;
+    this._injectDefaultStyles();
+
     return this;
   }
 
-  /**
-   * Render to another Jux component's container
-   */
-  renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Sidebar.renderTo: Invalid component - not an object');
-    }
+  private _injectDefaultStyles(): void {
+    const styleId = 'jux-sidebar-styles';
+    if (document.getElementById(styleId)) return;
+
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+      .jux-sidebar {
+        position: relative;
+        height: 100vh;
+        background: #f9fafb;
+        border-right: 1px solid #e5e7eb;
+        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        overflow: hidden;
+      }
 
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Sidebar.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
+      .jux-sidebar-right {
+        border-right: none;
+        border-left: 1px solid #e5e7eb;
+      }
+
+      .jux-sidebar-toggle {
+        position: absolute;
+        bottom: 20px;
+        right: 20px;
+        width: 32px;
+        height: 32px;
+        border: none;
+        background: #3b82f6;
+        color: white;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        z-index: 100;
+        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+      }
+
+      .jux-sidebar-toggle:hover {
+        background: #2563eb;
+        transform: scale(1.05);
+        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
+      }
 
-    return this.render(`#${juxComponent._id}`);
+      .jux-sidebar-toggle:active {
+        transform: scale(0.95);
+      }
+
+      .jux-sidebar-collapsed {
+        width: 60px !important;
+      }
+
+      .jux-sidebar-collapsed > *:not(.jux-sidebar-toggle) {
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s ease-out;
+      }
+
+      .jux-sidebar > *:not(.jux-sidebar-toggle) {
+        opacity: 1;
+        pointer-events: auto;
+        transition: opacity 0.3s ease-in 0.1s;
+      }
+    `;
+    document.head.appendChild(style);
   }
 }
 
-/**
- * Factory helper
- */
 export function sidebar(id: string, options: SidebarOptions = {}): Sidebar {
   return new Sidebar(id, options);
 }

package/lib/components/style.ts

@@ -6,101 +6,38 @@ import { ErrorHandler } from './error-handler.js';
  * Auto-renders when created or modified
  */
 export class Style {
-  private _content: string = '';
-  private _element: HTMLStyleElement | null = null;
+  private _id: string;
+  private css: string;
 
-  constructor(content: string = '') {
-    this._content = content;
-
-    // Auto-render if content provided
-    if (content) {
-      this.render();
-    }
-  }
-
-  /**
-   * Set inline CSS content
-   */
-  content(css: string): this {
-    this._content = css;
-    this.render();
-    return this;
+  constructor(css: string, id?: string) {
+    // ID only for deduplication, auto-generate if not provided
+    this._id = id || `jux-style-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    this.css = css;
   }
 
-  /**
-   * Append CSS to existing content
-   */
-  append(css: string): this {
-    this._content += '\n' + css;
-    this.render();
-    return this;
-  }
-
-  /**
-   * Prepend CSS to existing content
-   */
-  prepend(css: string): this {
-    this._content = css + '\n' + this._content;
-    this.render();
-    return this;
-  }
-
-  /**
-   * Render the inline style element
-   */
   render(): this {
-    if (typeof document === 'undefined') {
+    // Check if style with this ID already exists
+    if (document.getElementById(this._id)) {
       return this;
     }
 
-    try {
-      // Remove existing element if it exists
-      this.remove();
-
-      // Create <style> element for inline CSS
-      const style = document.createElement('style');
-      style.textContent = this._content;
-      document.head.appendChild(style);
-      this._element = style;
-
-      console.log('✓ Inline styles rendered');
-    } catch (error: any) {
-      ErrorHandler.captureError({
-        component: 'Style',
-        method: 'render',
-        message: error.message,
-        stack: error.stack,
-        timestamp: new Date(),
-        context: {
-          type: 'inline',
-          error: 'runtime_exception'
-        }
-      });
-    }
+    const style = document.createElement('style');
+    style.id = this._id;
+    style.textContent = this.css;
+    document.head.appendChild(style);
 
     return this;
   }
 
-  /**
-   * Remove the style from the document
-   */
-  remove(): this {
-    if (this._element && this._element.parentNode) {
-      this._element.parentNode.removeChild(this._element);
-      this._element = null;
+  remove(): void {
+    const existing = document.getElementById(this._id);
+    if (existing) {
+      existing.remove();
     }
-    return this;
   }
 }
 
-/**
- * Factory function
- * 
- * Usage:
- *   jux.style('body { margin: 0; }');
- *   jux.style().content('.highlight { color: red; }');
- *   jux.style('h1 { font-size: 2rem; }').append('h2 { font-size: 1.5rem; }');
- */
-export function style(content: string = ''): Style {
-  return new Style(content);
+// ✅ ID is optional
+export function style(css: string, id?: string): Style {
+  return new Style(css, id);
 }