juxscript 1.0.18 → 1.0.20

package/lib/components/tooltip.ts

@@ -1,8 +1,6 @@
 import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
 
-/**
- * Tooltip component options
- */
 export interface TooltipOptions {
     text?: string;
     position?: 'top' | 'bottom' | 'left' | 'right';
@@ -11,38 +9,32 @@ export interface TooltipOptions {
     class?: string;
 }
 
-/**
- * Tooltip component state
- */
 type TooltipState = {
     text: string;
-    position: string;
-    trigger: string;
+    content?: string;
+    position: 'top' | 'bottom' | 'left' | 'right';
+    trigger: 'hover' | 'click' | 'focus';
     style: string;
     class: string;
+    isVisible: boolean;
 };
 
-/**
- * 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;
+    private _targetElement: HTMLElement | null = null;
+
+    // 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
+    }> = [];
 
     constructor(id: string, options: TooltipOptions = {}) {
         this._id = id;
@@ -53,7 +45,8 @@ export class Tooltip {
             position: options.position ?? 'top',
             trigger: options.trigger ?? 'hover',
             style: options.style ?? '',
-            class: options.class ?? ''
+            class: options.class ?? '',
+            isVisible: false
         };
     }
 
@@ -63,6 +56,9 @@ export class Tooltip {
 
     text(value: string): this {
         this.state.text = value;
+        if (this._tooltipElement) {
+            this._tooltipElement.textContent = value;
+        }
         return this;
     }
 
@@ -86,9 +82,18 @@ export class Tooltip {
         return this;
     }
 
-    /* -------------------------
-     * Methods
-     * ------------------------- */
+    bind(event: string, handler: Function): this {
+        this._bindings.push({ event, handler });
+        return this;
+    }
+
+    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+        if (!stateObj || typeof stateObj.subscribe !== 'function') {
+            throw new Error(`Tooltip.sync: Expected a State object for property "${property}"`);
+        }
+        this._syncBindings.push({ property, stateObj, toState, toComponent });
+        return this;
+    }
 
     /**
      * Attach tooltip to an element
@@ -97,20 +102,16 @@ export class Tooltip {
         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`);
@@ -128,16 +129,18 @@ export class Tooltip {
     }
 
     show(): void {
-        if (this._tooltipElement) {
-            this._tooltipElement.classList.add('jux-tooltip-visible');
-            this._positionTooltip();
-        }
+        if (!this._tooltipElement || !this._targetElement) return;
+
+        this.state.isVisible = true;
+        this._tooltipElement.classList.add('jux-tooltip-visible');
+        this._positionTooltip();
     }
 
     hide(): void {
-        if (this._tooltipElement) {
-            this._tooltipElement.classList.remove('jux-tooltip-visible');
-        }
+        if (!this._tooltipElement) return;
+
+        this.state.isVisible = false;
+        this._tooltipElement.classList.remove('jux-tooltip-visible');
     }
 
     /* -------------------------
@@ -149,8 +152,7 @@ export class Tooltip {
 
         const tooltip = document.createElement('div');
         tooltip.className = `jux-tooltip jux-tooltip-${position}`;
-        tooltip.id = this._id;
-        tooltip.setAttribute('role', 'tooltip');
+        tooltip.id = `${this._id}-tooltip`;
         tooltip.textContent = text;
 
         if (className) {
@@ -163,6 +165,8 @@ export class Tooltip {
 
         document.body.appendChild(tooltip);
         this._tooltipElement = tooltip;
+
+        this._injectDefaultStyles();
     }
 
     private _attachEventListeners(): void {
@@ -175,7 +179,7 @@ export class Tooltip {
             this._targetElement.addEventListener('mouseleave', () => this.hide());
         } else if (trigger === 'click') {
             this._targetElement.addEventListener('click', () => {
-                if (this._tooltipElement?.classList.contains('jux-tooltip-visible')) {
+                if (this.state.isVisible) {
                     this.hide();
                 } else {
                     this.show();
@@ -185,6 +189,21 @@ export class Tooltip {
             this._targetElement.addEventListener('focus', () => this.show());
             this._targetElement.addEventListener('blur', () => this.hide());
         }
+
+        // Wire up sync bindings
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'text') {
+                const transformToComponent = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    if (this._tooltipElement) {
+                        this._tooltipElement.textContent = transformed;
+                    }
+                    this.state.text = transformed;
+                });
+            }
+        });
     }
 
     private _positionTooltip(): void {
@@ -220,22 +239,163 @@ export class Tooltip {
         this._tooltipElement.style.left = `${left + window.scrollX}px`;
     }
 
-    /* -------------------------
-     * Render (Alternative usage)
-     * ------------------------- */
+    private _injectDefaultStyles(): void {
+        const styleId = 'jux-tooltip-styles';
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+            .jux-tooltip {
+                position: absolute;
+                background: #1f2937;
+                color: white;
+                padding: 8px 12px;
+                border-radius: 6px;
+                font-size: 13px;
+                white-space: nowrap;
+                z-index: 10000;
+                pointer-events: none;
+                opacity: 0;
+                transition: opacity 0.2s;
+            }
+
+            .jux-tooltip-visible {
+                opacity: 1;
+            }
+
+            .jux-tooltip-top::after {
+                content: '';
+                position: absolute;
+                top: 100%;
+                left: 50%;
+                transform: translateX(-50%);
+                border: 5px solid transparent;
+                border-top-color: #1f2937;
+            }
+
+            .jux-tooltip-bottom::after {
+                content: '';
+                position: absolute;
+                bottom: 100%;
+                left: 50%;
+                transform: translateX(-50%);
+                border: 5px solid transparent;
+                border-bottom-color: #1f2937;
+            }
+
+            .jux-tooltip-left::after {
+                content: '';
+                position: absolute;
+                left: 100%;
+                top: 50%;
+                transform: translateY(-50%);
+                border: 5px solid transparent;
+                border-left-color: #1f2937;
+            }
+
+            .jux-tooltip-right::after {
+                content: '';
+                position: absolute;
+                right: 100%;
+                top: 50%;
+                transform: translateY(-50%);
+                border: 5px solid transparent;
+                border-right-color: #1f2937;
+            }
+        `;
+        document.head.appendChild(style);
+    }
 
     render(targetId?: string): this {
+        // === 1. SETUP: Get or create container ===
+        let container: HTMLElement;
         if (targetId) {
-            return this.attachTo(targetId);
+            const target = document.querySelector(targetId);
+            if (!target || !(target instanceof HTMLElement)) {
+                throw new Error(`Tooltip: Target "${targetId}" not found`);
+            }
+            container = target;
+        } else {
+            container = getOrCreateContainer(this._id);
         }
-        throw new Error('Tooltip requires a target element. Use attachTo(selector) instead.');
+        this.container = container;
+
+        // === 2. PREPARE: Destructure state ===
+        const { text, content, position, trigger, style, class: className } = this.state;
+
+        // === 3. BUILD: Create DOM elements ===
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-tooltip-wrapper';
+        wrapper.id = this._id;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
+
+        const contentEl = document.createElement('div');
+        contentEl.className = 'jux-tooltip-content';
+        contentEl.innerHTML = content;
+        wrapper.appendChild(contentEl);
+
+        const tooltip = document.createElement('div');
+        tooltip.className = `jux-tooltip jux-tooltip-${position}`;
+        tooltip.id = `${this._id}-tooltip`;
+        tooltip.textContent = text;
+        tooltip.style.display = 'none';
+        wrapper.appendChild(tooltip);
+
+        // === 4. WIRE: Attach event listeners and sync bindings ===
+
+        // Tooltip trigger behavior
+        if (trigger === 'hover') {
+            wrapper.addEventListener('mouseenter', () => {
+                tooltip.style.display = 'block';
+            });
+            wrapper.addEventListener('mouseleave', () => {
+                tooltip.style.display = 'none';
+            });
+        } else if (trigger === 'click') {
+            wrapper.addEventListener('click', () => {
+                tooltip.style.display = tooltip.style.display === 'none' ? 'block' : 'none';
+            });
+        }
+
+        // Wire custom bindings from .bind() calls
+        this._bindings.forEach(({ event, handler }) => {
+            wrapper.addEventListener(event, handler as EventListener);
+        });
+
+        // Wire sync bindings from .sync() calls
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'text') {
+                const transformToComponent = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    tooltip.textContent = transformed;
+                    this.state.text = transformed;
+                });
+            }
+            else if (property === 'content') {
+                const transformToComponent = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    contentEl.innerHTML = transformed;
+                    this.state.content = transformed;
+                });
+            }
+        });
+
+        // === 5. RENDER: Append to DOM and finalize ===
+        container.appendChild(wrapper);
+        return this;
     }
 
     renderTo(juxComponent: any): this {
         if (!juxComponent?._id) {
             throw new Error('Tooltip.renderTo: Invalid component');
         }
-        return this.attachTo(`#${juxComponent._id}`);
+        return this.render(`#${juxComponent._id}`);
     }
 }
 

