juxscript 1.0.3 → 1.0.5

package/lib/components/select.ts

@@ -0,0 +1,280 @@
+import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
+
+export interface SelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+
+export interface SelectOptions {
+    options?: SelectOption[];
+    value?: string;
+    placeholder?: string;
+    label?: string;
+    disabled?: boolean;
+    name?: string;
+    onChange?: (value: string) => void;
+    style?: string;
+    class?: string;
+}
+
+type SelectState = {
+    options: SelectOption[];
+    value: string;
+    placeholder: string;
+    label: string;
+    disabled: boolean;
+    name: string;
+    style: string;
+    class: string;
+};
+
+export class Select {
+    state: SelectState;
+    container: HTMLElement | null = null;
+    _id: string;
+    id: string;
+    private _onChange?: (value: string) => void;
+    private _boundState?: State<string>;
+
+    constructor(id: string, options: SelectOptions = {}) {
+        this._id = id;
+        this.id = id;
+        this._onChange = options.onChange;
+
+        this.state = {
+            options: options.options ?? [],
+            value: options.value ?? '',
+            placeholder: options.placeholder ?? 'Select...',
+            label: options.label ?? '',
+            disabled: options.disabled ?? false,
+            name: options.name ?? id,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        };
+    }
+
+    options(value: SelectOption[]): this {
+        this.state.options = value;
+        return this;
+    }
+
+    addOption(option: SelectOption): this {
+        this.state.options = [...this.state.options, option];
+        return this;
+    }
+
+    value(value: string): this {
+        this.state.value = value;
+        this._updateElement();
+        return this;
+    }
+
+    placeholder(value: string): this {
+        this.state.placeholder = value;
+        return this;
+    }
+
+    label(value: string): this {
+        this.state.label = value;
+        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: (value: string) => void): this {
+        this._onChange = handler;
+        return this;
+    }
+
+    /**
+     * Two-way binding to state
+     */
+    bind(stateObj: State<string>): this {
+        this._boundState = stateObj;
+
+        // Update select when state changes
+        stateObj.subscribe((val) => {
+            this.state.value = val;
+            this._updateElement();
+        });
+
+        // Update state when select changes
+        const originalOnChange = this._onChange;
+        this._onChange = (value) => {
+            stateObj.set(value);
+            if (originalOnChange) {
+                originalOnChange(value);
+            }
+        };
+
+        return this;
+    }
+
+    private _updateElement(): void {
+        const select = document.getElementById(`${this._id}-select`) as HTMLSelectElement;
+        if (select) {
+            select.value = this.state.value;
+            select.disabled = this.state.disabled;
+        }
+    }
+
+    getValue(): string {
+        return this.state.value;
+    }
+
+    render(targetId?: string): this {
+        let container: HTMLElement;
+
+        if (targetId) {
+            const target = document.querySelector(targetId);
+            if (!target || !(target instanceof HTMLElement)) {
+                throw new Error(`Select: Target element "${targetId}" not found`);
+            }
+            container = target;
+        } else {
+            container = getOrCreateContainer(this._id);
+        }
+
+        this.container = container;
+        const { options, value, placeholder, label, disabled, name, style, class: className } = this.state;
+
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-select';
+        wrapper.id = this._id;
+
+        if (className) {
+            wrapper.className += ` ${className}`;
+        }
+
+        if (style) {
+            wrapper.setAttribute('style', style);
+        }
+
+        // Label
+        if (label) {
+            const labelEl = document.createElement('label');
+            labelEl.className = 'jux-select-label';
+            labelEl.htmlFor = `${this._id}-select`;
+            labelEl.textContent = label;
+            wrapper.appendChild(labelEl);
+        }
+
+        const select = document.createElement('select');
+        select.className = 'jux-select-element';
+        select.id = `${this._id}-select`;
+        select.name = name;
+        select.disabled = disabled;
+
+        // Placeholder option
+        if (placeholder) {
+            const placeholderOpt = document.createElement('option');
+            placeholderOpt.value = '';
+            placeholderOpt.textContent = placeholder;
+            placeholderOpt.disabled = true;
+            placeholderOpt.selected = value === '';
+            select.appendChild(placeholderOpt);
+        }
+
+        // Options
+        options.forEach(opt => {
+            const option = document.createElement('option');
+            option.value = opt.value;
+            option.textContent = opt.label;
+            option.disabled = opt.disabled ?? false;
+            option.selected = opt.value === value;
+            select.appendChild(option);
+        });
+
+        select.addEventListener('change', (e) => {
+            const target = e.target as HTMLSelectElement;
+            this.state.value = target.value;
+            if (this._onChange) {
+                this._onChange(target.value);
+            }
+        });
+
+        wrapper.appendChild(select);
+        container.appendChild(wrapper);
+
+        // Add default styles if not already present
+        this._injectDefaultStyles();
+
+        return this;
+    }
+
+    private _injectDefaultStyles(): void {
+        const styleId = 'jux-select-styles';
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+            .jux-select {
+                margin-bottom: 16px;
+            }
+
+            .jux-select-label {
+                display: block;
+                margin-bottom: 6px;
+                font-weight: 500;
+                color: #374151;
+            }
+
+            .jux-select-element {
+                width: 100%;
+                padding: 8px 12px;
+                border: 1px solid #d1d5db;
+                border-radius: 6px;
+                font-size: 14px;
+                background: white;
+                cursor: pointer;
+                transition: border-color 0.2s;
+                box-sizing: border-box;
+            }
+
+            .jux-select-element:focus {
+                outline: none;
+                border-color: #3b82f6;
+                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+            }
+
+            .jux-select-element:disabled {
+                background-color: #f3f4f6;
+                cursor: not-allowed;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+
+    renderTo(juxComponent: any): this {
+        if (!juxComponent?._id) {
+            throw new Error('Select.renderTo: Invalid component');
+        }
+        return this.render(`#${juxComponent._id}`);
+    }
+}
+
+export function select(id: string, options: SelectOptions = {}): Select {
+    return new Select(id, options);
+}

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',
+      width: options.width ?? '300px',
       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);
 }