juxscript 1.0.0

package/lib/components/error-handler.ts

@@ -0,0 +1,285 @@
+/**
+ * ErrorHandler - Global error handler for JUX components
+ * Displays errors visually in the DOM for easy debugging
+ */
+
+export interface ComponentError {
+  component: string;
+  method: string;
+  message: string;
+  stack?: string;
+  timestamp: Date;
+  context?: any;
+}
+
+export class ErrorHandler {
+  private static errors: ComponentError[] = [];
+  private static errorContainer: HTMLDivElement | null = null;
+  private static enabled: boolean = true;
+
+  /**
+   * Initialize error handler
+   */
+  static init() {
+    if (typeof document === 'undefined') return;
+
+    // Create error container
+    this.errorContainer = document.createElement('div');
+    this.errorContainer.id = 'jux-error-container';
+    this.errorContainer.style.cssText = `
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      max-width: 500px;
+      max-height: 600px;
+      overflow-y: auto;
+      z-index: 999999;
+      font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+      font-size: 12px;
+    `;
+
+    document.body.appendChild(this.errorContainer);
+
+    // Listen for unhandled errors
+    window.addEventListener('error', (event) => {
+      this.captureError({
+        component: 'Global',
+        method: 'window.onerror',
+        message: event.message,
+        stack: event.error?.stack,
+        timestamp: new Date(),
+        context: { filename: event.filename, lineno: event.lineno, colno: event.colno }
+      });
+    });
+
+    // Listen for unhandled promise rejections
+    window.addEventListener('unhandledrejection', (event) => {
+      this.captureError({
+        component: 'Global',
+        method: 'unhandledrejection',
+        message: event.reason?.message || String(event.reason),
+        stack: event.reason?.stack,
+        timestamp: new Date(),
+        context: { promise: event.promise }
+      });
+    });
+  }
+
+  /**
+   * Capture and display an error
+   */
+  static captureError(error: ComponentError) {
+    if (!this.enabled) return;
+
+    this.errors.push(error);
+    this.renderError(error);
+    console.error(`[JUX Error] ${error.component}.${error.method}:`, error.message);
+  }
+
+  /**
+   * Render an error card in the DOM
+   */
+  private static renderError(error: ComponentError) {
+    if (!this.errorContainer) return;
+
+    const errorCard = document.createElement('div');
+    errorCard.style.cssText = `
+      background: linear-gradient(135deg, #1a1a1a 0%, #2a1a1a 100%);
+      border-left: 4px solid #ff4757;
+      border-radius: 8px;
+      padding: 16px;
+      margin-bottom: 12px;
+      box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
+      animation: slideIn 0.3s ease-out;
+    `;
+
+    const time = error.timestamp.toLocaleTimeString();
+
+    errorCard.innerHTML = `
+      <style>
+        @keyframes slideIn {
+          from {
+            transform: translateX(100%);
+            opacity: 0;
+          }
+          to {
+            transform: translateX(0);
+            opacity: 1;
+          }
+        }
+        .jux-error-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 8px;
+        }
+        .jux-error-title {
+          color: #ff4757;
+          font-weight: bold;
+          font-size: 13px;
+        }
+        .jux-error-time {
+          color: #666;
+          font-size: 11px;
+        }
+        .jux-error-location {
+          color: #ffa502;
+          font-size: 12px;
+          margin-bottom: 8px;
+        }
+        .jux-error-message {
+          color: #e0e0e0;
+          margin-bottom: 8px;
+          line-height: 1.4;
+        }
+        .jux-error-stack {
+          background: #0a0a0a;
+          padding: 8px;
+          border-radius: 4px;
+          color: #888;
+          font-size: 10px;
+          max-height: 150px;
+          overflow-y: auto;
+          margin-bottom: 8px;
+        }
+        .jux-error-context {
+          background: #0a0a0a;
+          padding: 8px;
+          border-radius: 4px;
+          color: #888;
+          font-size: 10px;
+        }
+        .jux-error-close {
+          background: #ff4757;
+          color: white;
+          border: none;
+          border-radius: 4px;
+          padding: 4px 12px;
+          cursor: pointer;
+          font-size: 11px;
+          float: right;
+        }
+        .jux-error-close:hover {
+          background: #ff6b7a;
+        }
+      </style>
+      <div class="jux-error-header">
+        <div class="jux-error-title">⚠️ Component Error</div>
+        <div class="jux-error-time">${time}</div>
+      </div>
+      <div class="jux-error-location">
+        ${error.component}.${error.method}()
+      </div>
+      <div class="jux-error-message">
+        ${this.escapeHtml(error.message)}
+      </div>
+      ${error.stack ? `
+        <details>
+          <summary style="color: #888; cursor: pointer; margin-bottom: 8px;">Stack Trace</summary>
+          <div class="jux-error-stack">${this.escapeHtml(error.stack)}</div>
+        </details>
+      ` : ''}
+      ${error.context ? `
+        <details>
+          <summary style="color: #888; cursor: pointer; margin-bottom: 8px;">Context</summary>
+          <div class="jux-error-context">${this.escapeHtml(JSON.stringify(error.context, null, 2))}</div>
+        </details>
+      ` : ''}
+      <button class="jux-error-close">Dismiss</button>
+    `;
+
+    // Add close button handler
+    const closeBtn = errorCard.querySelector('.jux-error-close');
+    closeBtn?.addEventListener('click', () => {
+      errorCard.style.animation = 'slideOut 0.3s ease-out';
+      setTimeout(() => errorCard.remove(), 300);
+    });
+
+    this.errorContainer.appendChild(errorCard);
+  }
+
+  /**
+   * Escape HTML to prevent XSS
+   */
+  private static escapeHtml(str: string): string {
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  }
+
+  /**
+   * Clear all errors
+   */
+  static clear() {
+    this.errors = [];
+    if (this.errorContainer) {
+      this.errorContainer.innerHTML = '';
+    }
+  }
+
+  /**
+   * Enable/disable error handler
+   */
+  static setEnabled(enabled: boolean) {
+    this.enabled = enabled;
+  }
+
+  /**
+   * Get all captured errors
+   */
+  static getErrors(): ComponentError[] {
+    return [...this.errors];
+  }
+}
+
+/**
+ * Utility function to wrap component methods with error handling
+ */
+export function withErrorHandling<T extends (...args: any[]) => any>(
+  component: string,
+  method: string,
+  fn: T,
+  context?: any
+): T {
+  return ((...args: any[]) => {
+    try {
+      const result = fn(...args);
+      
+      // Handle async functions
+      if (result instanceof Promise) {
+        return result.catch((error) => {
+          ErrorHandler.captureError({
+            component,
+            method,
+            message: error.message || String(error),
+            stack: error.stack,
+            timestamp: new Date(),
+            context
+          });
+          throw error;
+        });
+      }
+      
+      return result;
+    } catch (error: any) {
+      ErrorHandler.captureError({
+        component,
+        method,
+        message: error.message || String(error),
+        stack: error.stack,
+        timestamp: new Date(),
+        context
+      });
+      throw error;
+    }
+  }) as T;
+}
+
+// Initialize on import
+if (typeof document !== 'undefined') {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => ErrorHandler.init());
+  } else {
+    ErrorHandler.init();
+  }
+}