package/lib/jux.ts

@@ -5,7 +5,7 @@
 
 import { state } from './reactivity/state.js';
 import { Data, data } from './components/data.js';
-import { table, Table, type TableOptions, type TableColumn } from './components/table.js';
+import { table, Table, type TableOptions } from './components/table.js';
 import { hero, Hero, type HeroOptions } from './components/hero.js';
 import { card, Card, type CardOptions } from './components/card.js';
 import { button, Button, type ButtonOptions } from './components/button.js';
@@ -55,6 +55,12 @@ import { areachartsmooth, AreaChartSmooth, type AreaChartSmoothOptions, AreaChar
 import { doughnutchart, DoughnutChart, type DoughnutChartOptions, type DoughnutChartDataPoint } from './components/doughnutchart.js';
 import { kpicard, KPICard, type KPICardOptions } from './components/kpicard.js';
 import { divider, Divider, type DividerOptions } from './components/divider.js';
+import { icon as iconComponent, Icon, type IconOptions } from './components/icon.js';
+import { renderIcon, renderEmoji } from './components/icons.js';
+
+// NEW: Export chart utilities
+export * from './components/chart-types.js';
+export * from './components/chart-utils.js';
 
 /* -------------------------
  * Type Exports
@@ -79,7 +85,6 @@ export type {
   NavItem,
   ViewOptions,
   TableOptions,
-  TableColumn,
   ChartOptions,
   CodeOptions,
   InputOptions,
@@ -118,7 +123,8 @@ export type {
   DoughnutChartOptions,
   DoughnutChartDataPoint,
   KPICardOptions,
-  DividerOptions
+  DividerOptions,
+  IconOptions
 };
 
 /* -------------------------
@@ -175,7 +181,8 @@ export {
   AreaChartSmooth,
   DoughnutChart,
   KPICard,
-  Divider
+  Divider,
+  Icon
 };
 
 /* -------------------------
@@ -188,6 +195,11 @@ export interface JuxAPI {
   param(name: string): string | null;
   req: typeof req;
 
+  // Icon utilities
+  icon: typeof renderIcon;
+  emoji: typeof renderEmoji;
+  iconComponent: typeof iconComponent;
+
   // Component factories
   data: typeof data;
   table: typeof table;
@@ -266,6 +278,11 @@ class Jux implements JuxAPI {
   // Request utilities
   req = req;
 
+  // Icon utilities
+  icon = renderIcon;
+  emoji = renderEmoji;
+  iconComponent = iconComponent;
+
   // Component factory methods
   data = data;
   table = table;
@@ -335,5 +352,7 @@ export {
   jux,
   state,
   req,
-  ErrorHandler
+  ErrorHandler,
+  renderIcon,
+  renderEmoji
 };