juxscript 1.0.2 → 1.0.4

package/lib/components/sidebar.ts

@@ -1,4 +1,4 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
+import { getOrCreateContainer } from './helpers.js';
 
 /**
  * Sidebar component options
@@ -9,6 +9,8 @@ export interface SidebarOptions {
   position?: 'left' | 'right';
   collapsible?: boolean;
   collapsed?: boolean;
+  style?: string;
+  class?: string;
 }
 
 /**
@@ -20,6 +22,8 @@ type SidebarState = {
   position: string;
   collapsible: boolean;
   collapsed: boolean;
+  style: string;
+  class: string;
 };
 
 /**
@@ -33,21 +37,25 @@ type SidebarState = {
  *   });
  *   sidebar.render('#appsidebar');
  */
-export class Sidebar extends Reactive {
-  state!: SidebarState;
+export class Sidebar {
+  state: SidebarState;
   container: HTMLElement | null = null;
-  
-  constructor(componentId: string, options: SidebarOptions = {}) {
-    super();
-    this._setComponentId(componentId);
-    
-    this.state = this._createReactiveState({
+  _id: string;
+  id: string;
+
+  constructor(id: string, options: SidebarOptions = {}) {
+    this._id = id;
+    this.id = id;
+
+    this.state = {
       title: options.title ?? '',
       width: options.width ?? '250px',
       position: options.position ?? 'left',
       collapsible: options.collapsible ?? false,
-      collapsed: options.collapsed ?? false
-    }) as SidebarState;
+      collapsed: options.collapsed ?? false,
+      style: options.style ?? '',
+      class: options.class ?? ''
+    };
   }
 
   /* -------------------------
@@ -79,18 +87,55 @@ export class Sidebar extends Reactive {
     return this;
   }
 
+  style(value: string): this {
+    this.state.style = value;
+    return this;
+  }
+
+  class(value: string): this {
+    this.state.class = value;
+    return this;
+  }
+
   toggle(): this {
     this.state.collapsed = !this.state.collapsed;
+    this._updateDOM();
     return this;
   }
 
+  /* -------------------------
+   * 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');
+      sidebar.style.width = '0';
+    } else {
+      sidebar.classList.remove('jux-sidebar-collapsed');
+      sidebar.style.width = width;
+    }
+
+    const toggleBtn = sidebar.querySelector('.jux-sidebar-toggle');
+    if (toggleBtn) {
+      toggleBtn.textContent = collapsed ? '>' : '<';
+    }
+  }
+
   /* -------------------------
    * Render
    * ------------------------- */
 
   render(targetId?: string): this {
     let container: HTMLElement;
-    
+
     if (targetId) {
       const target = document.querySelector(targetId);
       if (!target || !(target instanceof HTMLElement)) {
@@ -98,49 +143,54 @@ export class Sidebar extends Reactive {
       }
       container = target;
     } else {
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
+      container = getOrCreateContainer(this._id);
     }
-    
+
     this.container = container;
-    const { title, width, position, collapsible, collapsed } = this.state;
-    
+    const { title, width, position, collapsible, collapsed, style, class: className } = this.state;
+
     const sidebar = document.createElement('aside');
     sidebar.className = `jux-sidebar jux-sidebar-${position}`;
-    sidebar.id = this._componentId;
+    sidebar.id = this._id;
     sidebar.style.width = collapsed ? '0' : width;
-    
+
+    if (className) {
+      sidebar.className += ` ${className}`;
+    }
+
+    if (style) {
+      sidebar.setAttribute('style', sidebar.getAttribute('style') + '; ' + style);
+    }
+
     if (collapsed) {
       sidebar.classList.add('jux-sidebar-collapsed');
     }
-    
+
     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);
-    
-    container.appendChild(sidebar);
-    
+
     // Event binding - toggle button
     if (collapsible) {
       const toggleBtn = document.createElement('button');
       toggleBtn.className = 'jux-sidebar-toggle';
       toggleBtn.textContent = collapsed ? '>' : '<';
-      sidebar.appendChild(toggleBtn);
-      
+
       toggleBtn.addEventListener('click', () => {
         this.toggle();
-        sidebar.classList.toggle('jux-sidebar-collapsed');
-        sidebar.style.width = this.state.collapsed ? '0' : width;
-        toggleBtn.textContent = this.state.collapsed ? '>' : '<';
       });
+
+      sidebar.appendChild(toggleBtn);
     }
-    
+
+    container.appendChild(sidebar);
     return this;
   }
 
@@ -151,18 +201,18 @@ export class Sidebar extends Reactive {
     if (!juxComponent || typeof juxComponent !== 'object') {
       throw new Error('Sidebar.renderTo: Invalid component - not an object');
     }
-    
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('Sidebar.renderTo: Invalid component - missing _componentId (not a Jux component)');
+
+    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+      throw new Error('Sidebar.renderTo: Invalid component - missing _id (not a Jux component)');
     }
-    
-    return this.render(`#${juxComponent._componentId}`);
+
+    return this.render(`#${juxComponent._id}`);
   }
 }
 
 /**
  * Factory helper
  */
-export function sidebar(componentId: string, options: SidebarOptions = {}): Sidebar {
-  return new Sidebar(componentId, options);
+export function sidebar(id: string, options: SidebarOptions = {}): Sidebar {
+  return new Sidebar(id, options);
 }

package/lib/components/style.ts

@@ -1,66 +1,53 @@
 import { ErrorHandler } from './error-handler.js';
 
+/**
+ * Style - Inject inline CSS into the document
+ * For external stylesheets, use Import component instead
+ * Auto-renders when created or modified
+ */
 export class Style {
   private _content: string = '';
-  private _url: string = '';
-  private _isUrl: boolean = false;
-  private _element: HTMLLinkElement | HTMLStyleElement | null = null;
+  private _element: HTMLStyleElement | null = null;
 
-  constructor(contentOrUrl: string = '') {
-    // Detect if it's a URL or inline CSS
-    if (contentOrUrl.trim().startsWith('http') || 
-        contentOrUrl.endsWith('.css') || 
-        contentOrUrl.includes('/')) {
-      this._url = contentOrUrl;
-      this._isUrl = true;
-    } else {
-      this._content = contentOrUrl;
-      this._isUrl = false;
-    }
-    
-    // Auto-render if content/url provided
-    // render() has its own error handling, so no need for try-catch here
-    if (contentOrUrl) {
+  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._isUrl = false;
-    this._url = '';
-    this.render();
-    return this;
-  }
-
-  url(href: string): this {
-    this._url = href;
-    this._isUrl = true;
-    this._content = '';
     this.render();
     return this;
   }
 
+  /**
+   * Append CSS to existing content
+   */
   append(css: string): this {
-    if (this._isUrl) {
-      console.warn('Cannot append to external stylesheet. Use content() to switch to inline styles.');
-      return this;
-    }
     this._content += '\n' + css;
     this.render();
     return this;
   }
 
+  /**
+   * Prepend CSS to existing content
+   */
   prepend(css: string): this {
-    if (this._isUrl) {
-      console.warn('Cannot prepend to external stylesheet. Use content() to switch to inline styles.');
-      return this;
-    }
     this._content = css + '\n' + this._content;
     this.render();
     return this;
   }
 
+  /**
+   * Render the inline style element
+   */
   render(): this {
     if (typeof document === 'undefined') {
       return this;
@@ -70,47 +57,22 @@ export class Style {
       // Remove existing element if it exists
       this.remove();
 
-      if (this._isUrl) {
-        // Create <link> element for external stylesheet
-        const link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = this._url;
-        
-        // Add error handler for failed loads (404, network, etc.)
-        link.onerror = () => {
-          ErrorHandler.captureError({
-            component: 'Style',
-            method: 'render',
-            message: `Failed to load stylesheet: ${this._url}`,
-            timestamp: new Date(),
-            context: { url: this._url, type: 'external', error: 'load_failed' }
-          });
-        };
-        
-        link.onload = () => {
-          console.log(`✓ Stylesheet loaded: ${this._url}`);
-        };
-        
-        document.head.appendChild(link);
-        this._element = link;
-      } else {
-        // Create <style> element for inline CSS
-        const style = document.createElement('style');
-        style.textContent = this._content;
-        document.head.appendChild(style);
-        this._element = style;
-      }
+      // 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) {
-      // Catch DOM manipulation errors, permission errors, etc.
       ErrorHandler.captureError({
         component: 'Style',
         method: 'render',
         message: error.message,
         stack: error.stack,
         timestamp: new Date(),
-        context: { 
-          isUrl: this._isUrl, 
-          url: this._url,
+        context: {
+          type: 'inline',
           error: 'runtime_exception'
         }
       });
@@ -119,6 +81,9 @@ export class Style {
     return this;
   }
 
+  /**
+   * Remove the style from the document
+   */
   remove(): this {
     if (this._element && this._element.parentNode) {
       this._element.parentNode.removeChild(this._element);
@@ -126,4 +91,16 @@ export class Style {
     }
     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);
 }

package/lib/components/switch.ts

@@ -0,0 +1,261 @@
+import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
+
+/**
+ * Switch component options
+ */
+export interface SwitchOptions {
+    label?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    name?: string;
+    onChange?: (checked: boolean) => void;
+    style?: string;
+    class?: string;
+}
+
+/**
+ * Switch component state
+ */
+type SwitchState = {
+    label: string;
+    checked: boolean;
+    disabled: boolean;
+    name: string;
+    style: string;
+    class: string;
+};
+
+/**
+ * Switch component - Toggle switch for boolean values
+ * 
+ * Usage:
+ *   jux.switch('notifications', {
+ *     label: 'Enable notifications',
+ *     checked: true,
+ *     onChange: (checked) => console.log(checked)
+ *   }).render('#settings');
+ * 
+ *   // Two-way binding
+ *   const notificationsState = state(true);
+ *   jux.switch('notifications').label('Notifications').bind(notificationsState).render('#settings');
+ */
+export class Switch {
+    state: SwitchState;
+    container: HTMLElement | null = null;
+    _id: string;
+    id: string;
+    private _onChange?: (checked: boolean) => void;
+    private _boundState?: State<boolean>;
+
+    constructor(id: string, options: SwitchOptions = {}) {
+        this._id = id;
+        this.id = id;
+        this._onChange = options.onChange;
+
+        this.state = {
+            label: options.label ?? '',
+            checked: options.checked ?? false,
+            disabled: options.disabled ?? false,
+            name: options.name ?? id,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        };
+    }
+
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+
+    label(value: string): this {
+        this.state.label = value;
+        return this;
+    }
+
+    checked(value: boolean): this {
+        this.state.checked = value;
+        this._updateElement();
+        return this;
+    }
+
+    disabled(value: boolean): this {
+        this.state.disabled = value;
+        this._updateElement();
+        return this;
+    }
+
+    name(value: string): this {
+        this.state.name = value;
+        return this;
+    }
+
+    style(value: string): this {
+        this.state.style = value;
+        return this;
+    }
+
+    class(value: string): this {
+        this.state.class = value;
+        return this;
+    }
+
+    onChange(handler: (checked: boolean) => void): this {
+        this._onChange = handler;
+        return this;
+    }
+
+    /**
+     * Two-way binding to state
+     */
+    bind(stateObj: State<boolean>): this {
+        this._boundState = stateObj;
+
+        // Update switch when state changes
+        stateObj.subscribe((val) => {
+            this.state.checked = val;
+            this._updateElement();
+        });
+
+        // Update state when switch changes
+        this.onChange((checked) => stateObj.set(checked));
+
+        return this;
+    }
+
+    /* -------------------------
+     * Helpers
+     * ------------------------- */
+
+    private _updateElement(): void {
+        const input = document.getElementById(`${this._id}-input`) as HTMLInputElement;
+        const track = document.getElementById(`${this._id}-track`);
+
+        if (input) {
+            input.checked = this.state.checked;
+            input.disabled = this.state.disabled;
+        }
+
+        if (track) {
+            if (this.state.checked) {
+                track.classList.add('jux-switch-track-checked');
+            } else {
+                track.classList.remove('jux-switch-track-checked');
+            }
+        }
+    }
+
+    /**
+     * Toggle the switch
+     */
+    toggle(): this {
+        this.state.checked = !this.state.checked;
+        this._updateElement();
+        if (this._onChange) {
+            this._onChange(this.state.checked);
+        }
+        return this;
+    }
+
+    isChecked(): boolean {
+        return this.state.checked;
+    }
+
+    /* -------------------------
+     * Render
+     * ------------------------- */
+
+    render(targetId?: string): this {
+        let container: HTMLElement;
+
+        if (targetId) {
+            const target = document.querySelector(targetId);
+            if (!target || !(target instanceof HTMLElement)) {
+                throw new Error(`Switch: Target element "${targetId}" not found`);
+            }
+            container = target;
+        } else {
+            container = getOrCreateContainer(this._id);
+        }
+
+        this.container = container;
+        const { label, checked, disabled, name, style, class: className } = this.state;
+
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-switch';
+        wrapper.id = this._id;
+
+        if (className) {
+            wrapper.className += ` ${className}`;
+        }
+
+        if (style) {
+            wrapper.setAttribute('style', style);
+        }
+
+        const labelEl = document.createElement('label');
+        labelEl.className = 'jux-switch-label';
+
+        const input = document.createElement('input');
+        input.type = 'checkbox';
+        input.className = 'jux-switch-input';
+        input.id = `${this._id}-input`;
+        input.name = name;
+        input.checked = checked;
+        input.disabled = disabled;
+        input.setAttribute('role', 'switch');
+
+        input.addEventListener('change', (e) => {
+            const target = e.target as HTMLInputElement;
+            this.state.checked = target.checked;
+
+            const track = document.getElementById(`${this._id}-track`);
+            if (track) {
+                if (target.checked) {
+                    track.classList.add('jux-switch-track-checked');
+                } else {
+                    track.classList.remove('jux-switch-track-checked');
+                }
+            }
+
+            if (this._onChange) {
+                this._onChange(target.checked);
+            }
+        });
+
+        const track = document.createElement('span');
+        track.className = 'jux-switch-track';
+        track.id = `${this._id}-track`;
+        if (checked) {
+            track.classList.add('jux-switch-track-checked');
+        }
+
+        const thumb = document.createElement('span');
+        thumb.className = 'jux-switch-thumb';
+
+        track.appendChild(thumb);
+        labelEl.appendChild(input);
+        labelEl.appendChild(track);
+
+        if (label) {
+            const span = document.createElement('span');
+            span.className = 'jux-switch-text';
+            span.textContent = label;
+            labelEl.appendChild(span);
+        }
+
+        wrapper.appendChild(labelEl);
+        container.appendChild(wrapper);
+        return this;
+    }
+
+    renderTo(juxComponent: any): this {
+        if (!juxComponent?._id) {
+            throw new Error('Switch.renderTo: Invalid component');
+        }
+        return this.render(`#${juxComponent._id}`);
+    }
+}
+
+export function switchComponent(id: string, options: SwitchOptions = {}): Switch {
+    return new Switch(id, options);
+}