package/lib/components/footer.ts

@@ -0,0 +1,146 @@
+import { Reactive, getOrCreateContainer } from './reactivity.js';
+
+/**
+ * Footer component options
+ */
+export interface FooterOptions {
+  content?: string;
+  copyright?: string;
+  links?: Array<{ label: string; href: string }>;
+}
+
+/**
+ * Footer component state
+ */
+type FooterState = {
+  content: string;
+  copyright: string;
+  links: Array<{ label: string; href: string }>;
+};
+
+/**
+ * Footer component
+ *
+ * Usage:
+ *   const footer = jux.footer('myFooter', {
+ *     copyright: '© 2025 My Company',
+ *     links: [
+ *       { label: 'Privacy', href: '/privacy' },
+ *       { label: 'Terms', href: '/terms' }
+ *     ]
+ *   });
+ *   footer.render('#appfooter');
+ */
+export class Footer extends Reactive {
+  state!: FooterState;
+  container: HTMLElement | null = null;
+
+  constructor(componentId: string, options: FooterOptions = {}) {
+    super();
+    this._setComponentId(componentId);
+
+    this.state = this._createReactiveState({
+      content: options.content ?? '',
+      copyright: options.copyright ?? '',
+      links: options.links ?? []
+    }) as FooterState;
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  content(value: string): this {
+    this.state.content = value;
+    return this;
+  }
+
+  copyright(value: string): this {
+    this.state.copyright = value;
+    return this;
+  }
+
+  links(value: Array<{ label: string; href: string }>): this {
+    this.state.links = value;
+    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(`Footer: Target element "${targetId}" not found`);
+      }
+      container = target;
+    } else {
+      container = getOrCreateContainer(this._componentId) as HTMLElement;
+    }
+
+    this.container = container;
+    const { content, copyright, links } = this.state;
+
+    const footer = document.createElement('footer');
+    footer.className = 'jux-footer';
+    footer.id = this._componentId;
+
+    if (content) {
+      const contentEl = document.createElement('div');
+      contentEl.className = 'jux-footer-content';
+      contentEl.textContent = content;
+      footer.appendChild(contentEl);
+    }
+
+    if (links.length > 0) {
+      const linksEl = document.createElement('div');
+      linksEl.className = 'jux-footer-links';
+
+      links.forEach(link => {
+        const linkEl = document.createElement('a');
+        linkEl.className = 'jux-footer-link';
+        linkEl.href = link.href;
+        linkEl.textContent = link.label;
+        linksEl.appendChild(linkEl);
+      });
+
+      footer.appendChild(linksEl);
+    }
+
+    if (copyright) {
+      const copyrightEl = document.createElement('div');
+      copyrightEl.className = 'jux-footer-copyright';
+      copyrightEl.textContent = copyright;
+      footer.appendChild(copyrightEl);
+    }
+
+    container.appendChild(footer);
+    return this;
+  }
+
+  /**
+   * Render to another Jux component's container
+   */
+  renderTo(juxComponent: any): this {
+    if (!juxComponent || typeof juxComponent !== 'object') {
+      throw new Error('Footer.renderTo: Invalid component - not an object');
+    }
+
+    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
+      throw new Error('Footer.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    }
+
+    return this.render(`#${juxComponent._componentId}`);
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function footer(componentId: string, options: FooterOptions = {}): Footer {
+  return new Footer(componentId, options);
+}

package/lib/components/header.ts

@@ -0,0 +1,167 @@
+import { Reactive, getOrCreateContainer } from './reactivity.js';
+
+/**
+ * Header component options
+ */
+export interface HeaderOptions {
+  title?: string;
+  logo?: string;
+  navigation?: Array<{ label: string; href: string }>;
+  sticky?: boolean;
+}
+
+/**
+ * Header component state
+ */
+type HeaderState = {
+  title: string;
+  logo: string;
+  navigation: Array<{ label: string; href: string }>;
+  sticky: boolean;
+};
+
+/**
+ * Header component
+ * 
+ * Usage:
+ *   const header = jux.header('myHeader', {
+ *     title: 'My App',
+ *     navigation: [
+ *       { label: 'Home', href: '/' },
+ *       { label: 'About', href: '/about' }
+ *     ]
+ *   });
+ *   header.render('#appheader');
+ */
+export class Header extends Reactive {
+  state!: HeaderState;
+  container: HTMLElement | null = null;
+  
+  constructor(componentId: string, options: HeaderOptions = {}) {
+    super();
+    this._setComponentId(componentId);
+    
+    this.state = this._createReactiveState({
+      title: options.title ?? '',
+      logo: options.logo ?? '',
+      navigation: options.navigation ?? [],
+      sticky: options.sticky ?? true
+    }) as HeaderState;
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  title(value: string): this {
+    this.state.title = value;
+    return this;
+  }
+
+  logo(value: string): this {
+    this.state.logo = value;
+    return this;
+  }
+
+  navigation(value: Array<{ label: string; href: string }>): this {
+    this.state.navigation = value;
+    return this;
+  }
+
+  sticky(value: boolean): this {
+    this.state.sticky = value;
+    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(`Header: Target element "${targetId}" not found`);
+      }
+      container = target;
+    } else {
+      container = getOrCreateContainer(this._componentId) as HTMLElement;
+    }
+    
+    this.container = container;
+    const { title, logo, navigation, sticky } = this.state;
+    
+    const header = document.createElement('header');
+    header.className = 'jux-header';
+    header.id = this._componentId;
+    
+    if (sticky) {
+      header.classList.add('jux-header-sticky');
+    }
+    
+    // Logo section
+    if (logo || title) {
+      const logoSection = document.createElement('div');
+      logoSection.className = 'jux-header-logo';
+      
+      if (logo) {
+        const logoImg = document.createElement('img');
+        logoImg.src = logo;
+        logoImg.alt = title || 'Logo';
+        logoSection.appendChild(logoImg);
+      }
+      
+      if (title) {
+        const titleEl = document.createElement('span');
+        titleEl.className = 'jux-header-title';
+        titleEl.textContent = title;
+        logoSection.appendChild(titleEl);
+      }
+      
+      header.appendChild(logoSection);
+    }
+    
+    // Navigation
+    if (navigation.length > 0) {
+      const nav = document.createElement('nav');
+      nav.className = 'jux-header-nav';
+      
+      navigation.forEach(item => {
+        const link = document.createElement('a');
+        link.className = 'jux-header-nav-item';
+        link.href = item.href;
+        link.textContent = item.label;
+        nav.appendChild(link);
+      });
+      
+      header.appendChild(nav);
+    }
+    
+    container.appendChild(header);
+    return this;
+  }
+
+  /**
+   * Render to another Jux component's container
+   */
+  renderTo(juxComponent: any): this {
+    if (!juxComponent || typeof juxComponent !== 'object') {
+      throw new Error('Header.renderTo: Invalid component - not an object');
+    }
+    
+    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
+      throw new Error('Header.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    }
+    
+    return this.render(`#${juxComponent._componentId}`);
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function header(componentId: string, options: HeaderOptions = {}): Header {
+  return new Header(componentId, options);
+}