juxscript 1.0.20 → 1.0.21

package/lib/components/code.ts

@@ -1,5 +1,8 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
 
 export interface CodeOptions {
   code?: string;
@@ -15,84 +18,49 @@ type CodeState = {
   class: string;
 };
 
-export class Code {
-  state: CodeState;
-  container: HTMLElement | null = null;
-  _id: string;
-  id: string;
-
-  // CRITICAL: Store bind/sync instructions for deferred wiring
-  private _bindings: Array<{ event: string, handler: Function }> = [];
-  private _syncBindings: Array<{
-    property: string,
-    stateObj: State<any>,
-    toState?: Function,
-    toComponent?: Function
-  }> = [];
-
+export class Code extends BaseComponent<CodeState> {
   constructor(id: string, options: CodeOptions = {}) {
-    this._id = id;
-    this.id = id;
-
-    this.state = {
+    super(id, {
       code: options.code ?? '',
       language: options.language ?? 'javascript',
       style: options.style ?? '',
       class: options.class ?? ''
-    };
+    });
   }
 
-  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;
   }
 
-  style(value: string): this {
-    this.state.style = value;
-    return this;
-  }
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
 
-  class(value: string): this {
-    this.state.class = value;
-    return this;
-  }
+  // ✅ Inherited from BaseComponent
 
-  bind(event: string, handler: Function): this {
-    this._bindings.push({ event, handler });
+  code(value: string): this {
+    this.state.code = value;
     return this;
   }
 
-  sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
-    if (!stateObj || typeof stateObj.subscribe !== 'function') {
-      throw new Error(`Code.sync: Expected a State object for property "${property}"`);
-    }
-    this._syncBindings.push({ property, stateObj, toState, toComponent });
+  language(value: string): this {
+    this.state.language = value;
     return this;
   }
 
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
+
   render(targetId?: string): this {
-    // === 1. SETUP: Get or create container ===
-    let container: HTMLElement;
-    if (targetId) {
-      const target = document.querySelector(targetId);
-      if (!target || !(target instanceof HTMLElement)) {
-        throw new Error(`Code: Target "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      container = getOrCreateContainer(this._id);
-    }
-    this.container = container;
+    const container = this._setupContainer(targetId);
 
-    // === 2. PREPARE: Destructure state ===
     const { code, language, style, class: className } = this.state;
 
-    // === 3. BUILD: Create DOM elements ===
     const wrapper = document.createElement('div');
     wrapper.className = 'jux-code';
     wrapper.id = this._id;
@@ -106,34 +74,28 @@ export class Code {
     pre.appendChild(codeEl);
     wrapper.appendChild(pre);
 
-    // === 4. WIRE: Attach event listeners and sync bindings ===
-
-    // Wire custom bindings from .bind() calls
-    this._bindings.forEach(({ event, handler }) => {
-      wrapper.addEventListener(event, handler as EventListener);
-    });
+    this._wireStandardEvents(wrapper);
 
-    // Wire sync bindings from .sync() calls
+    // Wire sync bindings
     this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
       if (property === 'code') {
-        const transformToComponent = toComponent || ((v: any) => String(v));
+        const transform = toComponent || ((v: any) => String(v));
 
         stateObj.subscribe((val: any) => {
-          const transformed = transformToComponent(val);
+          const transformed = transform(val);
           codeEl.textContent = transformed;
           this.state.code = transformed;
 
-          // Re-trigger syntax highlighting if available
           if ((window as any).Prism) {
             (window as any).Prism.highlightElement(codeEl);
           }
         });
       }
       else if (property === 'language') {
-        const transformToComponent = toComponent || ((v: any) => String(v));
+        const transform = toComponent || ((v: any) => String(v));
 
         stateObj.subscribe((val: any) => {
-          const transformed = transformToComponent(val);
+          const transformed = transform(val);
           codeEl.className = `language-${transformed}`;
           this.state.language = transformed;
 
@@ -144,10 +106,8 @@ export class Code {
       }
     });
 
-    // === 5. RENDER: Append to DOM and finalize ===
     container.appendChild(wrapper);
 
-    // Trigger syntax highlighting
     requestAnimationFrame(() => {
       if ((window as any).Prism) {
         (window as any).Prism.highlightElement(codeEl);
@@ -156,13 +116,6 @@ export class Code {
 
     return this;
   }
-
-  renderTo(juxComponent: any): this {
-    if (!juxComponent?._id) {
-      throw new Error('Code.renderTo: Invalid component');
-    }
-    return this.render(`#${juxComponent._id}`);
-  }
 }
 
 export function code(id: string, options: CodeOptions = {}): Code {

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: auto'];
-
-      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);
 }