juxscript 1.0.0

package/lib/components/code.ts

@@ -0,0 +1,242 @@
+import { Reactive, getOrCreateContainer } from './reactivity.js';
+
+/**
+ * Code component options
+ */
+export interface CodeOptions {
+  code?: string;
+  language?: string;
+  title?: string | null;
+  showLineNumbers?: boolean;
+  highlightLines?: number[];
+  maxHeight?: string | null;
+  wrap?: boolean;
+}
+
+/**
+ * Code component state
+ */
+type CodeState = {
+  code: string;
+  language: string;
+  title: string | null;
+  showLineNumbers: boolean;
+  highlightLines: number[];
+  maxHeight: string | null;
+  wrap: boolean;
+};
+
+/**
+ * Code component - displays formatted code blocks with syntax highlighting
+ *
+ * Usage:
+ *   const codeBlock = jux.code('myCode', {
+ *     code: 'const x = 42;',
+ *     language: 'javascript',
+ *     title: 'Example Code',
+ *     showLineNumbers: true
+ *   });
+ *   codeBlock.render();
+ */
+export class Code extends Reactive {
+  state!: CodeState;
+  container: HTMLElement | null = null;
+
+  constructor(componentId: string, options: CodeOptions = {}) {
+    super();
+    this._setComponentId(componentId);
+
+    // Map 'jux' language to 'javascript' for syntax highlighting
+    let language = options.language || 'javascript';
+    if (language === 'jux') {
+      language = 'javascript';
+    }
+
+    this.state = this._createReactiveState({
+      code: options.code ?? '',
+      language: language,
+      title: options.title ?? null,
+      showLineNumbers: options.showLineNumbers ?? false,
+      highlightLines: options.highlightLines ?? [],
+      maxHeight: options.maxHeight ?? null,
+      wrap: options.wrap ?? false
+    }) as CodeState;
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  code(value: string): this {
+    this.state.code = value;
+    return this;
+  }
+
+  language(value: string): this {
+    this.state.language = value === 'jux' ? 'javascript' : value;
+    return this;
+  }
+
+  title(value: string): this {
+    this.state.title = value;
+    return this;
+  }
+
+  showLineNumbers(value: boolean): this {
+    this.state.showLineNumbers = value;
+    return this;
+  }
+
+  highlightLines(value: number[]): this {
+    this.state.highlightLines = value;
+    return this;
+  }
+
+  maxHeight(value: string): this {
+    this.state.maxHeight = value;
+    return this;
+  }
+
+  wrap(value: boolean): this {
+    this.state.wrap = value;
+    return this;
+  }
+
+  /* -------------------------
+   * Helpers
+   * ------------------------- */
+
+  private _escapeHtml(text: string): string {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  private _formatCode(): string {
+    const { code, showLineNumbers, highlightLines } = this.state;
+    const lines = code.split('\n');
+
+    if (!showLineNumbers) {
+      return `<code class="jux-code-block">${this._escapeHtml(code)}</code>`;
+    }
+
+    const formattedLines = lines
+      .map((line, index) => {
+        const lineNum = index + 1;
+        const isHighlighted = highlightLines.includes(lineNum);
+        const highlightClass = isHighlighted ? ' jux-code-line-highlighted' : '';
+
+        return `<div class="jux-code-line${highlightClass}">
+        <span class="jux-code-line-number">${lineNum}</span>
+        <span class="jux-code-line-content">${this._escapeHtml(line) || ' '}</span>
+      </div>`;
+      })
+      .join('');
+
+    return `<code class="jux-code-block jux-code-numbered">${formattedLines}</code>`;
+  }
+
+  /* -------------------------
+   * Render
+   * ------------------------- */
+
+  render(targetId?: string): this {
+    let container: HTMLElement;
+    
+    if (targetId) {
+      const target = document.querySelector(targetId);
+      if (!target || !(target instanceof HTMLElement)) {
+        throw new Error(`Code: Target element "${targetId}" not found`);
+      }
+      container = target;
+    } else {
+      container = getOrCreateContainer(this._componentId) as HTMLElement;
+    }
+    
+    this.container = container;
+    const { language, title, maxHeight, wrap } = this.state;
+
+    container.innerHTML = '';
+    container.className = 'jux-code-container';
+    container.id = this._componentId;
+
+    // Title bar
+    if (title) {
+      const titleBar = document.createElement('div');
+      titleBar.className = 'jux-code-title-bar';
+
+      const titleEl = document.createElement('div');
+      titleEl.className = 'jux-code-title';
+      titleEl.textContent = title;
+
+      const langBadge = document.createElement('div');
+      langBadge.className = 'jux-code-language-badge';
+      langBadge.textContent = language;
+
+      titleBar.appendChild(titleEl);
+      titleBar.appendChild(langBadge);
+      container.appendChild(titleBar);
+    }
+
+    // Code block wrapper
+    const codeWrapper = document.createElement('div');
+    codeWrapper.className = 'jux-code-wrapper';
+    if (maxHeight) {
+      codeWrapper.style.maxHeight = maxHeight;
+      codeWrapper.style.overflowY = 'auto';
+    }
+
+    // Pre element
+    const preEl = document.createElement('pre');
+    preEl.className = `jux-code-pre language-${language}`;
+    if (wrap) {
+      preEl.classList.add('jux-code-wrap');
+    }
+
+    preEl.innerHTML = this._formatCode();
+
+    codeWrapper.appendChild(preEl);
+    container.appendChild(codeWrapper);
+
+    // Copy button
+    const copyBtn = document.createElement('button');
+    copyBtn.className = 'jux-code-copy-btn';
+    copyBtn.textContent = 'Copy';
+    container.appendChild(copyBtn);
+
+    // Event binding - copy functionality
+    copyBtn.addEventListener('click', () => {
+      navigator.clipboard.writeText(this.state.code).then(() => {
+        copyBtn.textContent = 'Copied!';
+        setTimeout(() => {
+          copyBtn.textContent = 'Copy';
+        }, 2000);
+      });
+    });
+
+    this.emit('rendered');
+    return this;
+  }
+
+  /**
+   * Render to another Jux component's container
+   */
+  renderTo(juxComponent: any): this {
+    if (!juxComponent || typeof juxComponent !== 'object') {
+      throw new Error('Code.renderTo: Invalid component - not an object');
+    }
+    
+    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
+      throw new Error('Code.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    }
+    
+    return this.render(`#${juxComponent._componentId}`);
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function code(componentId: string, options: CodeOptions = {}): Code {
+  return new Code(componentId, options);
+}

package/lib/components/container.ts

@@ -0,0 +1,282 @@
+import { Reactive, getOrCreateContainer } from './reactivity.js';
+
+/**
+ * Container options
+ */
+export interface ContainerOptions {
+  direction?: 'horizontal' | 'vertical';
+  layout?: 'flex' | 'grid' | 'responsive';
+  minWidth?: string;
+  gap?: string;
+  justify?: 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+  wrap?: boolean;
+  children?: any[];
+}
+
+/**
+ * Container state
+ */
+type ContainerState = {
+  direction: string;
+  layout: string;
+  minWidth: string;
+  gap: string;
+  justify: string;
+  align: string;
+  wrap: boolean;
+  children: any[];
+};
+
+/**
+ * Container component - creates a flex or grid container for organizing child components
+ * 
+ * Usage:
+ *   const container = jux.container('myContainer', { 
+ *     layout: 'flex',
+ *     direction: 'vertical',
+ *     justify: 'space-between',
+ *     align: 'center'
+ *   });
+ *   container.add(component1);
+ *   container.add([component2, component3]);
+ *   await container.render();
+ * 
+ * FLEX Layout Options:
+ *   - layout: 'flex' (default)
+ *   - direction: 'vertical' | 'horizontal' (default: 'vertical')
+ *   - justify: 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' (default: 'start')
+ *   - align: 'start' | 'end' | 'center' | 'stretch' | 'baseline' (default: 'stretch')
+ *   - wrap: boolean (default: false)
+ *   - gap: string (default: '16px')
+ * 
+ * GRID Layout Options:
+ *   - layout: 'grid'
+ *   - minWidth: string - for auto-fit (default: '250px')
+ *   - gap: string (default: '16px')
+ *   - align: 'start' | 'end' | 'center' | 'stretch' (default: 'stretch')
+ *   - justify: 'start' | 'end' | 'center' | 'stretch' (default: 'stretch')
+ */
+export class Container extends Reactive {
+  state!: ContainerState;
+  container: HTMLElement | null = null;
+
+  constructor(componentId: string, options: ContainerOptions = {}) {
+    super();
+    this._setComponentId(componentId);
+    
+    this.state = this._createReactiveState({
+      direction: options.direction ?? 'vertical',
+      layout: options.layout ?? 'flex',
+      minWidth: options.minWidth ?? '250px',
+      gap: options.gap ?? '16px',
+      justify: options.justify ?? 'start',
+      align: options.align ?? 'stretch',
+      wrap: options.wrap ?? false,
+      children: Array.isArray(options.children) ? [...options.children] : []
+    }) as ContainerState;
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  direction(value: 'horizontal' | 'vertical'): this {
+    this.state.direction = value;
+    return this;
+  }
+
+  layout(value: 'flex' | 'grid' | 'responsive'): this {
+    this.state.layout = value;
+    return this;
+  }
+
+  minWidth(value: string): this {
+    this.state.minWidth = value;
+    return this;
+  }
+
+  gap(value: string): this {
+    this.state.gap = value;
+    return this;
+  }
+
+  justify(value: 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'): this {
+    this.state.justify = value;
+    return this;
+  }
+
+  align(value: 'start' | 'end' | 'center' | 'stretch' | 'baseline'): this {
+    this.state.align = value;
+    return this;
+  }
+
+  wrap(value: boolean): this {
+    this.state.wrap = value;
+    return this;
+  }
+
+  /* -------------------------
+   * Add children
+   * ------------------------- */
+
+  add(component: any | any[]): this {
+    if (Array.isArray(component)) {
+      this.state.children.push(...component);
+    } else {
+      this.state.children.push(component);
+    }
+    return this;
+  }
+
+  /* -------------------------
+   * Layout styles
+   * ------------------------- */
+
+  private _applyFlexStyles(containerEl: HTMLElement): void {
+    const { direction, gap, justify, align, wrap } = this.state;
+    containerEl.style.cssText = `
+      display: flex;
+      flex-direction: ${direction === 'horizontal' ? 'row' : 'column'};
+      justify-content: ${justify};
+      align-items: ${align};
+      flex-wrap: ${wrap ? 'wrap' : 'nowrap'};
+      gap: ${gap};
+    `;
+  }
+
+  private _applyGridStyles(containerEl: HTMLElement): void {
+    const { minWidth, gap, direction } = this.state;
+    
+    if (direction === 'horizontal') {
+      // For horizontal grid, use auto-fit columns
+      containerEl.style.cssText = `
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(${minWidth}, 1fr));
+        gap: ${gap};
+      `;
+    } else {
+      // For vertical grid, stack rows
+      containerEl.style.cssText = `
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-auto-rows: auto;
+        gap: ${gap};
+      `;
+    }
+  }
+
+  /* -------------------------
+   * Render
+   * ------------------------- */
+
+  async render(targetId?: string | HTMLElement): Promise<this> {
+    let container: HTMLElement;
+    
+    if (targetId) {
+      // If targetId is an HTMLElement (passed from parent container), use it directly
+      if (targetId instanceof HTMLElement) {
+        container = targetId;
+      } else {
+        // Otherwise query for it
+        const target = document.querySelector(targetId);
+        if (!target || !(target instanceof HTMLElement)) {
+          throw new Error(`Container: Target element "${targetId}" not found`);
+        }
+        container = target;
+      }
+    } else {
+      container = getOrCreateContainer(this._componentId) as HTMLElement;
+    }
+    
+    this.container = container;
+    const { layout, children } = this.state;
+    
+    container.innerHTML = '';
+    container.className = 'jux-container';
+    container.id = this._componentId;
+    
+    // Apply layout-specific styles
+    if (layout === 'grid') {
+      this._applyGridStyles(container);
+    } else {
+      this._applyFlexStyles(container);
+    }
+    
+    // Render children
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (!child) continue;
+      
+      // Handle string children
+      if (typeof child === 'string') {
+        const textWrapper = document.createElement('div');
+        textWrapper.className = 'jux-container-item';
+        textWrapper.style.cssText = 'padding: 1rem; display: flex; align-items: center; justify-content: center; font-weight: bold;';
+        textWrapper.textContent = child;
+        container.appendChild(textWrapper);
+        continue;
+      }
+      
+      // Get child ID
+      let childId: string | null = null;
+      if ((child as any).id) {
+        childId = (child as any).id;
+      } else if ((child as any)._componentId) {
+        childId = (child as any)._componentId;
+      } else {
+        childId = `${this._componentId}-child-${i}`;
+      }
+      
+      // Create wrapper for child
+      const childWrapper = document.createElement('div');
+      childWrapper.className = 'jux-container-item';
+      childWrapper.id = `${childId}-wrapper`;
+      container.appendChild(childWrapper);
+      
+      // Render child INTO the wrapper (not to its own container)
+      if (typeof (child as any).render === 'function') {
+        try {
+          // Pass the wrapper element directly, not a selector
+          const result = (child as any).render(childWrapper);
+          if (result && typeof (result as any).then === 'function') {
+            await result;
+          }
+        } catch (err) {
+          console.error(`Container: Error rendering child ${i}:`, err);
+          childWrapper.innerHTML = `<div style="color: #ff6b6b; padding: 1rem;">Error: ${(err as Error).message}</div>`;
+        }
+      } else {
+        // If no render method, try to append directly
+        if (child instanceof HTMLElement) {
+          childWrapper.appendChild(child);
+        }
+      }
+    }
+    
+    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('Container.renderTo: Invalid component - not an object');
+    }
+    
+    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
+      throw new Error('Container.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    }
+    
+    return this.render(`#${juxComponent._componentId}`);
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function container(componentId: string, options: ContainerOptions = {}): Container {
+  return new Container(componentId, options);
+}

package/lib/components/data.ts

@@ -0,0 +1,105 @@
+import { Reactive, getOrCreateContainer } from './reactivity.js';
+
+/**
+ * Data component - SQL query execution
+ * Note: No componentId needed - this is a data-only component
+ *
+ * Usage:
+ *   const posts = jux.data('SELECT * FROM posts WHERE id = ?', [1]);
+ *   await posts.execute();
+ *   console.log(posts.data);
+ */
+
+export interface DataOptions {
+  sql: string;
+  params?: any[];
+  apiUrl?: string;
+}
+
+export class Data {
+  private _data: any[] = [];
+  private _executed: boolean = false;
+  private _loading: boolean = false;
+  private _sql: string;
+  private _params: any[];
+  private _apiUrl: string;
+
+  constructor(sql: string, params: any[] = [], apiUrl: string = '/api/query') {
+    this._sql = sql;
+    this._params = params;
+    this._apiUrl = apiUrl;
+  }
+
+  /* -------------------------
+   * Getters
+   * ------------------------- */
+
+  get data(): any[] {
+    return this._data;
+  }
+
+  get executed(): boolean {
+    return this._executed;
+  }
+
+  get loading(): boolean {
+    return this._loading;
+  }
+
+  get sql(): string {
+    return this._sql;
+  }
+
+  set sql(value: string) {
+    this._sql = value;
+  }
+
+  /* -------------------------
+   * Methods
+   * ------------------------- */
+
+  async execute(): Promise<void> {
+    if (this._executed) return;
+    this._loading = true;
+
+    try {
+      const response = await fetch(this._apiUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          sql: this._sql,
+          params: this._params
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error(`API error: ${response.statusText}`);
+      }
+
+      const result = await response.json();
+      this._data = result.data || [];
+      this._executed = true;
+    } catch (error) {
+      console.error('Data execution error:', error);
+      this._data = [];
+      throw error;
+    } finally {
+      this._loading = false;
+    }
+  }
+
+  reset(): void {
+    this._executed = false;
+    this._data = [];
+    this._loading = false;
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function data(sql: string, params: any[] = [], apiUrl: string = '/api/query'): Data {
+  return new Data(sql, params, apiUrl);
+}