juxscript 1.0.0

package/lib/components/style.ts

@@ -0,0 +1,129 @@
+import { ErrorHandler } from './error-handler.js';
+
+export class Style {
+  private _content: string = '';
+  private _url: string = '';
+  private _isUrl: boolean = false;
+  private _element: HTMLLinkElement | 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) {
+      this.render();
+    }
+  }
+
+  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: 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: 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(): this {
+    if (typeof document === 'undefined') {
+      return this;
+    }
+
+    try {
+      // 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;
+      }
+    } 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,
+          error: 'runtime_exception'
+        }
+      });
+    }
+
+    return this;
+  }
+
+  remove(): this {
+    if (this._element && this._element.parentNode) {
+      this._element.parentNode.removeChild(this._element);
+      this._element = null;
+    }
+    return this;
+  }
+}

package/lib/components/table.ts

@@ -0,0 +1,279 @@
+import { Reactive, getOrCreateContainer } from './reactivity.js';
+
+/**
+ * Table column configuration
+ */
+export interface TableColumn {
+  key: string;
+  label: string;
+  width?: string;
+  align?: 'left' | 'center' | 'right';
+  renderCell?: (value: any, row: any) => string | HTMLElement;
+}
+
+/**
+ * Table component options
+ */
+export interface TableOptions {
+  columns?: TableColumn[];
+  data?: any[];
+  striped?: boolean;
+  hoverable?: boolean;
+  bordered?: boolean;
+  allowHtml?: boolean;  // Enable HTML rendering in cells
+}
+
+/**
+ * Table component state
+ */
+type TableState = {
+  columns: TableColumn[];
+  data: any[];
+  striped: boolean;
+  hoverable: boolean;
+  bordered: boolean;
+  allowHtml: boolean;
+};
+
+/**
+ * Table component
+ *
+ * Usage:
+ *   // Auto-generate columns from data
+ *   const table = jux.table('myTable', {
+ *     data: [
+ *       { name: 'Alice', age: 30 },
+ *       { name: 'Bob', age: 25 }
+ *     ],
+ *     striped: true,
+ *     allowHtml: true  // Enable HTML rendering
+ *   });
+ *   table.render();
+ *
+ *   // Or specify columns explicitly
+ *   const table = jux.table('myTable', {
+ *     columns: [
+ *       { key: 'name', label: 'Name' },
+ *       { key: 'age', label: 'Age', align: 'center' }
+ *     ],
+ *     data: [
+ *       { name: 'Alice', age: 30 },
+ *       { name: 'Bob', age: 25 }
+ *     ]
+ *   });
+ *   table.render();
+ */
+export class Table extends Reactive {
+  state!: TableState;
+  container: HTMLElement | null = null;
+
+  constructor(componentId: string, options: TableOptions = {}) {
+    super();
+    this._setComponentId(componentId);
+
+    this.state = this._createReactiveState({
+      columns: options.columns ?? [],
+      data: options.data ?? [],
+      striped: options.striped ?? false,
+      hoverable: options.hoverable ?? true,
+      bordered: options.bordered ?? false,
+      allowHtml: options.allowHtml ?? true  // Default to true for flexibility
+    }) as TableState;
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  columns(value: TableColumn[]): this {
+    this.state.columns = value;
+    return this;
+  }
+
+  data(value: any[]): this {
+    this.state.data = value;
+    return this;
+  }
+
+  striped(value: boolean): this {
+    this.state.striped = value;
+    return this;
+  }
+
+  hoverable(value: boolean): this {
+    this.state.hoverable = value;
+    return this;
+  }
+
+  bordered(value: boolean): this {
+    this.state.bordered = value;
+    return this;
+  }
+
+  allowHtml(value: boolean): this {
+    this.state.allowHtml = value;
+    return this;
+  }
+
+  /* -------------------------
+   * Helpers
+   * ------------------------- */
+
+  /**
+   * Auto-generate columns from data
+   */
+  private _autoGenerateColumns(data: any[]): TableColumn[] {
+    if (!data || data.length === 0) {
+      return [];
+    }
+
+    const firstRow = data[0];
+    const keys = Object.keys(firstRow);
+
+    return keys.map(key => ({
+      key,
+      label: this._formatLabel(key)
+    }));
+  }
+
+  /**
+   * Format column label from key
+   * Examples:
+   *   'name' -> 'Name'
+   *   'firstName' -> 'First Name'
+   *   'user_id' -> 'User Id'
+   */
+  private _formatLabel(key: string): string {
+    // Split on camelCase or snake_case
+    const words = key
+      .replace(/([A-Z])/g, ' $1') // camelCase -> camel Case
+      .replace(/_/g, ' ')          // snake_case -> snake case
+      .trim()
+      .split(/\s+/);
+
+    // Capitalize first letter of each word
+    return words
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+      .join(' ');
+  }
+
+  /* -------------------------
+   * Render
+   * ------------------------- */
+
+  render(targetId?: string): this {
+    let container: HTMLElement;
+
+    if (targetId) {
+      const target = document.querySelector(targetId);
+      if (!target || !(target instanceof HTMLElement)) {
+        throw new Error(`Table: Target element "${targetId}" not found`);
+      }
+      container = target;
+    } else {
+      container = getOrCreateContainer(this._componentId) as HTMLElement;
+    }
+
+    this.container = container;
+    let { columns, data, striped, hoverable, bordered, allowHtml } = this.state;
+
+    // Auto-generate columns if not provided
+    if (columns.length === 0 && data.length > 0) {
+      columns = this._autoGenerateColumns(data);
+    }
+
+    const wrapper = document.createElement('div');
+    wrapper.className = 'jux-table-wrapper';
+    wrapper.id = this._componentId;
+
+    const table = document.createElement('table');
+    table.className = 'jux-table';
+
+    if (striped) table.classList.add('jux-table-striped');
+    if (hoverable) table.classList.add('jux-table-hoverable');
+    if (bordered) table.classList.add('jux-table-bordered');
+
+    // Table header
+    const thead = document.createElement('thead');
+    const headerRow = document.createElement('tr');
+
+    columns.forEach(col => {
+      const th = document.createElement('th');
+      th.textContent = col.label;
+      if (col.width) th.style.width = col.width;
+      if (col.align) th.style.textAlign = col.align;
+      headerRow.appendChild(th);
+    });
+
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+
+    // Table body
+    const tbody = document.createElement('tbody');
+
+    data.forEach(row => {
+      const tr = document.createElement('tr');
+
+      columns.forEach(col => {
+        const td = document.createElement('td');
+        if (col.align) td.style.textAlign = col.align;
+
+        // Get cell value
+        const cellValue = row[col.key] ?? '';
+
+        // Custom render function takes precedence
+        if (col.renderCell && typeof col.renderCell === 'function') {
+          const rendered = col.renderCell(cellValue, row);
+          if (rendered instanceof HTMLElement) {
+            td.appendChild(rendered);
+          } else if (typeof rendered === 'string') {
+            if (allowHtml) {
+              td.innerHTML = rendered;
+            } else {
+              td.textContent = rendered;
+            }
+          }
+        } else {
+          // Default rendering
+          if (allowHtml && typeof cellValue === 'string' && cellValue.includes('<')) {
+            td.innerHTML = cellValue;
+          } else {
+            td.textContent = String(cellValue);
+          }
+        }
+
+        tr.appendChild(td);
+      });
+
+      tbody.appendChild(tr);
+    });
+
+    table.appendChild(tbody);
+    wrapper.appendChild(table);
+    container.appendChild(wrapper);
+
+    return this;
+  }
+
+  /**
+   * Render to another Jux component's container
+   */
+  renderTo(juxComponent: any): this {
+    if (!juxComponent || typeof juxComponent !== 'object') {
+      throw new Error('Table.renderTo: Invalid component - not an object');
+    }
+
+    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
+      throw new Error('Table.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    }
+
+    return this.render(`#${juxComponent._componentId}`);
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function table(componentId: string, options: TableOptions = {}): Table {
+  return new Table(componentId, options);
+}

package/lib/components/tabs.ts

@@ -0,0 +1,191 @@
+import { Reactive, getOrCreateContainer } from './reactivity.js';
+
+/**
+ * Tab configuration
+ */
+export interface Tab {
+  id: string;
+  label: string;
+  content: string | (() => string);
+}
+
+/**
+ * Tabs component options
+ */
+export interface TabsOptions {
+  tabs?: Tab[];
+  activeTab?: string;
+}
+
+/**
+ * Tabs component state
+ */
+type TabsState = {
+  tabs: Tab[];
+  activeTab: string;
+};
+
+/**
+ * Tabs component
+ * 
+ * Usage:
+ *   const tabs = jux.tabs('myTabs', {
+ *     tabs: [
+ *       { id: 'tab1', label: 'Tab 1', content: 'Content 1' },
+ *       { id: 'tab2', label: 'Tab 2', content: 'Content 2' }
+ *     ]
+ *   });
+ *   await tabs.render();
+ */
+export class Tabs extends Reactive {
+  state!: TabsState;
+  container: HTMLElement | null = null;
+  
+  constructor(componentId: string, options: TabsOptions = {}) {
+    super();
+    this._setComponentId(componentId);
+    
+    const tabs = options.tabs ?? [];
+    const activeTab = options.activeTab ?? (tabs.length > 0 ? tabs[0].id : '');
+    
+    this.state = this._createReactiveState({
+      tabs,
+      activeTab
+    }) as TabsState;
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  tabs(value: Tab[]): this {
+    this.state.tabs = value;
+    return this;
+  }
+
+  addTab(tab: Tab): this {
+    this.state.tabs.push(tab);
+    return this;
+  }
+
+  activeTab(value: string): this {
+    this.state.activeTab = value;
+    return this;
+  }
+
+  /* -------------------------
+   * Render
+   * ------------------------- */
+
+  async render(targetId?: string): Promise<this> {
+    let container: HTMLElement;
+    
+    if (targetId) {
+      const target = document.querySelector(targetId);
+      if (!target || !(target instanceof HTMLElement)) {
+        throw new Error(`Tabs: Target element "${targetId}" not found`);
+      }
+      container = target;
+    } else {
+      container = getOrCreateContainer(this._componentId) as HTMLElement;
+    }
+    
+    this.container = container;
+    const { tabs, activeTab } = this.state;
+    
+    const wrapper = document.createElement('div');
+    wrapper.className = 'jux-tabs';
+    wrapper.id = this._componentId;
+    
+    // Tab headers
+    const tabHeaders = document.createElement('div');
+    tabHeaders.className = 'jux-tabs-header';
+    
+    tabs.forEach(tab => {
+      const tabBtn = document.createElement('button');
+      tabBtn.className = 'jux-tab-button';
+      tabBtn.textContent = tab.label;
+      
+      if (tab.id === activeTab) {
+        tabBtn.classList.add('jux-tab-button-active');
+      }
+      
+      tabHeaders.appendChild(tabBtn);
+      
+      // Event binding - tab click
+      tabBtn.addEventListener('click', () => {
+        this.state.activeTab = tab.id;
+        
+        // Update active states
+        tabHeaders.querySelectorAll('.jux-tab-button').forEach(btn => {
+          btn.classList.remove('jux-tab-button-active');
+        });
+        tabBtn.classList.add('jux-tab-button-active');
+        
+        // Update content
+        tabPanels.querySelectorAll('.jux-tab-panel').forEach(panel => {
+          panel.classList.remove('jux-tab-panel-active');
+        });
+        const activePanel = tabPanels.querySelector(`[data-tab-id="${tab.id}"]`);
+        if (activePanel) {
+          activePanel.classList.add('jux-tab-panel-active');
+        }
+        
+        this.emit('tabChange', { tabId: tab.id });
+      });
+    });
+    
+    wrapper.appendChild(tabHeaders);
+    
+    // Tab panels
+    const tabPanels = document.createElement('div');
+    tabPanels.className = 'jux-tabs-panels';
+    
+    for (const tab of tabs) {
+      const panel = document.createElement('div');
+      panel.className = 'jux-tab-panel';
+      panel.setAttribute('data-tab-id', tab.id);
+      
+      if (tab.id === activeTab) {
+        panel.classList.add('jux-tab-panel-active');
+      }
+      
+      // Render content
+      if (typeof tab.content === 'function') {
+        panel.innerHTML = tab.content();
+      } else {
+        panel.innerHTML = tab.content;
+      }
+      
+      tabPanels.appendChild(panel);
+    }
+    
+    wrapper.appendChild(tabPanels);
+    container.appendChild(wrapper);
+    
+    this.emit('rendered');
+    return this;
+  }
+
+  /**
+   * Render to another Jux component's container
+   */
+  async renderTo(juxComponent: any): Promise<this> {
+    if (!juxComponent || typeof juxComponent !== 'object') {
+      throw new Error('Tabs.renderTo: Invalid component - not an object');
+    }
+    
+    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
+      throw new Error('Tabs.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    }
+    
+    return this.render(`#${juxComponent._componentId}`);
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function tabs(componentId: string, options: TabsOptions = {}): Tabs {
+  return new Tabs(componentId, options);
+}

package/lib/components/theme.ts

@@ -0,0 +1,97 @@
+import { ErrorHandler } from './error-handler.js';
+
+/**
+ * Theme - Load and apply CSS themes
+ * 
+ * Usage:
+ *   jux.theme('dark');                    // Load vendor theme from lib/themes/
+ *   jux.theme('./my-theme.css');          // Load custom theme (fully qualified path)
+ *   jux.theme('/themes/custom.css');      // Load custom theme (absolute path)
+ */
+
+interface ThemeConfig {
+  dir: string;
+}
+
+export class Theme {
+  private currentTheme: string | null = null;
+  private themeLink: HTMLLinkElement | null = null;
+  private config: ThemeConfig;
+
+  constructor(config?: ThemeConfig) {
+    // Default config if not provided
+    this.config = config || {
+      dir: './lib/themes/'
+    };
+  }
+
+  /**
+   * Load a theme
+   * 
+   * @param name - Theme name (e.g., 'dark') or full path to CSS file (e.g., './custom.css')
+   */
+  load(name: string): this {
+    if (typeof document === 'undefined') {
+      return this;
+    }
+
+    let themePath: string;
+    let themeName: string;
+
+    // Check if it's a path (contains / or .)
+    if (name.includes('/') || name.includes('.')) {
+      // Custom theme - use as-is
+      themePath = name;
+      themeName = name.split('/').pop()?.replace('.css', '') || 'custom';
+    } else {
+      // Vendor theme - look in config directory
+      themePath = `${this.config.dir}${name}.css`;
+      themeName = name;
+    }
+
+    // Remove existing theme link if present
+    if (this.themeLink) {
+      this.themeLink.remove();
+    }
+
+    // Create new link element
+    this.themeLink = document.createElement('link');
+    this.themeLink.rel = 'stylesheet';
+    this.themeLink.href = themePath;
+    this.themeLink.dataset.juxTheme = themeName;
+
+    // Handle load errors
+    this.themeLink.onerror = () => {
+      ErrorHandler.captureError({
+        component: 'Theme',
+        method: 'load',
+        message: `Failed to load theme: ${themePath}`,
+        timestamp: new Date(),
+        context: { themePath, themeName }
+      });
+    };
+
+    // Insert in head
+    document.head.appendChild(this.themeLink);
+
+    // Update current theme
+    this.currentTheme = themeName;
+
+    // Update body data attribute for CSS targeting
+    document.body.dataset.theme = themeName;
+
+    console.log(`🎨 Theme loaded: ${themeName}`);
+
+    return this;
+  }
+}
+
+/**
+ * Factory helper
+ * 
+ * @param name - Theme name or path
+ */
+export function theme(name: string): Theme {
+  const themeInstance = new Theme();
+  return themeInstance.load(name);
+}