juxscript 1.0.19 → 1.0.21

package/lib/components/tooltip.ts

@@ -1,65 +1,47 @@
-import { getOrCreateContainer } from './helpers.js';
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
 
-/**
- * Tooltip component options
- */
 export interface TooltipOptions {
     text?: string;
     position?: 'top' | 'bottom' | 'left' | 'right';
-    trigger?: 'hover' | 'click' | 'focus';
     style?: string;
     class?: string;
 }
 
-/**
- * Tooltip component state
- */
 type TooltipState = {
     text: string;
     position: string;
-    trigger: string;
     style: string;
     class: string;
 };
 
-/**
- * Tooltip component - Contextual help on hover
- * 
- * Usage:
- *   // Attach to existing element
- *   jux.tooltip('help-tip', {
- *     text: 'This is helpful information',
- *     position: 'top'
- *   }).attachTo('#help-icon');
- * 
- *   // Or render with content
- *   jux.button('info').label('ℹ️').render('#app');
- *   jux.tooltip('info-tip').text('More info').attachTo('#info');
- */
-export class Tooltip {
-    state: TooltipState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-    private _targetElement: HTMLElement | null = null;
-    private _tooltipElement: HTMLElement | null = null;
+export class Tooltip extends BaseComponent<TooltipState> {
+    private _tooltip: HTMLElement | null = null;
+    private _target: HTMLElement | null = null;
 
     constructor(id: string, options: TooltipOptions = {}) {
-        this._id = id;
-        this.id = id;
-
-        this.state = {
+        super(id, {
             text: options.text ?? '',
             position: options.position ?? 'top',
-            trigger: options.trigger ?? 'hover',
             style: options.style ?? '',
             class: options.class ?? ''
-        };
+        });
     }
 
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
 
     text(value: string): this {
         this.state.text = value;
@@ -71,133 +53,57 @@ export class Tooltip {
         return this;
     }
 
-    trigger(value: 'hover' | 'click' | 'focus'): this {
-        this.state.trigger = value;
-        return this;
-    }
+    attachTo(target: HTMLElement | null): this {
+        if (!target) return this;
 
-    style(value: string): this {
-        this.state.style = value;
+        this._target = target;
+        this._setupTooltip();
         return this;
     }
 
-    class(value: string): this {
-        this.state.class = value;
-        return this;
-    }
-
-    /* -------------------------
-     * Methods
-     * ------------------------- */
-
-    /**
-     * Attach tooltip to an element
-     */
-    attachTo(target: string | HTMLElement | any): this {
-        let targetElement: HTMLElement | null = null;
-
-        if (typeof target === 'string') {
-            // String selector
-            const el = document.querySelector(target);
-            if (!el || !(el instanceof HTMLElement)) {
-                throw new Error(`Tooltip: Target element "${target}" not found`);
-            }
-            targetElement = el;
-        } else if (target instanceof HTMLElement) {
-            // Direct HTMLElement
-            targetElement = target;
-        } else if (target && target.container) {
-            // Jux component with container
-            targetElement = target.container;
-        } else if (target && target._id) {
-            // Jux component with _id
-            const el = document.getElementById(target._id);
-            if (!el) {
-                throw new Error(`Tooltip: Target element with id "${target._id}" not found`);
-            }
-            targetElement = el;
-        } else {
-            throw new Error('Tooltip: Invalid target element');
-        }
-
-        this._targetElement = targetElement;
-        this._createTooltip();
-        this._attachEventListeners();
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
 
-        return this;
-    }
+    private _setupTooltip(): void {
+        if (!this._target) return;
 
-    show(): void {
-        if (this._tooltipElement) {
-            this._tooltipElement.classList.add('jux-tooltip-visible');
-            this._positionTooltip();
-        }
-    }
-
-    hide(): void {
-        if (this._tooltipElement) {
-            this._tooltipElement.classList.remove('jux-tooltip-visible');
-        }
-    }
-
-    /* -------------------------
-     * Helpers
-     * ------------------------- */
-
-    private _createTooltip(): void {
         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;
-        tooltip.setAttribute('role', 'tooltip');
+        if (className) tooltip.className += ` ${className}`;
+        if (style) tooltip.setAttribute('style', style);
         tooltip.textContent = text;
+        tooltip.style.display = 'none';
+        this._tooltip = tooltip;
 
-        if (className) {
-            tooltip.className += ` ${className}`;
-        }
+        document.body.appendChild(tooltip);
 
-        if (style) {
-            tooltip.setAttribute('style', style);
-        }
+        // Show on hover
+        this._target.addEventListener('mouseenter', () => {
+            this._show();
+        });
 
-        document.body.appendChild(tooltip);
-        this._tooltipElement = tooltip;
-    }
+        this._target.addEventListener('mouseleave', () => {
+            this._hide();
+        });
 
-    private _attachEventListeners(): void {
-        if (!this._targetElement) return;
-
-        const { trigger } = this.state;
-
-        if (trigger === 'hover') {
-            this._targetElement.addEventListener('mouseenter', () => this.show());
-            this._targetElement.addEventListener('mouseleave', () => this.hide());
-        } else if (trigger === 'click') {
-            this._targetElement.addEventListener('click', () => {
-                if (this._tooltipElement?.classList.contains('jux-tooltip-visible')) {
-                    this.hide();
-                } else {
-                    this.show();
-                }
-            });
-        } else if (trigger === 'focus') {
-            this._targetElement.addEventListener('focus', () => this.show());
-            this._targetElement.addEventListener('blur', () => this.hide());
-        }
+        this._injectTooltipStyles();
     }
 
-    private _positionTooltip(): void {
-        if (!this._targetElement || !this._tooltipElement) return;
+    private _show(): void {
+        if (!this._tooltip || !this._target) return;
 
-        const targetRect = this._targetElement.getBoundingClientRect();
-        const tooltipRect = this._tooltipElement.getBoundingClientRect();
-        const { position } = this.state;
+        const targetRect = this._target.getBoundingClientRect();
+        const tooltipRect = this._tooltip.getBoundingClientRect();
 
         let top = 0;
         let left = 0;
 
-        switch (position) {
+        switch (this.state.position) {
             case 'top':
                 top = targetRect.top - tooltipRect.height - 8;
                 left = targetRect.left + (targetRect.width - tooltipRect.width) / 2;
@@ -216,26 +122,49 @@ export class Tooltip {
                 break;
         }
 
-        this._tooltipElement.style.top = `${top + window.scrollY}px`;
-        this._tooltipElement.style.left = `${left + window.scrollX}px`;
+        this._tooltip.style.top = `${top}px`;
+        this._tooltip.style.left = `${left}px`;
+        this._tooltip.style.display = 'block';
     }
 
-    /* -------------------------
-     * Render (Alternative usage)
-     * ------------------------- */
+    private _hide(): void {
+        if (this._tooltip) {
+            this._tooltip.style.display = 'none';
+        }
+    }
 
     render(targetId?: string): this {
-        if (targetId) {
-            return this.attachTo(targetId);
-        }
-        throw new Error('Tooltip requires a target element. Use attachTo(selector) instead.');
+        // Tooltips don't render to containers, they attach to targets
+        console.warn('Tooltip: Use .attachTo(element) instead of .render()');
+        return this;
     }
 
-    renderTo(juxComponent: any): this {
-        if (!juxComponent?._id) {
-            throw new Error('Tooltip.renderTo: Invalid component');
-        }
-        return this.attachTo(`#${juxComponent._id}`);
+    private _injectTooltipStyles(): void {
+        const styleId = 'jux-tooltip-styles';
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+      .jux-tooltip {
+        position: fixed;
+        background: #1f2937;
+        color: white;
+        padding: 6px 12px;
+        border-radius: 6px;
+        font-size: 12px;
+        white-space: nowrap;
+        z-index: 10000;
+        pointer-events: none;
+        animation: jux-tooltip-fade 0.2s;
+      }
+
+      @keyframes jux-tooltip-fade {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+    `;
+        document.head.appendChild(style);
     }
 }
 

package/lib/components/write.ts

@@ -22,18 +22,10 @@ export interface WriteOptions {
  *   jux.write('Content').render('#container');
  *   
  *   // Write HTML
- *   jux.write('<strong>Bold text</strong>', { html: true }).render('#container');
+ *   jux.write('<strong>Bold text</strong>').html(true).render('#container');
  *   
  *   // Write with styling
- *   jux.write('Styled text', { 
- *     tagType: 'p',
- *     className: 'highlight',
- *     style: 'color: red;' 
- *   }).render('#container');
- *   
- *   // Append multiple writes
- *   jux.write('First').render('#container');
- *   jux.write('Second').render('#container');
+ *   jux.write('Styled text').style('color: red;').render('#container');
  */
 export class Write {
     private content: string;
@@ -50,54 +42,63 @@ export class Write {
             ...options
         };
     }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
     /**
-    * Set HTML mode (chainable setter)
-    */
+     * Set HTML mode (treat content as HTML)
+     */
     html(enabled: boolean = true): this {
         this.options.html = enabled;
         return this;
     }
+
     /**
-     * Render content to target element
-     * Falls back to body if no target specified
+     * Set tag type
      */
-    render(targetSelector?: string): this {
-        // Default to body if no target
-        const selector = targetSelector || 'body';
-        const target = document.querySelector(selector);
-
-        if (!target || !(target instanceof HTMLElement)) {
-            console.warn(`Write: Target element "${selector}" not found`);
-            return this;
-        }
+    tagType(value: string): this {
+        this.options.tagType = value;
+        return this;
+    }
 
-        const element = document.createElement(this.options.tagType!);
+    /**
+     * Set CSS class
+     */
+    className(value: string): this {
+        this.options.className = value;
+        return this;
+    }
 
-        // Set content (text or HTML)
-        if (this.options.html) {
-            element.innerHTML = this.content;
-        } else {
-            element.textContent = this.content;
-        }
+    /**
+     * Set inline styles
+     */
+    style(value: string): this {
+        this.options.style = value;
+        return this;
+    }
 
-        // Apply className
-        if (this.options.className) {
-            element.className = this.options.className;
-        }
+    /**
+     * Set custom attributes
+     */
+    attrs(attributes: Record<string, string>): this {
+        this.options.attributes = attributes;
+        return this;
+    }
 
-        // Apply inline styles
-        if (this.options.style) {
-            element.setAttribute('style', this.options.style);
-        }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER METHODS
+     * ═════════════════════════════════════════════════════════════════ */
 
-        // Apply custom attributes
-        if (this.options.attributes) {
-            Object.entries(this.options.attributes).forEach(([key, value]) => {
-                element.setAttribute(key, value);
-            });
-        }
+    /**
+     * Render content to target element
+     */
+    render(targetSelector?: string): this {
+        const target = this._getTarget(targetSelector);
+        if (!target) return this;
 
-        // Append to target
+        const element = this._createElement();
         target.appendChild(element);
 
         return this;
@@ -107,19 +108,14 @@ export class Write {
      * Replace target content (clear first, then render)
      */
     replace(targetSelector?: string): this {
-        const selector = targetSelector || 'body';
-        const target = document.querySelector(selector);
+        const target = this._getTarget(targetSelector);
+        if (!target) return this;
 
-        if (!target || !(target instanceof HTMLElement)) {
-            console.warn(`Write: Target element "${selector}" not found`);
-            return this;
-        }
-
-        // Clear existing content
         target.innerHTML = '';
+        const element = this._createElement();
+        target.appendChild(element);
 
-        // Render new content
-        return this.render(selector);
+        return this;
     }
 
     /**
@@ -127,35 +123,12 @@ export class Write {
      */
     before(targetSelector: string): this {
         const target = document.querySelector(targetSelector);
-
         if (!target || !(target instanceof HTMLElement)) {
             console.warn(`Write: Target element "${targetSelector}" not found`);
             return this;
         }
 
-        const element = document.createElement(this.options.tagType!);
-
-        if (this.options.html) {
-            element.innerHTML = this.content;
-        } else {
-            element.textContent = this.content;
-        }
-
-        if (this.options.className) {
-            element.className = this.options.className;
-        }
-
-        if (this.options.style) {
-            element.setAttribute('style', this.options.style);
-        }
-
-        if (this.options.attributes) {
-            Object.entries(this.options.attributes).forEach(([key, value]) => {
-                element.setAttribute(key, value);
-            });
-        }
-
-        // Insert before target
+        const element = this._createElement();
         target.parentNode?.insertBefore(element, target);
 
         return this;
@@ -166,35 +139,12 @@ export class Write {
      */
     after(targetSelector: string): this {
         const target = document.querySelector(targetSelector);
-
         if (!target || !(target instanceof HTMLElement)) {
             console.warn(`Write: Target element "${targetSelector}" not found`);
             return this;
         }
 
-        const element = document.createElement(this.options.tagType!);
-
-        if (this.options.html) {
-            element.innerHTML = this.content;
-        } else {
-            element.textContent = this.content;
-        }
-
-        if (this.options.className) {
-            element.className = this.options.className;
-        }
-
-        if (this.options.style) {
-            element.setAttribute('style', this.options.style);
-        }
-
-        if (this.options.attributes) {
-            Object.entries(this.options.attributes).forEach(([key, value]) => {
-                element.setAttribute(key, value);
-            });
-        }
-
-        // Insert after target
+        const element = this._createElement();
         target.parentNode?.insertBefore(element, target.nextSibling);
 
         return this;
@@ -204,87 +154,118 @@ export class Write {
      * Prepend to target (insert as first child)
      */
     prepend(targetSelector?: string): this {
-        const selector = targetSelector || 'body';
-        const target = document.querySelector(selector);
+        const target = this._getTarget(targetSelector);
+        if (!target) return this;
+
+        const element = this._createElement();
+        target.insertBefore(element, target.firstChild);
+
+        return this;
+    }
+
+    /**
+     * Append to target (alias for render)
+     */
+    append(targetSelector?: string): this {
+        return this.render(targetSelector);
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * PRIVATE HELPERS
+     * ═════════════════════════════════════════════════════════════════ */
+
+    private _getTarget(selector?: string): HTMLElement | null {
+        const targetSelector = selector || 'body';
+        const target = document.querySelector(targetSelector);
 
         if (!target || !(target instanceof HTMLElement)) {
-            console.warn(`Write: Target element "${selector}" not found`);
-            return this;
+            console.warn(`Write: Target element "${targetSelector}" not found`);
+            return null;
         }
 
+        return target;
+    }
+
+    private _createElement(): HTMLElement {
         const element = document.createElement(this.options.tagType!);
 
+        // Set content (text or HTML)
         if (this.options.html) {
             element.innerHTML = this.content;
         } else {
             element.textContent = this.content;
         }
 
+        // Apply className
         if (this.options.className) {
             element.className = this.options.className;
         }
 
+        // Apply inline styles
         if (this.options.style) {
             element.setAttribute('style', this.options.style);
         }
 
+        // Apply custom attributes
         if (this.options.attributes) {
             Object.entries(this.options.attributes).forEach(([key, value]) => {
                 element.setAttribute(key, value);
             });
         }
 
-        // Prepend to target
-        target.insertBefore(element, target.firstChild);
-
-        return this;
-    }
-
-    /**
-     * Append to target (alias for render)
-     */
-    append(targetSelector?: string): this {
-        return this.render(targetSelector);
+        return element;
     }
 }
 
 /**
- * Factory function for quick writing
+ * Factory function - simple, no overloads
  */
 export function write(content: string, options: WriteOptions = {}): Write {
     return new Write(content, options);
 }
 
+/* ═════════════════════════════════════════════════════════════════
+ * SHORTHAND HELPERS
+ * ═════════════════════════════════════════════════════════════════ */
+
 /**
- * Shorthand helpers
+ * Write text (explicit)
  */
-
-// Write text (alias)
 export function writeText(content: string, options: Omit<WriteOptions, 'html'> = {}): Write {
     return new Write(content, { ...options, html: false });
 }
 
-// Write HTML (alias)
+/**
+ * Write HTML (explicit)
+ */
 export function writeHtml(content: string, options: Omit<WriteOptions, 'html'> = {}): Write {
     return new Write(content, { ...options, html: true });
 }
 
-// Write paragraph
+/**
+ * Write paragraph
+ */
 export function writeParagraph(content: string, options: Omit<WriteOptions, 'tagType'> = {}): Write {
     return new Write(content, { ...options, tagType: 'p' });
 }
 
-// Write heading
+/**
+ * Write heading
+ */
 export function writeHeading(content: string, level: 1 | 2 | 3 | 4 | 5 | 6 = 2, options: Omit<WriteOptions, 'tagType'> = {}): Write {
     return new Write(content, { ...options, tagType: `h${level}` });
 }
 
-// Write span
+/**
+ * Write span
+ */
 export function writeSpan(content: string, options: Omit<WriteOptions, 'tagType'> = {}): Write {
     return new Write(content, { ...options, tagType: 'span' });
 }
 
-// Write div (explicit)
+/**
+ * Write div (explicit)
+ */
 export function writeDiv(content: string, options: Omit<WriteOptions, 'tagType'> = {}): Write {
     return new Write(content, { ...options, tagType: 'div' });
 }