juxscript 1.0.19 → 1.0.21

package/lib/components/code.ts

@@ -1,156 +1,123 @@
-import { getOrCreateContainer } from './helpers.js';
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
 
-/**
- * Code component options
- */
 export interface CodeOptions {
   code?: string;
   language?: string;
-  lineNumbers?: boolean;
-  highlight?: boolean;
   style?: string;
   class?: string;
 }
 
-/**
- * Code component state
- */
 type CodeState = {
   code: string;
   language: string;
-  lineNumbers: boolean;
-  highlight: boolean;
   style: string;
   class: string;
 };
 
-/**
- * Code component
- *
- * Usage:
- *   const code = jux.code('myCode', 'console.log("hello")', 'javascript');
- *   code.render();
- */
-export class Code {
-  state: CodeState;
-  container: HTMLElement | null = null;
-  _id: string;
-  id: string;
-
-  constructor(
-    id: string,
-    content?: string,
-    language?: string,
-    options: CodeOptions = {}
-  ) {
-    this._id = id;
-    this.id = id;
-
-    this.state = {
-      code: content ?? options.code ?? '',
-      language: language ?? options.language ?? 'javascript',
-      lineNumbers: options.lineNumbers ?? false,
-      highlight: options.highlight ?? true,
+export class Code extends BaseComponent<CodeState> {
+  constructor(id: string, options: CodeOptions = {}) {
+    super(id, {
+      code: options.code ?? '',
+      language: options.language ?? 'javascript',
       style: options.style ?? '',
       class: options.class ?? ''
-    };
+    });
   }
 
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
-
-  code(value: string): this {
-    this.state.code = value;
-    return this;
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
   }
 
-  language(value: string): this {
-    this.state.language = value;
-    return this;
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
   }
 
-  lineNumbers(value: boolean): this {
-    this.state.lineNumbers = value;
-    return this;
-  }
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
 
-  highlight(value: boolean): this {
-    this.state.highlight = value;
-    return this;
-  }
+  // ✅ Inherited from BaseComponent
 
-  style(value: string): this {
-    this.state.style = value;
+  code(value: string): this {
+    this.state.code = value;
     return this;
   }
 
-  class(value: string): this {
-    this.state.class = value;
+  language(value: string): this {
+    this.state.language = value;
     return this;
   }
 
-  /* -------------------------
-   * Render
-   * ------------------------- */
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
 
   render(targetId?: string): this {
-    let container: HTMLElement;
+    const container = this._setupContainer(targetId);
 
-    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._id);
-    }
+    const { code, language, style, class: className } = this.state;
 
-    this.container = container;
-    const { code, language, lineNumbers, highlight, style, class: className } = this.state;
+    const wrapper = document.createElement('div');
+    wrapper.className = 'jux-code';
+    wrapper.id = this._id;
+    if (className) wrapper.className += ` ${className}`;
+    if (style) wrapper.setAttribute('style', style);
 
     const pre = document.createElement('pre');
-    pre.className = lineNumbers ? 'jux-code line-numbers' : 'jux-code';
-    pre.id = this._id;
-
-    if (className) {
-      pre.className += ` ${className}`;
-    }
-
-    if (style) {
-      pre.setAttribute('style', style);
-    }
-
     const codeEl = document.createElement('code');
-    codeEl.className = highlight ? `language-${language}` : '';
+    codeEl.className = `language-${language}`;
     codeEl.textContent = code;
-
     pre.appendChild(codeEl);
-    container.appendChild(pre);
+    wrapper.appendChild(pre);
 
-    return this;
-  }
+    this._wireStandardEvents(wrapper);
 
-  /**
-   * 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');
-    }
+    // Wire sync bindings
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'code') {
+        const transform = toComponent || ((v: any) => String(v));
 
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Code.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          codeEl.textContent = transformed;
+          this.state.code = transformed;
 
-    return this.render(`#${juxComponent._id}`);
+          if ((window as any).Prism) {
+            (window as any).Prism.highlightElement(codeEl);
+          }
+        });
+      }
+      else if (property === 'language') {
+        const transform = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          codeEl.className = `language-${transformed}`;
+          this.state.language = transformed;
+
+          if ((window as any).Prism) {
+            (window as any).Prism.highlightElement(codeEl);
+          }
+        });
+      }
+    });
+
+    container.appendChild(wrapper);
+
+    requestAnimationFrame(() => {
+      if ((window as any).Prism) {
+        (window as any).Prism.highlightElement(codeEl);
+      }
+    });
+
+    return this;
   }
 }
 
-/**
- * Factory helper
- */
-export function code(id: string, content?: string, language?: string): Code {
-  return new Code(id, content, language);
+export function code(id: string, options: CodeOptions = {}): Code {
+  return new Code(id, options);
 }

package/lib/components/container.ts

@@ -1,178 +1,161 @@
-import { getOrCreateContainer } from './helpers.js';
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
 
-/**
- * Container options
- */
 export interface ContainerOptions {
-  class?: string;
-  style?: string;
   direction?: 'row' | 'column';
-  gap?: string | number;
+  gap?: number | string;
+  wrap?: boolean;
   align?: 'start' | 'center' | 'end' | 'stretch';
   justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+  padding?: string;
+  style?: string;
+  class?: string;
 }
 
-/**
- * Container state
- */
 type ContainerState = {
-  class: string;
+  direction: string;
+  gap: number | string;
+  wrap: boolean;
+  align: string;
+  justify: string;
+  padding: string;
   style: string;
-  direction?: 'row' | 'column';
-  gap?: string | number;
-  align?: string;
-  justify?: string;
+  class: string;
 };
 
-/**
- * Container component - a simple div container for grouping elements
- * 
- * Usage:
- *   // Plain container
- *   jux.container('wrapper').render('#app');
- * 
- *   // Flex container with layout
- *   jux.container('toolbar')
- *     .direction('row')
- *     .gap(16)
- *     .render('#app');
- */
-export class Container {
-  state: ContainerState;
-  container: HTMLElement | null = null;
-  _id: string;
-  id: string;
-
+export class Container extends BaseComponent<ContainerState> {
   constructor(id: string, options: ContainerOptions = {}) {
-    this._id = id;
-    this.id = id;
-
-    this.state = {
-      class: options.class ?? '',
+    super(id, {
+      direction: options.direction ?? 'column',
+      gap: options.gap ?? 0,
+      wrap: options.wrap ?? false,
+      align: options.align ?? 'stretch',
+      justify: options.justify ?? 'start',
+      padding: options.padding ?? '0',
       style: options.style ?? '',
-      direction: options.direction,
-      gap: options.gap,
-      align: options.align,
-      justify: options.justify
-    };
+      class: options.class ?? ''
+    });
   }
 
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
-
-  class(value: string): this {
-    this.state.class = value;
-    return this;
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
   }
 
-  style(value: string): this {
-    this.state.style = value;
-    return this;
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
   }
 
-  /**
-   * Set flex direction (row = horizontal, column = vertical)
-   * Automatically enables flexbox when called
-   */
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from BaseComponent:
+  // - style(), class()
+  // - addClass(), removeClass(), toggleClass()
+  // - visible(), show(), hide()
+  // - attr(), attrs(), removeAttr()
+  // - disabled(), enable(), disable()
+  // - bind(), sync(), renderTo()
+
   direction(value: 'row' | 'column'): this {
     this.state.direction = value;
     return this;
   }
 
-  /**
-   * Set gap between children
-   * Automatically enables flexbox when called
-   * @param value - Gap size (number = px, string = any CSS unit)
-   */
-  gap(value: string | number): this {
+  gap(value: number | string): this {
     this.state.gap = value;
     return this;
   }
 
-  /**
-   * Set alignment of children along cross axis
-   * Automatically enables flexbox when called
-   */
+  wrap(value: boolean): this {
+    this.state.wrap = value;
+    return this;
+  }
+
   align(value: 'start' | 'center' | 'end' | 'stretch'): this {
     this.state.align = value;
     return this;
   }
 
-  /**
-   * Set justification of children along main axis
-   * Automatically enables flexbox when called
-   */
   justify(value: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'): this {
     this.state.justify = value;
     return this;
   }
 
-  /* -------------------------
-   * Render
-   * ------------------------- */
-
-  render(targetId?: string | HTMLElement): this {
-    let container: HTMLElement;
+  padding(value: string): this {
+    this.state.padding = value;
+    return this;
+  }
 
-    if (targetId) {
-      if (targetId instanceof HTMLElement) {
-        container = targetId;
-      } else {
-        const target = document.querySelector(targetId);
-        if (!target || !(target instanceof HTMLElement)) {
-          throw new Error(`Container: Target element "${targetId}" not found`);
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
+
+  render(targetId?: string): this {
+    const container = this._setupContainer(targetId);
+
+    const { direction, gap, wrap, align, justify, padding, style, class: className } = this.state;
+
+    const wrapper = document.createElement('div');
+    wrapper.className = 'jux-container';
+    wrapper.id = this._id;
+    if (className) wrapper.className += ` ${className}`;
+
+    // Build inline styles
+    const gapValue = typeof gap === 'number' ? `${gap}px` : gap;
+    const computedStyle = `
+      display: flex;
+      flex-direction: ${direction};
+      gap: ${gapValue};
+      flex-wrap: ${wrap ? 'wrap' : 'nowrap'};
+      align-items: ${align};
+      justify-content: ${justify};
+      padding: ${padding};
+      ${style}
+    `.trim();
+
+    wrapper.setAttribute('style', computedStyle);
+
+    this._wireStandardEvents(wrapper);
+
+    // Wire sync bindings
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      const transform = toComponent || ((v: any) => v);
+
+      stateObj.subscribe((val: any) => {
+        const transformed = transform(val);
+
+        if (property === 'direction') {
+          this.state.direction = String(transformed);
+          wrapper.style.flexDirection = this.state.direction;
+        } else if (property === 'gap') {
+          this.state.gap = transformed;
+          const gapVal = typeof transformed === 'number' ? `${transformed}px` : transformed;
+          wrapper.style.gap = gapVal;
+        } else if (property === 'wrap') {
+          this.state.wrap = Boolean(transformed);
+          wrapper.style.flexWrap = this.state.wrap ? 'wrap' : 'nowrap';
+        } else if (property === 'align') {
+          this.state.align = String(transformed);
+          wrapper.style.alignItems = this.state.align;
+        } else if (property === 'justify') {
+          this.state.justify = String(transformed);
+          wrapper.style.justifyContent = this.state.justify;
+        } else if (property === 'padding') {
+          this.state.padding = String(transformed);
+          wrapper.style.padding = this.state.padding;
         }
-        container = target;
-      }
-    } else {
-      container = getOrCreateContainer(this._id);
-    }
-
-    this.container = container;
-    const { class: className, style, direction, gap, align, justify } = this.state;
-
-    const div = document.createElement('div');
-    div.id = this._id;
-
-    // Always include jux-container class, append custom classes
-    div.className = className ? `jux-container ${className}` : 'jux-container';
-
-    // Only apply flex styles if any flex properties are set
-    const usesFlexbox = direction || gap !== undefined || align || justify;
-
-    let computedStyle = style;
-
-    if (usesFlexbox) {
-      const flexStyles: string[] = ['display: flex', 'width: max-content'];
-
-      if (direction) flexStyles.push(`flex-direction: ${direction}`);
-
-      if (gap !== undefined) {
-        const gapValue = typeof gap === 'number' ? `${gap}px` : gap;
-        flexStyles.push(`gap: ${gapValue}`);
-      }
-      // Only set align-items if explicitly specified
-      if (align) flexStyles.push(`align-items: ${align}`);
-      // Only set justify-content if explicitly specified
-      if (justify) flexStyles.push(`justify-content: ${justify}`);
-
-      computedStyle = `${flexStyles.join('; ')}; ${style}`.trim();
-    }
-
-    if (computedStyle) {
-      div.setAttribute('style', computedStyle);
-    }
-
-    container.appendChild(div);
+      });
+    });
 
+    container.appendChild(wrapper);
     return this;
   }
 }
 
-/**
- * Factory helper
- */
 export function container(id: string, options: ContainerOptions = {}): Container {
   return new Container(id, options);
 }

package/lib/components/data.ts

@@ -93,11 +93,43 @@ export class Data {
     this._data = [];
     this._loading = false;
   }
+
+  // Remove id requirement, make it optional for caching
+  static async fetch<T = any>(url: string, options?: RequestInit): Promise<T> {
+    const response = await fetch(url, options);
+    if (!response.ok) {
+      throw new Error(`API error: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  // ✅ Static methods - no ID needed
+  static async post<T = any>(url: string, body: any, options?: RequestInit): Promise<T> {
+    const response = await fetch(url, options);
+    if (!response.ok) {
+      throw new Error(`API error: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  static async put<T = any>(url: string, body: any, options?: RequestInit): Promise<T> {
+    const response = await fetch(url, options);
+    if (!response.ok) {
+      throw new Error(`API error: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  static async delete<T = any>(url: string, options?: RequestInit): Promise<T> {
+    const response = await fetch(url, options);
+    if (!response.ok) {
+      throw new Error(`API error: ${response.statusText}`);
+    }
+    return response.json();
+  }
 }
 
-/**
- * Factory helper
- */
-export function data(sql: string, params: any[] = [], apiUrl: string = '/api/query'): Data {
-  return new Data(sql, params, apiUrl);
+// ✅ No ID needed - pure data fetching
+export function data<T = any>(url: string, options?: RequestInit): Promise<T> {
+  return Data.fetch<T>(url, options);
 }