juxscript 1.0.0

package/lib/components/input.ts

@@ -0,0 +1,175 @@
+import { Reactive, getOrCreateContainer } from './reactivity.js';
+
+/**
+ * Input component options
+ */
+export interface InputOptions {
+  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+  label?: string;
+  placeholder?: string;
+  value?: string;
+  required?: boolean;
+  disabled?: boolean;
+  onChange?: (value: string) => void;
+}
+
+/**
+ * Input component state
+ */
+type InputState = {
+  type: string;
+  label: string;
+  placeholder: string;
+  value: string;
+  required: boolean;
+  disabled: boolean;
+  onChange: ((value: string) => void) | null;
+};
+
+/**
+ * Input component
+ * 
+ * Usage:
+ *   const input = jux.input('myInput', {
+ *     label: 'Email',
+ *     type: 'email',
+ *     placeholder: 'Enter your email',
+ *     onChange: (value) => console.log(value)
+ *   });
+ *   input.render();
+ */
+export class Input extends Reactive {
+  state!: InputState;
+  container: HTMLElement | null = null;
+  
+  constructor(componentId: string, options: InputOptions = {}) {
+    super();
+    this._setComponentId(componentId);
+    
+    this.state = this._createReactiveState({
+      type: options.type ?? 'text',
+      label: options.label ?? '',
+      placeholder: options.placeholder ?? '',
+      value: options.value ?? '',
+      required: options.required ?? false,
+      disabled: options.disabled ?? false,
+      onChange: options.onChange ?? null
+    }) as InputState;
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  type(value: string): this {
+    this.state.type = value;
+    return this;
+  }
+
+  label(value: string): this {
+    this.state.label = value;
+    return this;
+  }
+
+  placeholder(value: string): this {
+    this.state.placeholder = value;
+    return this;
+  }
+
+  value(value: string): this {
+    this.state.value = value;
+    return this;
+  }
+
+  required(value: boolean): this {
+    this.state.required = value;
+    return this;
+  }
+
+  disabled(value: boolean): this {
+    this.state.disabled = value;
+    return this;
+  }
+
+  onChange(callback: (value: string) => void): this {
+    this.state.onChange = callback;
+    return this;
+  }
+
+  /* -------------------------
+   * Render
+   * ------------------------- */
+
+  render(targetId?: string): this {
+    let container: HTMLElement;
+    
+    if (targetId) {
+      const target = document.querySelector(targetId);
+      if (!target || !(target instanceof HTMLElement)) {
+        throw new Error(`Input: Target element "${targetId}" not found`);
+      }
+      container = target;
+    } else {
+      container = getOrCreateContainer(this._componentId) as HTMLElement;
+    }
+    
+    this.container = container;
+    const { type, label, placeholder, value, required, disabled, onChange } = this.state;
+    
+    const wrapper = document.createElement('div');
+    wrapper.className = 'jux-input-wrapper';
+    wrapper.id = this._componentId;
+    
+    if (label) {
+      const labelEl = document.createElement('label');
+      labelEl.className = 'jux-input-label';
+      labelEl.textContent = label;
+      labelEl.setAttribute('for', `${this._componentId}-input`);
+      wrapper.appendChild(labelEl);
+    }
+    
+    const input = document.createElement('input');
+    input.id = `${this._componentId}-input`;
+    input.className = 'jux-input';
+    input.type = type;
+    input.placeholder = placeholder;
+    input.value = value;
+    input.required = required;
+    input.disabled = disabled;
+    
+    wrapper.appendChild(input);
+    container.appendChild(wrapper);
+    
+    // Event binding - onChange
+    if (onChange) {
+      input.addEventListener('input', (e) => {
+        const target = e.target as HTMLInputElement;
+        onChange(target.value);
+      });
+    }
+    
+    return this;
+  }
+
+  /**
+   * Render to another Jux component's container
+   */
+  renderTo(juxComponent: any): this {
+    if (!juxComponent || typeof juxComponent !== 'object') {
+      throw new Error('Input.renderTo: Invalid component - not an object');
+    }
+    
+    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
+      throw new Error('Input.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    }
+    
+    return this.render(`#${juxComponent._componentId}`);
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function input(componentId: string, options: InputOptions = {}): Input {
+  return new Input(componentId, options);
+}

package/lib/components/layout.ts

@@ -0,0 +1,113 @@
+import { ErrorHandler } from './error-handler.js';
+
+/**
+ * Layout - Load a JUX layout file
+ * Auto-loads when file is set
+ */
+export class Layout {
+  private _juxFile: string;
+  private _loaded: boolean = false;
+
+  constructor(juxFile: string = '') {
+    this._juxFile = juxFile;
+    
+    // Auto-load if file provided
+    if (juxFile) {
+      this.load();
+    }
+  }
+
+  /**
+   * Set the JUX file to load
+   */
+  file(juxFile: string): this {
+    this._juxFile = juxFile;
+    this._loaded = false;
+    this.load();
+    return this;
+  }
+
+  /**
+   * Get the current JUX file path
+   */
+  getFile(): string {
+    return this._juxFile;
+  }
+
+  /**
+   * Normalize path to absolute URL from site root
+   */
+  private normalizePath(path: string): string {
+    // If already a full URL, return as-is
+    if (path.startsWith('http://') || path.startsWith('https://')) {
+      return path;
+    }
+    
+    // Convert relative path to absolute
+    // Remove leading './' if present
+    let cleanPath = path.replace(/^\.\//, '');
+    
+    // Ensure it starts with /
+    if (!cleanPath.startsWith('/')) {
+      cleanPath = '/' + cleanPath;
+    }
+    
+    // Return absolute URL with origin
+    return new URL(cleanPath, window.location.origin).href;
+  }
+
+  /**
+   * Load the layout
+   * This will dynamically import the compiled JS file
+   */
+  async load(): Promise<this> {
+    if (typeof document === 'undefined') {
+      return this;
+    }
+
+    try {
+      // Convert .jux to .js for the compiled output
+      let jsFile = this._juxFile.replace(/\.jux$/, '.js');
+      
+      // Normalize to absolute URL for browser import
+      jsFile = this.normalizePath(jsFile);
+      
+      console.log(`Loading layout: ${jsFile}`);
+      
+      // Dynamic import of the layout module
+      const layoutModule = await import(jsFile);
+      
+      // If the module has an init or default export, call it
+      if (typeof layoutModule.default === 'function') {
+        await layoutModule.default();
+      } else if (typeof layoutModule.init === 'function') {
+        await layoutModule.init();
+      }
+      
+      this._loaded = true;
+      console.log(`✓ Layout loaded: ${this._juxFile}`);
+    } catch (error: any) {
+      ErrorHandler.captureError({
+        component: 'Layout',
+        method: 'load',
+        message: `Failed to load layout: ${error.message}`,
+        stack: error.stack,
+        timestamp: new Date(),
+        context: { 
+          juxFile: this._juxFile,
+          jsFile: this._juxFile.replace(/\.jux$/, '.js'),
+          errorCode: error.code
+        }
+      });
+    }
+
+    return this;
+  }
+
+  /**
+   * Check if layout is loaded
+   */
+  isLoaded(): boolean {
+    return this._loaded;
+  }
+}

package/lib/components/list.ts

@@ -0,0 +1,392 @@
+import { Reactive, getOrCreateContainer } from './reactivity.js';
+
+/**
+ * List item interface
+ */
+export interface ListItem {
+  icon?: string;
+  title?: string;
+  body?: string;
+  type?: 'success' | 'warning' | 'error' | 'info' | 'default' | string;
+  metadata?: string;
+}
+
+/**
+ * List component options
+ */
+export interface ListOptions {
+  items?: ListItem[];
+  header?: string;
+  gap?: string;
+  direction?: 'vertical' | 'horizontal';
+  selectable?: boolean;
+  selectedIndex?: number | null;
+  onItemClick?: (item: ListItem, index: number, e: Event) => void;
+  onItemDoubleClick?: (item: ListItem, index: number, e: Event) => void;
+}
+
+/**
+ * List component state
+ */
+type ListState = {
+  items: ListItem[];
+  header: string;
+  gap: string;
+  direction: string;
+  selectable: boolean;
+  selectedIndex: number | null;
+};
+
+/**
+ * List component - renders a list of items with optional header
+ * 
+ * Usage:
+ *   const myList = jux.list('myList', { 
+ *     header: '✓ Accomplishments',
+ *     items: [
+ *       { icon: '✓', title: 'Task 1', body: 'Description', type: 'success' },
+ *       { icon: '⚠️', title: 'Task 2', body: 'Description', type: 'warning' }
+ *     ],
+ *     gap: '0.75rem',
+ *     selectable: true,
+ *     onItemClick: (item, index) => console.log('Clicked:', item, index)
+ *   });
+ *   myList.render();
+ *   
+ *   // Add item
+ *   myList.add({ icon: '🎉', title: 'New Task', body: 'Done!', type: 'success' });
+ *   
+ *   // Remove item by index
+ *   myList.remove(1);
+ *   
+ *   // Move item from index 0 to index 2
+ *   myList.move(0, 2);
+ */
+export class List extends Reactive {
+  state!: ListState;
+  container: HTMLElement | null = null;
+  private _onItemClick: ((item: ListItem, index: number, e: Event) => void) | null;
+  private _onItemDoubleClick: ((item: ListItem, index: number, e: Event) => void) | null;
+
+  constructor(componentId: string, options: ListOptions = {}) {
+    super();
+    this._setComponentId(componentId);
+    
+    this.state = this._createReactiveState({
+      items: options.items ?? [],
+      header: options.header ?? '',
+      gap: options.gap ?? '0.5rem',
+      direction: options.direction ?? 'vertical',
+      selectable: options.selectable ?? false,
+      selectedIndex: options.selectedIndex ?? null
+    }) as ListState;
+    
+    this._onItemClick = options.onItemClick ?? null;
+    this._onItemDoubleClick = options.onItemDoubleClick ?? null;
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  items(value: ListItem[]): this {
+    this.state.items = value;
+    return this;
+  }
+
+  header(value: string): this {
+    this.state.header = value;
+    return this;
+  }
+
+  gap(value: string): this {
+    this.state.gap = value;
+    return this;
+  }
+
+  direction(value: 'vertical' | 'horizontal'): this {
+    this.state.direction = value;
+    return this;
+  }
+
+  selectable(value: boolean): this {
+    this.state.selectable = value;
+    return this;
+  }
+
+  /* -------------------------
+   * List operations
+   * ------------------------- */
+
+  add(item: ListItem, index?: number): this {
+    const items = [...this.state.items];
+    
+    if (typeof index === 'number' && index >= 0 && index <= items.length) {
+      items.splice(index, 0, item);
+    } else {
+      index = items.length;
+      items.push(item);
+    }
+    
+    this.state.items = items;
+    this.emit('itemAdded', { item, index });
+    this._updateDOM();
+    return this;
+  }
+
+  remove(index: number): this {
+    if (typeof index !== 'number' || index < 0 || index >= this.state.items.length) {
+      console.error(`List: Invalid index ${index} for remove`);
+      return this;
+    }
+    
+    const items = [...this.state.items];
+    const removed = items.splice(index, 1)[0];
+    
+    // Adjust selected index
+    if (this.state.selectedIndex !== null) {
+      if (this.state.selectedIndex === index) {
+        this.state.selectedIndex = null;
+      } else if (this.state.selectedIndex > index) {
+        this.state.selectedIndex--;
+      }
+    }
+    
+    this.state.items = items;
+    this.emit('itemRemoved', { item: removed, index });
+    this._updateDOM();
+    return this;
+  }
+
+  move(fromIndex: number, toIndex: number): this {
+    const items = [...this.state.items];
+    
+    if (fromIndex < 0 || fromIndex >= items.length) {
+      console.error(`List: Invalid fromIndex ${fromIndex}`);
+      return this;
+    }
+    
+    if (toIndex < 0 || toIndex >= items.length) {
+      console.error(`List: Invalid toIndex ${toIndex}`);
+      return this;
+    }
+    
+    if (fromIndex === toIndex) {
+      return this;
+    }
+    
+    const [movedItem] = items.splice(fromIndex, 1);
+    items.splice(toIndex, 0, movedItem);
+    
+    // Adjust selected index
+    if (this.state.selectedIndex !== null) {
+      if (this.state.selectedIndex === fromIndex) {
+        this.state.selectedIndex = toIndex;
+      } else if (fromIndex < this.state.selectedIndex && toIndex >= this.state.selectedIndex) {
+        this.state.selectedIndex--;
+      } else if (fromIndex > this.state.selectedIndex && toIndex <= this.state.selectedIndex) {
+        this.state.selectedIndex++;
+      }
+    }
+    
+    this.state.items = items;
+    this.emit('itemMoved', { item: movedItem, fromIndex, toIndex });
+    this._updateDOM();
+    return this;
+  }
+
+  select(index: number): this {
+    if (index < 0 || index >= this.state.items.length) {
+      console.error(`List: Invalid index ${index} for select`);
+      return this;
+    }
+    
+    const previousIndex = this.state.selectedIndex;
+    this.state.selectedIndex = index;
+    
+    this.emit('itemSelect', { 
+      item: this.state.items[index], 
+      index,
+      previousIndex 
+    });
+    
+    this._updateDOM();
+    return this;
+  }
+
+  deselect(): this {
+    if (this.state.selectedIndex === null) {
+      return this;
+    }
+    
+    const previousIndex = this.state.selectedIndex;
+    this.state.selectedIndex = null;
+    
+    this.emit('itemDeselect', { previousIndex });
+    this._updateDOM();
+    return this;
+  }
+
+  getSelected(): { item: ListItem; index: number } | null {
+    if (this.state.selectedIndex === null) {
+      return null;
+    }
+    return {
+      item: this.state.items[this.state.selectedIndex],
+      index: this.state.selectedIndex
+    };
+  }
+
+  /* -------------------------
+   * Helpers
+   * ------------------------- */
+
+  private _updateDOM(): void {
+    if (!this.container) return;
+    
+    // Clear and re-render
+    this.container.innerHTML = '';
+    this._renderContent();
+  }
+
+  private _renderContent(): void {
+    if (!this.container) return;
+    
+    const { items, header, gap, direction, selectable, selectedIndex } = this.state;
+    
+    const wrapper = document.createElement('div');
+    wrapper.className = 'jux-list-wrapper';
+    wrapper.id = this._componentId;
+    
+    // Header
+    if (header) {
+      const headerEl = document.createElement('div');
+      headerEl.className = 'jux-list-header';
+      headerEl.textContent = header;
+      wrapper.appendChild(headerEl);
+    }
+    
+    // List container
+    const listContainer = document.createElement('div');
+    listContainer.className = `jux-list jux-list-${direction}`;
+    listContainer.style.gap = gap;
+    
+    // Render items
+    items.forEach((item, index) => {
+      const itemEl = document.createElement('div');
+      itemEl.className = `jux-list-item jux-list-item-${item.type || 'default'}`;
+      
+      if (selectable && selectedIndex === index) {
+        itemEl.classList.add('jux-list-item-selected');
+      }
+      
+      // Icon
+      if (item.icon) {
+        const iconEl = document.createElement('span');
+        iconEl.className = 'jux-list-item-icon';
+        iconEl.textContent = item.icon;
+        itemEl.appendChild(iconEl);
+      }
+      
+      // Content
+      const contentEl = document.createElement('div');
+      contentEl.className = 'jux-list-item-content';
+      
+      if (item.title) {
+        const titleEl = document.createElement('div');
+        titleEl.className = 'jux-list-item-title';
+        titleEl.textContent = item.title;
+        contentEl.appendChild(titleEl);
+      }
+      
+      if (item.body) {
+        const bodyEl = document.createElement('div');
+        bodyEl.className = 'jux-list-item-body';
+        bodyEl.textContent = item.body;
+        contentEl.appendChild(bodyEl);
+      }
+      
+      itemEl.appendChild(contentEl);
+      
+      // Metadata
+      if (item.metadata) {
+        const metadataEl = document.createElement('span');
+        metadataEl.className = 'jux-list-item-metadata';
+        metadataEl.textContent = item.metadata;
+        itemEl.appendChild(metadataEl);
+      }
+      
+      listContainer.appendChild(itemEl);
+      
+      // Event binding - click handlers
+      itemEl.addEventListener('click', (e) => {
+        if (selectable) {
+          this.select(index);
+        }
+        
+        this.emit('itemClick', { item, index, event: e });
+        
+        if (this._onItemClick) {
+          this._onItemClick(item, index, e);
+        }
+      });
+      
+      if (this._onItemDoubleClick) {
+        itemEl.addEventListener('dblclick', (e) => {
+          this.emit('itemDoubleClick', { item, index, event: e });
+          this._onItemDoubleClick!(item, index, e);
+        });
+      }
+    });
+    
+    wrapper.appendChild(listContainer);
+    this.container.appendChild(wrapper);
+  }
+
+  /* -------------------------
+   * Render
+   * ------------------------- */
+
+  render(targetId?: string): this {
+    let container: HTMLElement;
+    
+    if (targetId) {
+      const target = document.querySelector(targetId);
+      if (!target || !(target instanceof HTMLElement)) {
+        throw new Error(`List: Target element "${targetId}" not found`);
+      }
+      container = target;
+    } else {
+      container = getOrCreateContainer(this._componentId) as HTMLElement;
+    }
+    
+    this.container = container;
+    this.container.innerHTML = '';
+    
+    this._renderContent();
+    
+    return this;
+  }
+
+  /**
+   * Render to another Jux component's container
+   */
+  renderTo(juxComponent: any): this {
+    if (!juxComponent || typeof juxComponent !== 'object') {
+      throw new Error('List.renderTo: Invalid component - not an object');
+    }
+    
+    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
+      throw new Error('List.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    }
+    
+    return this.render(`#${juxComponent._componentId}`);
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function list(componentId: string, options: ListOptions = {}): List {
+  return new List(componentId, options);
+}