juxscript 1.1.4 → 1.1.6

package/lib/components/tooltip.ts

@@ -0,0 +1,144 @@
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
+
+export interface TooltipOptions {
+    text?: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    style?: string;
+    class?: string;
+}
+
+type TooltipState = {
+    text: string;
+    position: string;
+    style: string;
+    class: string;
+};
+
+export class Tooltip extends BaseComponent<TooltipState> {
+    private _tooltip: HTMLElement | null = null;
+    private _target: HTMLElement | null = null;
+
+    constructor(id: string, options: TooltipOptions = {}) {
+        super(id, {
+            text: options.text ?? '',
+            position: options.position ?? 'top',
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    text(value: string): this {
+        this.state.text = value;
+        return this;
+    }
+
+    position(value: 'top' | 'bottom' | 'left' | 'right'): this {
+        this.state.position = value;
+        return this;
+    }
+
+    attachTo(target: HTMLElement | null): this {
+        if (!target) return this;
+
+        this._target = target;
+        this._setupTooltip();
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    private _setupTooltip(): void {
+        if (!this._target) return;
+
+        const { text, position, style, class: className } = this.state;
+
+        // Create tooltip element
+        const tooltip = document.createElement('div');
+        tooltip.className = `jux-tooltip jux-tooltip-${position}`;
+        tooltip.id = this._id;
+        if (className) tooltip.className += ` ${className}`;
+        if (style) tooltip.setAttribute('style', style);
+        tooltip.textContent = text;
+        tooltip.style.display = 'none';
+        this._tooltip = tooltip;
+
+        document.body.appendChild(tooltip);
+
+        // Show on hover
+        this._target.addEventListener('mouseenter', () => {
+            this._show();
+        });
+
+        this._target.addEventListener('mouseleave', () => {
+            this._hide();
+        });
+
+    }
+
+    private _show(): void {
+        if (!this._tooltip || !this._target) return;
+
+        const targetRect = this._target.getBoundingClientRect();
+        const tooltipRect = this._tooltip.getBoundingClientRect();
+
+        let top = 0;
+        let left = 0;
+
+        switch (this.state.position) {
+            case 'top':
+                top = targetRect.top - tooltipRect.height - 8;
+                left = targetRect.left + (targetRect.width - tooltipRect.width) / 2;
+                break;
+            case 'bottom':
+                top = targetRect.bottom + 8;
+                left = targetRect.left + (targetRect.width - tooltipRect.width) / 2;
+                break;
+            case 'left':
+                top = targetRect.top + (targetRect.height - tooltipRect.height) / 2;
+                left = targetRect.left - tooltipRect.width - 8;
+                break;
+            case 'right':
+                top = targetRect.top + (targetRect.height - tooltipRect.height) / 2;
+                left = targetRect.right + 8;
+                break;
+        }
+
+        this._tooltip.style.top = `${top}px`;
+        this._tooltip.style.left = `${left}px`;
+        this._tooltip.style.display = 'block';
+    }
+
+    private _hide(): void {
+        if (this._tooltip) {
+            this._tooltip.style.display = 'none';
+        }
+    }
+
+    render(targetId?: string): this {
+        // Tooltips don't render to containers, they attach to targets
+        console.warn('Tooltip: Use .attachTo(element) instead of .render()');
+        return this;
+    }
+}
+
+export function tooltip(id: string, options: TooltipOptions = {}): Tooltip {
+    return new Tooltip(id, options);
+}

package/lib/components/view.d.ts

@@ -0,0 +1,48 @@
+/**
+ * View component options
+ */
+export interface ViewOptions {
+    title?: string;
+    description?: string;
+    children?: any[];
+}
+/**
+ * View component state
+ */
+type ViewState = {
+    title: string;
+    description: string;
+    children: any[];
+};
+/**
+ * View component - container for organizing page content
+ *
+ * Usage:
+ *   const view = jux.view('myView', {
+ *     title: 'Dashboard',
+ *     description: 'Main dashboard view'
+ *   });
+ *   view.add(component1);
+ *   await view.render();
+ */
+export declare class View {
+    state: ViewState;
+    container: HTMLElement | null;
+    _id: string;
+    id: string;
+    constructor(id: string, options?: ViewOptions);
+    title(value: string): this;
+    description(value: string): this;
+    add(component: any | any[]): this;
+    render(targetId?: string): Promise<this>;
+    /**
+     * Render to another Jux component's container
+     */
+    renderTo(juxComponent: any): Promise<this>;
+}
+/**
+ * Factory helper
+ */
+export declare function view(id: string, options?: ViewOptions): View;
+export {};
+//# sourceMappingURL=view.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["view.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC;CAClB;AAED;;GAEG;AACH,KAAK,SAAS,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,GAAG,EAAE,CAAC;CACjB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,qBAAa,IAAI;IACf,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,EAAE,WAAW,GAAG,IAAI,CAAQ;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,EAAE,MAAM,CAAC;gBAEC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAejD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKhC,GAAG,CAAC,SAAS,EAAE,GAAG,GAAG,GAAG,EAAE,GAAG,IAAI;IAa3B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IA6F9C;;OAEG;IACG,QAAQ,CAAC,YAAY,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC;CAWjD;AAED;;GAEG;AACH,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}

package/lib/components/view.js

@@ -0,0 +1,149 @@
+import { getOrCreateContainer } from './helpers.js';
+/**
+ * View component - container for organizing page content
+ *
+ * Usage:
+ *   const view = jux.view('myView', {
+ *     title: 'Dashboard',
+ *     description: 'Main dashboard view'
+ *   });
+ *   view.add(component1);
+ *   await view.render();
+ */
+export class View {
+    constructor(id, options = {}) {
+        this.container = null;
+        this._id = id;
+        this.id = id;
+        this.state = {
+            title: options.title ?? '',
+            description: options.description ?? '',
+            children: Array.isArray(options.children) ? [...options.children] : []
+        };
+    }
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+    title(value) {
+        this.state.title = value;
+        return this;
+    }
+    description(value) {
+        this.state.description = value;
+        return this;
+    }
+    add(component) {
+        if (Array.isArray(component)) {
+            this.state.children.push(...component);
+        }
+        else {
+            this.state.children.push(component);
+        }
+        return this;
+    }
+    /* -------------------------
+     * Render
+     * ------------------------- */
+    async render(targetId) {
+        let container;
+        if (targetId) {
+            const target = document.querySelector(targetId);
+            if (!target || !(target instanceof HTMLElement)) {
+                throw new Error(`View: Target element "${targetId}" not found`);
+            }
+            container = target;
+        }
+        else {
+            container = getOrCreateContainer(this._id);
+        }
+        this.container = container;
+        const { title, description, children } = this.state;
+        const view = document.createElement('div');
+        view.className = 'jux-view';
+        view.id = this._id;
+        // View header
+        if (title || description) {
+            const header = document.createElement('div');
+            header.className = 'jux-view-header';
+            if (title) {
+                const titleEl = document.createElement('h1');
+                titleEl.className = 'jux-view-title';
+                titleEl.textContent = title;
+                header.appendChild(titleEl);
+            }
+            if (description) {
+                const descEl = document.createElement('p');
+                descEl.className = 'jux-view-description';
+                descEl.textContent = description;
+                header.appendChild(descEl);
+            }
+            view.appendChild(header);
+        }
+        // View content
+        const content = document.createElement('div');
+        content.className = 'jux-view-content';
+        // Render children
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+            if (!child)
+                continue;
+            // Get child ID
+            let childId = null;
+            if (child.id) {
+                childId = child.id;
+            }
+            else if (child._id) {
+                childId = child._id;
+            }
+            else {
+                childId = `${this._id}-child-${i}`;
+            }
+            // Create wrapper for child
+            const childWrapper = document.createElement('div');
+            childWrapper.className = 'jux-view-item';
+            childWrapper.id = `${childId}-wrapper`;
+            content.appendChild(childWrapper);
+            // Render child INTO the wrapper
+            if (typeof child.render === 'function') {
+                try {
+                    // Pass the wrapper element directly
+                    const result = child.render(childWrapper);
+                    if (result && typeof result.then === 'function') {
+                        await result;
+                    }
+                }
+                catch (err) {
+                    console.error(`View: Error rendering child ${i}:`, err);
+                    childWrapper.innerHTML = `<div style="color: #ff6b6b; padding: 1rem;">Error: ${err.message}</div>`;
+                }
+            }
+            else {
+                // If no render method, try to append directly
+                if (child instanceof HTMLElement) {
+                    childWrapper.appendChild(child);
+                }
+            }
+        }
+        view.appendChild(content);
+        container.appendChild(view);
+        return this;
+    }
+    /**
+     * Render to another Jux component's container
+     */
+    async renderTo(juxComponent) {
+        if (!juxComponent || typeof juxComponent !== 'object') {
+            throw new Error('View.renderTo: Invalid component - not an object');
+        }
+        if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+            throw new Error('View.renderTo: Invalid component - missing _id (not a Jux component)');
+        }
+        return this.render(`#${juxComponent._id}`);
+    }
+}
+/**
+ * Factory helper
+ */
+export function view(id, options = {}) {
+    return new View(id, options);
+}

package/lib/components/view.ts

@@ -0,0 +1,190 @@
+import { getOrCreateContainer } from './helpers.js';
+
+/**
+ * View component options
+ */
+export interface ViewOptions {
+  title?: string;
+  description?: string;
+  children?: any[];
+}
+
+/**
+ * View component state
+ */
+type ViewState = {
+  title: string;
+  description: string;
+  children: any[];
+};
+
+/**
+ * View component - container for organizing page content
+ *
+ * Usage:
+ *   const view = jux.view('myView', {
+ *     title: 'Dashboard',
+ *     description: 'Main dashboard view'
+ *   });
+ *   view.add(component1);
+ *   await view.render();
+ */
+export class View {
+  state: ViewState;
+  container: HTMLElement | null = null;
+  _id: string;
+  id: string;
+
+  constructor(id: string, options: ViewOptions = {}) {
+    this._id = id;
+    this.id = id;
+
+    this.state = {
+      title: options.title ?? '',
+      description: options.description ?? '',
+      children: Array.isArray(options.children) ? [...options.children] : []
+    };
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  title(value: string): this {
+    this.state.title = value;
+    return this;
+  }
+
+  description(value: string): this {
+    this.state.description = value;
+    return this;
+  }
+
+  add(component: any | any[]): this {
+    if (Array.isArray(component)) {
+      this.state.children.push(...component);
+    } else {
+      this.state.children.push(component);
+    }
+    return this;
+  }
+
+  /* -------------------------
+   * Render
+   * ------------------------- */
+
+  async render(targetId?: string): Promise<this> {
+    let container: HTMLElement;
+
+    if (targetId) {
+      const target = document.querySelector(targetId);
+      if (!target || !(target instanceof HTMLElement)) {
+        throw new Error(`View: Target element "${targetId}" not found`);
+      }
+      container = target;
+    } else {
+      container = getOrCreateContainer(this._id);
+    }
+
+    this.container = container;
+    const { title, description, children } = this.state;
+
+    const view = document.createElement('div');
+    view.className = 'jux-view';
+    view.id = this._id;
+
+    // View header
+    if (title || description) {
+      const header = document.createElement('div');
+      header.className = 'jux-view-header';
+
+      if (title) {
+        const titleEl = document.createElement('h1');
+        titleEl.className = 'jux-view-title';
+        titleEl.textContent = title;
+        header.appendChild(titleEl);
+      }
+
+      if (description) {
+        const descEl = document.createElement('p');
+        descEl.className = 'jux-view-description';
+        descEl.textContent = description;
+        header.appendChild(descEl);
+      }
+
+      view.appendChild(header);
+    }
+
+    // View content
+    const content = document.createElement('div');
+    content.className = 'jux-view-content';
+
+    // Render children
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (!child) continue;
+
+      // Get child ID
+      let childId: string | null = null;
+      if ((child as any).id) {
+        childId = (child as any).id;
+      } else if ((child as any)._id) {
+        childId = (child as any)._id;
+      } else {
+        childId = `${this._id}-child-${i}`;
+      }
+
+      // Create wrapper for child
+      const childWrapper = document.createElement('div');
+      childWrapper.className = 'jux-view-item';
+      childWrapper.id = `${childId}-wrapper`;
+      content.appendChild(childWrapper);
+
+      // Render child INTO the wrapper
+      if (typeof (child as any).render === 'function') {
+        try {
+          // Pass the wrapper element directly
+          const result = (child as any).render(childWrapper);
+          if (result && typeof (result as any).then === 'function') {
+            await result;
+          }
+        } catch (err) {
+          console.error(`View: 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);
+        }
+      }
+    }
+
+    view.appendChild(content);
+    container.appendChild(view);
+
+    return this;
+  }
+
+  /**
+   * Render to another Jux component's container
+   */
+  async renderTo(juxComponent: any): Promise<this> {
+    if (!juxComponent || typeof juxComponent !== 'object') {
+      throw new Error('View.renderTo: Invalid component - not an object');
+    }
+
+    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+      throw new Error('View.renderTo: Invalid component - missing _id (not a Jux component)');
+    }
+
+    return this.render(`#${juxComponent._id}`);
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function view(id: string, options: ViewOptions = {}): View {
+  return new View(id, options);
+}

package/lib/components/write.d.ts

@@ -0,0 +1,107 @@
+/**
+ * Write - Simple content writer with no component tracking
+ * Perfect for quick HTML output without ID management
+ */
+export interface WriteOptions {
+    tagType?: string;
+    className?: string;
+    style?: string;
+    attributes?: Record<string, string>;
+    html?: boolean;
+}
+/**
+ * Write content directly to a target element
+ *
+ * Usage:
+ *   // Write text (defaults to body)
+ *   jux.write('Hello World!').render();
+ *
+ *   // Write to specific target
+ *   jux.write('Content').render('#container');
+ *
+ *   // Write HTML
+ *   jux.write('<strong>Bold text</strong>').html(true).render('#container');
+ *
+ *   // Write with styling
+ *   jux.write('Styled text').style('color: red;').render('#container');
+ */
+export declare class Write {
+    private content;
+    private options;
+    constructor(content: string, options?: WriteOptions);
+    /**
+     * Set HTML mode (treat content as HTML)
+     */
+    html(enabled?: boolean): this;
+    /**
+     * Set tag type
+     */
+    tagType(value: string): this;
+    /**
+     * Set CSS class
+     */
+    className(value: string): this;
+    /**
+     * Set inline styles
+     */
+    style(value: string): this;
+    /**
+     * Set custom attributes
+     */
+    attrs(attributes: Record<string, string>): this;
+    /**
+     * Render content to target element
+     */
+    render(targetSelector?: string): this;
+    /**
+     * Replace target content (clear first, then render)
+     */
+    replace(targetSelector?: string): this;
+    /**
+     * Render before target element
+     */
+    before(targetSelector: string): this;
+    /**
+     * Render after target element
+     */
+    after(targetSelector: string): this;
+    /**
+     * Prepend to target (insert as first child)
+     */
+    prepend(targetSelector?: string): this;
+    /**
+     * Append to target (alias for render)
+     */
+    append(targetSelector?: string): this;
+    private _getTarget;
+    private _createElement;
+}
+/**
+ * Factory function - simple, no overloads
+ */
+export declare function write(content: string, options?: WriteOptions): Write;
+/**
+ * Write text (explicit)
+ */
+export declare function writeText(content: string, options?: Omit<WriteOptions, 'html'>): Write;
+/**
+ * Write HTML (explicit)
+ */
+export declare function writeHtml(content: string, options?: Omit<WriteOptions, 'html'>): Write;
+/**
+ * Write paragraph
+ */
+export declare function writeParagraph(content: string, options?: Omit<WriteOptions, 'tagType'>): Write;
+/**
+ * Write heading
+ */
+export declare function writeHeading(content: string, level?: 1 | 2 | 3 | 4 | 5 | 6, options?: Omit<WriteOptions, 'tagType'>): Write;
+/**
+ * Write span
+ */
+export declare function writeSpan(content: string, options?: Omit<WriteOptions, 'tagType'>): Write;
+/**
+ * Write div (explicit)
+ */
+export declare function writeDiv(content: string, options?: Omit<WriteOptions, 'tagType'>): Write;
+//# sourceMappingURL=write.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"write.d.ts","sourceRoot":"","sources":["write.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,KAAK;IACd,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,OAAO,CAAe;gBAElB,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB;IAgBvD;;OAEG;IACH,IAAI,CAAC,OAAO,GAAE,OAAc,GAAG,IAAI;IAKnC;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B;;OAEG;IACH,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK9B;;OAEG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B;;OAEG;IACH,KAAK,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI;IAS/C;;OAEG;IACH,MAAM,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI;IAUrC;;OAEG;IACH,OAAO,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI;IAWtC;;OAEG;IACH,MAAM,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI;IAapC;;OAEG;IACH,KAAK,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI;IAanC;;OAEG;IACH,OAAO,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI;IAUtC;;OAEG;IACH,MAAM,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI;IAQrC,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,cAAc;CA6BzB;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,KAAK,CAExE;AAMD;;GAEG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,IAAI,CAAC,YAAY,EAAE,MAAM,CAAM,GAAG,KAAK,CAE1F;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,IAAI,CAAC,YAAY,EAAE,MAAM,CAAM,GAAG,KAAK,CAE1F;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAM,GAAG,KAAK,CAElG;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,GAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAK,EAAE,OAAO,GAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAM,GAAG,KAAK,CAElI;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAM,GAAG,KAAK,CAE7F;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAM,GAAG,KAAK,CAE5F"}