juxscript 1.1.4 → 1.1.6

package/lib/components/code.d.ts

@@ -0,0 +1,24 @@
+import { BaseComponent } from './base/BaseComponent.js';
+export interface CodeOptions {
+    code?: string;
+    language?: string;
+    style?: string;
+    class?: string;
+}
+type CodeState = {
+    code: string;
+    language: string;
+    style: string;
+    class: string;
+};
+export declare class Code extends BaseComponent<CodeState> {
+    constructor(id: string, options?: CodeOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    code(value: string): this;
+    language(value: string): this;
+    render(targetId?: string): this;
+}
+export declare function code(id: string, options?: CodeOptions): Code;
+export {};
+//# sourceMappingURL=code.d.ts.map

package/lib/components/code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["code.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IASjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAUhD,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAS7B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CA4DhC;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}

package/lib/components/code.js

@@ -0,0 +1,88 @@
+import { BaseComponent } from './base/BaseComponent.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = [];
+export class Code extends BaseComponent {
+    constructor(id, options = {}) {
+        super(id, {
+            code: options.code ?? '',
+            language: options.language ?? 'javascript',
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    // ✅ Inherited from BaseComponent
+    code(value) {
+        this.state.code = value;
+        return this;
+    }
+    language(value) {
+        this.state.language = value;
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const { code, language, 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');
+        const codeEl = document.createElement('code');
+        codeEl.className = `language-${language}`;
+        codeEl.textContent = code;
+        pre.appendChild(codeEl);
+        wrapper.appendChild(pre);
+        this._wireStandardEvents(wrapper);
+        // Wire sync bindings
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'code') {
+                const transform = toComponent || ((v) => String(v));
+                stateObj.subscribe((val) => {
+                    const transformed = transform(val);
+                    codeEl.textContent = transformed;
+                    this.state.code = transformed;
+                    if (window.Prism) {
+                        window.Prism.highlightElement(codeEl);
+                    }
+                });
+            }
+            else if (property === 'language') {
+                const transform = toComponent || ((v) => String(v));
+                stateObj.subscribe((val) => {
+                    const transformed = transform(val);
+                    codeEl.className = `language-${transformed}`;
+                    this.state.language = transformed;
+                    if (window.Prism) {
+                        window.Prism.highlightElement(codeEl);
+                    }
+                });
+            }
+        });
+        container.appendChild(wrapper);
+        requestAnimationFrame(() => {
+            if (window.Prism) {
+                window.Prism.highlightElement(codeEl);
+            }
+        });
+        return this;
+    }
+}
+export function code(id, options = {}) {
+    return new Code(id, options);
+}

package/lib/components/code.ts

@@ -0,0 +1,123 @@
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
+
+export interface CodeOptions {
+  code?: string;
+  language?: string;
+  style?: string;
+  class?: string;
+}
+
+type CodeState = {
+  code: string;
+  language: string;
+  style: string;
+  class: string;
+};
+
+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 ?? ''
+    });
+  }
+
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
+  }
+
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from BaseComponent
+
+  code(value: string): this {
+    this.state.code = value;
+    return this;
+  }
+
+  language(value: string): this {
+    this.state.language = value;
+    return this;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
+
+  render(targetId?: string): this {
+    const container = this._setupContainer(targetId);
+
+    const { code, language, 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');
+    const codeEl = document.createElement('code');
+    codeEl.className = `language-${language}`;
+    codeEl.textContent = code;
+    pre.appendChild(codeEl);
+    wrapper.appendChild(pre);
+
+    this._wireStandardEvents(wrapper);
+
+    // Wire sync bindings
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'code') {
+        const transform = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          codeEl.textContent = transformed;
+          this.state.code = transformed;
+
+          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;
+  }
+}
+
+export function code(id: string, options: CodeOptions = {}): Code {
+  return new Code(id, options);
+}

package/lib/components/container.d.ts

@@ -0,0 +1,42 @@
+import { BaseComponent } from './base/BaseComponent.js';
+/**
+ * Container options
+ */
+export interface ContainerOptions {
+    class?: string;
+    style?: string;
+    direction?: 'row' | 'column';
+    gap?: string | number;
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+}
+/**
+ * Container state
+ */
+type ContainerState = {
+    class: string;
+    style: string;
+    direction?: 'row' | 'column';
+    gap?: string | number;
+    align?: string;
+    justify?: string;
+};
+/**
+ * Container component - a simple div container for grouping elements
+ */
+export declare class Container extends BaseComponent<ContainerState> {
+    constructor(id: string, options?: ContainerOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    direction(value: 'row' | 'column'): this;
+    gap(value: string | number): this;
+    align(value: 'start' | 'center' | 'end' | 'stretch'): this;
+    justify(value: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'): this;
+    render(targetId?: string): this;
+}
+/**
+ * Factory helper
+ */
+export declare function container(id: string, options?: ContainerOptions): Container;
+export {};
+//# sourceMappingURL=container.d.ts.map

package/lib/components/container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,CAAC;CAC1F;AAED;;GAEG;AACH,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,qBAAa,SAAU,SAAQ,aAAa,CAAC,cAAc,CAAC;gBAC9C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB;IAWtD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAgBhD,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,QAAQ,GAAG,IAAI;IAKxC,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAKjC,KAAK,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI;IAK1D,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,IAAI;IASpG,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CA2ChC;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS,CAE/E"}

package/lib/components/container.js

@@ -0,0 +1,93 @@
+import { BaseComponent } from './base/BaseComponent.js';
+// Event definitions - Container is a layout wrapper that can be clicked
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['click'];
+/**
+ * Container component - a simple div container for grouping elements
+ */
+export class Container extends BaseComponent {
+    constructor(id, options = {}) {
+        super(id, {
+            class: options.class ?? '',
+            style: options.style ?? '',
+            direction: options.direction,
+            gap: options.gap,
+            align: options.align,
+            justify: options.justify
+        });
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+    // ✅ Inherited from BaseComponent:
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - addClass(), removeClass(), toggleClass()
+    // - visible(), show(), hide()
+    // - attr(), attrs(), removeAttr()
+    // - disabled(), enable(), disable()
+    direction(value) {
+        this.state.direction = value;
+        return this;
+    }
+    gap(value) {
+        this.state.gap = value;
+        return this;
+    }
+    align(value) {
+        this.state.align = value;
+        return this;
+    }
+    justify(value) {
+        this.state.justify = value;
+        return this;
+    }
+    /* -------------------------
+     * Render
+     * ------------------------- */
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        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 = ['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);
+        }
+        this._wireStandardEvents(div);
+        container.appendChild(div);
+        return this;
+    }
+}
+/**
+ * Factory helper
+ */
+export function container(id, options = {}) {
+    return new Container(id, options);
+}

package/lib/components/container.ts

@@ -0,0 +1,140 @@
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions - Container is a layout wrapper that can be clicked
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['click'] as const;
+
+/**
+ * Container options
+ */
+export interface ContainerOptions {
+  class?: string;
+  style?: string;
+  direction?: 'row' | 'column';
+  gap?: string | number;
+  align?: 'start' | 'center' | 'end' | 'stretch';
+  justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+}
+
+/**
+ * Container state
+ */
+type ContainerState = {
+  class: string;
+  style: string;
+  direction?: 'row' | 'column';
+  gap?: string | number;
+  align?: string;
+  justify?: string;
+};
+
+/**
+ * Container component - a simple div container for grouping elements
+ */
+export class Container extends BaseComponent<ContainerState> {
+  constructor(id: string, options: ContainerOptions = {}) {
+    super(id, {
+      class: options.class ?? '',
+      style: options.style ?? '',
+      direction: options.direction,
+      gap: options.gap,
+      align: options.align,
+      justify: options.justify
+    });
+  }
+
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
+  }
+
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  // ✅ Inherited from BaseComponent:
+  // - style(), class()
+  // - bind(), sync(), renderTo()
+  // - addClass(), removeClass(), toggleClass()
+  // - visible(), show(), hide()
+  // - attr(), attrs(), removeAttr()
+  // - disabled(), enable(), disable()
+
+  direction(value: 'row' | 'column'): this {
+    this.state.direction = value;
+    return this;
+  }
+
+  gap(value: string | number): this {
+    this.state.gap = value;
+    return this;
+  }
+
+  align(value: 'start' | 'center' | 'end' | 'stretch'): this {
+    this.state.align = value;
+    return this;
+  }
+
+  justify(value: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'): this {
+    this.state.justify = value;
+    return this;
+  }
+
+  /* -------------------------
+   * Render
+   * ------------------------- */
+
+  render(targetId?: string): this {
+    const container = this._setupContainer(targetId);
+
+    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);
+    }
+
+    this._wireStandardEvents(div);
+
+    container.appendChild(div);
+
+    return this;
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function container(id: string, options: ContainerOptions = {}): Container {
+  return new Container(id, options);
+}

package/lib/components/data.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Data component - SQL query execution
+ * Note: No id 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 declare class Data {
+    private _data;
+    private _executed;
+    private _loading;
+    private _sql;
+    private _params;
+    private _apiUrl;
+    constructor(sql: string, params?: any[], apiUrl?: string);
+    get data(): any[];
+    get executed(): boolean;
+    get loading(): boolean;
+    get sql(): string;
+    set sql(value: string);
+    execute(): Promise<void>;
+    reset(): void;
+    static fetch<T = any>(url: string, options?: RequestInit): Promise<T>;
+    static post<T = any>(url: string, body: any, options?: RequestInit): Promise<T>;
+    static put<T = any>(url: string, body: any, options?: RequestInit): Promise<T>;
+    static delete<T = any>(url: string, options?: RequestInit): Promise<T>;
+}
+export declare function data<T = any>(url: string, options?: RequestInit): Promise<T>;
+//# sourceMappingURL=data.d.ts.map

package/lib/components/data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["data.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,qBAAa,IAAI;IACf,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,OAAO,CAAS;gBAEZ,GAAG,EAAE,MAAM,EAAE,MAAM,GAAE,GAAG,EAAO,EAAE,MAAM,GAAE,MAAqB;IAU1E,IAAI,IAAI,IAAI,GAAG,EAAE,CAEhB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,IAAI,GAAG,IAAI,MAAM,CAEhB;IAED,IAAI,GAAG,CAAC,KAAK,EAAE,MAAM,EAEpB;IAMK,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAgC9B,KAAK,IAAI,IAAI;WAOA,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC;WAS9D,IAAI,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC;WAQxE,GAAG,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC;WAQvE,MAAM,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC;CAO7E;AAGD,wBAAgB,IAAI,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,CAE5E"}

package/lib/components/data.js

@@ -0,0 +1,110 @@
+/**
+ * Data component - SQL query execution
+ * Note: No id 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 class Data {
+    constructor(sql, params = [], apiUrl = '/api/query') {
+        this._data = [];
+        this._executed = false;
+        this._loading = false;
+        this._sql = sql;
+        this._params = params;
+        this._apiUrl = apiUrl;
+    }
+    /* -------------------------
+     * Getters
+     * ------------------------- */
+    get data() {
+        return this._data;
+    }
+    get executed() {
+        return this._executed;
+    }
+    get loading() {
+        return this._loading;
+    }
+    get sql() {
+        return this._sql;
+    }
+    set sql(value) {
+        this._sql = value;
+    }
+    /* -------------------------
+     * Methods
+     * ------------------------- */
+    async execute() {
+        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() {
+        this._executed = false;
+        this._data = [];
+        this._loading = false;
+    }
+    // Remove id requirement, make it optional for caching
+    static async fetch(url, options) {
+        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(url, body, options) {
+        const response = await fetch(url, options);
+        if (!response.ok) {
+            throw new Error(`API error: ${response.statusText}`);
+        }
+        return response.json();
+    }
+    static async put(url, body, options) {
+        const response = await fetch(url, options);
+        if (!response.ok) {
+            throw new Error(`API error: ${response.statusText}`);
+        }
+        return response.json();
+    }
+    static async delete(url, options) {
+        const response = await fetch(url, options);
+        if (!response.ok) {
+            throw new Error(`API error: ${response.statusText}`);
+        }
+        return response.json();
+    }
+}
+// ✅ No ID needed - pure data fetching
+export function data(url, options) {
+    return Data.fetch(url, options);
+}