juxscript 1.0.2 → 1.0.4

package/lib/components/token-calculator.ts

@@ -0,0 +1,380 @@
+import { getOrCreateContainer } from './helpers.js';
+import { ErrorHandler } from './error-handler.js';
+
+/**
+ * Token Calculator component - Compare framework token costs
+ * Estimates AI token usage between JUX vs traditional frameworks (React, Vue, etc.)
+ */
+
+export interface TokenCalculatorOptions {
+    juxLines?: number;
+    multipliers?: {
+        react: number;
+        vue: number;
+        angular: number;
+        svelte: number;
+    };
+    tokensPerLine?: number;
+    showComparison?: boolean;
+    animated?: boolean;
+    style?: string;
+    class?: string;
+}
+
+export interface TokenEstimate {
+    framework: string;
+    lines: number;
+    tokens: number;
+    percentage: number;
+    savings: number;
+}
+
+export class TokenCalculator {
+    state: {
+        juxLines: number;
+        multipliers: Record<string, number>;
+        tokensPerLine: number;
+        showComparison: boolean;
+        animated: boolean;
+        style: string;
+        class: string;
+    };
+    container: HTMLElement | null = null;
+    _id: string;
+    id: string;
+    private animationFrame?: number;
+
+    constructor(id: string, options: TokenCalculatorOptions = {}) {
+        this._id = id;
+        this.id = id;
+
+        // Default multipliers based on typical framework overhead
+        const defaultMultipliers = {
+            react: 3.5,     // JSX + component boilerplate + imports
+            vue: 3.2,       // SFC (template + script + style) + composition API
+            angular: 4.0,   // TypeScript decorators + templates + modules
+            svelte: 2.8     // Less overhead but still has markup
+        };
+
+        this.state = {
+            juxLines: options.juxLines ?? 0,
+            multipliers: { ...defaultMultipliers, ...options.multipliers },
+            tokensPerLine: options.tokensPerLine ?? 4, // Average tokens per line of code
+            showComparison: options.showComparison ?? true,
+            animated: options.animated ?? true,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        };
+    }
+
+    /* -------------------------
+     * Calculation Methods
+     * ------------------------- */
+
+    /**
+     * Calculate token estimates for all frameworks
+     */
+    calculate(): TokenEstimate[] {
+        const { juxLines, multipliers, tokensPerLine } = this.state;
+        const juxTokens = juxLines * tokensPerLine;
+
+        const estimates: TokenEstimate[] = [
+            {
+                framework: 'JUX',
+                lines: juxLines,
+                tokens: juxTokens,
+                percentage: 100,
+                savings: 0
+            }
+        ];
+
+        // Calculate for each framework
+        Object.entries(multipliers).forEach(([framework, multiplier]) => {
+            const lines = Math.round(juxLines * multiplier);
+            const tokens = lines * tokensPerLine;
+            const percentage = Math.round((juxTokens / tokens) * 100);
+            const savings = tokens - juxTokens;
+
+            estimates.push({
+                framework: framework.charAt(0).toUpperCase() + framework.slice(1),
+                lines,
+                tokens,
+                percentage,
+                savings
+            });
+        });
+
+        return estimates;
+    }
+
+    /**
+     * Get summary statistics
+     */
+    getSummary() {
+        const estimates = this.calculate();
+        const jux = estimates[0];
+        const others = estimates.slice(1);
+
+        const avgSavings = others.reduce((sum, e) => sum + e.savings, 0) / others.length;
+        const maxSavings = Math.max(...others.map(e => e.savings));
+        const avgReduction = others.reduce((sum, e) => sum + (100 - e.percentage), 0) / others.length;
+
+        return {
+            juxTokens: jux.tokens,
+            averageTokenSavings: Math.round(avgSavings),
+            maxTokenSavings: Math.round(maxSavings),
+            averageReduction: Math.round(avgReduction),
+            estimates
+        };
+    }
+
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+
+    lines(value: number): this {
+        this.state.juxLines = value;
+        this._updateDOM();
+        return this;
+    }
+
+    multiplier(framework: string, value: number): this {
+        this.state.multipliers[framework] = value;
+        this._updateDOM();
+        return this;
+    }
+
+    tokensPerLine(value: number): this {
+        this.state.tokensPerLine = value;
+        this._updateDOM();
+        return this;
+    }
+
+    showComparison(value: boolean): this {
+        this.state.showComparison = value;
+        this._updateDOM();
+        return this;
+    }
+
+    animated(value: boolean): this {
+        this.state.animated = value;
+        return this;
+    }
+
+    style(value: string): this {
+        this.state.style = value;
+        return this;
+    }
+
+    class(value: string): this {
+        this.state.class = value;
+        return this;
+    }
+
+    /* -------------------------
+     * DOM Methods
+     * ------------------------- */
+
+    private _updateDOM(): void {
+        if (!this.container) return;
+
+        const wrapper = this.container.querySelector(`#${this._id}`);
+        if (!wrapper) return;
+
+        const content = wrapper.querySelector('.jux-token-calculator-content');
+        if (content) {
+            content.innerHTML = this._buildContent();
+            if (this.state.animated) {
+                this._animateNumbers();
+            }
+        }
+    }
+
+    private _buildContent(): string {
+        const summary = this.getSummary();
+        const { estimates } = summary;
+
+        return `
+      <div class="jux-token-summary">
+        <div class="jux-token-stat">
+          <div class="jux-token-stat-value" data-value="${summary.juxTokens}">0</div>
+          <div class="jux-token-stat-label">JUX Tokens</div>
+        </div>
+        <div class="jux-token-stat jux-token-stat-highlight">
+          <div class="jux-token-stat-value" data-value="${summary.averageTokenSavings}">0</div>
+          <div class="jux-token-stat-label">Avg. Tokens Saved</div>
+        </div>
+        <div class="jux-token-stat">
+          <div class="jux-token-stat-value" data-value="${summary.averageReduction}">0</div>
+          <div class="jux-token-stat-label">% Reduction</div>
+        </div>
+      </div>
+
+      ${this.state.showComparison ? `
+        <div class="jux-token-comparison">
+          ${estimates.map(est => this._buildComparisonBar(est)).join('')}
+        </div>
+
+        <div class="jux-token-details">
+          <table class="jux-token-table">
+            <thead>
+              <tr>
+                <th>Framework</th>
+                <th>Lines</th>
+                <th>Tokens</th>
+                <th>vs JUX</th>
+                <th>Savings</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${estimates.map(est => `
+                <tr class="${est.framework === 'JUX' ? 'jux-token-row-highlight' : ''}">
+                  <td><strong>${est.framework}</strong></td>
+                  <td>${est.lines.toLocaleString()}</td>
+                  <td>${est.tokens.toLocaleString()}</td>
+                  <td>${est.percentage}%</td>
+                  <td>${est.savings > 0 ? '+' + est.savings.toLocaleString() : '—'}</td>
+                </tr>
+              `).join('')}
+            </tbody>
+          </table>
+        </div>
+      ` : ''}
+    `;
+    }
+
+    private _buildComparisonBar(estimate: TokenEstimate): string {
+        const isJux = estimate.framework === 'JUX';
+        const barClass = isJux ? 'jux-token-bar-jux' : 'jux-token-bar-other';
+
+        // Calculate bar width relative to largest value
+        const maxTokens = Math.max(...this.calculate().map(e => e.tokens));
+        const widthPercent = (estimate.tokens / maxTokens) * 100;
+
+        return `
+      <div class="jux-token-bar-row">
+        <div class="jux-token-bar-label">${estimate.framework}</div>
+        <div class="jux-token-bar-container">
+          <div 
+            class="jux-token-bar ${barClass}" 
+            style="width: 0%"
+            data-width="${widthPercent}"
+          >
+            <span class="jux-token-bar-value">${estimate.tokens.toLocaleString()} tokens</span>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+
+    private _animateNumbers(): void {
+        if (!this.container) return;
+
+        const values = this.container.querySelectorAll('.jux-token-stat-value[data-value]');
+        const bars = this.container.querySelectorAll('.jux-token-bar[data-width]');
+
+        // Animate stat numbers
+        values.forEach((el) => {
+            const target = parseInt((el as HTMLElement).dataset.value || '0');
+            this._animateValue(el as HTMLElement, 0, target, 1000);
+        });
+
+        // Animate bars
+        setTimeout(() => {
+            bars.forEach((bar) => {
+                const width = (bar as HTMLElement).dataset.width;
+                (bar as HTMLElement).style.width = `${width}%`;
+            });
+        }, 100);
+    }
+
+    private _animateValue(element: HTMLElement, start: number, end: number, duration: number): void {
+        const startTime = performance.now();
+
+        const animate = (currentTime: number) => {
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+
+            // Ease out cubic
+            const easeProgress = 1 - Math.pow(1 - progress, 3);
+            const current = Math.round(start + (end - start) * easeProgress);
+
+            element.textContent = current.toLocaleString();
+
+            if (progress < 1) {
+                this.animationFrame = requestAnimationFrame(animate);
+            }
+        };
+
+        this.animationFrame = requestAnimationFrame(animate);
+    }
+
+    /* -------------------------
+     * Render
+     * ------------------------- */
+
+    render(targetId?: string): this {
+        let container: HTMLElement;
+
+        if (targetId) {
+            const target = document.querySelector(targetId);
+            if (!target || !(target instanceof HTMLElement)) {
+                throw new Error(`TokenCalculator: Target element "${targetId}" not found`);
+            }
+            container = target;
+        } else {
+            container = getOrCreateContainer(this._id);
+        }
+
+        this.container = container;
+
+        const wrapper = document.createElement('div');
+        wrapper.id = this._id;
+        wrapper.className = `jux-token-calculator ${this.state.class}`.trim();
+
+        if (this.state.style) {
+            wrapper.setAttribute('style', this.state.style);
+        }
+
+        wrapper.innerHTML = `
+      <div class="jux-token-calculator-header">
+        <h3>Token Usage Calculator</h3>
+      </div>
+      <div class="jux-token-calculator-content">
+        ${this._buildContent()}
+      </div>
+    `;
+
+        container.appendChild(wrapper);
+
+        // Trigger animations
+        if (this.state.animated) {
+            requestAnimationFrame(() => this._animateNumbers());
+        }
+
+        return this;
+    }
+
+    /**
+     * Destroy component and cleanup animations
+     */
+    destroy(): void {
+        if (this.animationFrame) {
+            cancelAnimationFrame(this.animationFrame);
+        }
+
+        if (this.container) {
+            const wrapper = this.container.querySelector(`#${this._id}`);
+            if (wrapper) {
+                wrapper.remove();
+            }
+        }
+    }
+}
+
+/**
+ * Factory function
+ */
+export function tokenCalculator(id: string, options: TokenCalculatorOptions = {}): TokenCalculator {
+    return new TokenCalculator(id, options);
+}

package/lib/components/tooltip.ts

@@ -0,0 +1,244 @@
+import { getOrCreateContainer } from './helpers.js';
+
+/**
+ * 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;
+
+    constructor(id: string, options: TooltipOptions = {}) {
+        this._id = id;
+        this.id = id;
+
+        this.state = {
+            text: options.text ?? '',
+            position: options.position ?? 'top',
+            trigger: options.trigger ?? 'hover',
+            style: options.style ?? '',
+            class: options.class ?? ''
+        };
+    }
+
+    /* -------------------------
+     * 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;
+    }
+
+    trigger(value: 'hover' | 'click' | 'focus'): this {
+        this.state.trigger = value;
+        return this;
+    }
+
+    style(value: string): this {
+        this.state.style = value;
+        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();
+
+        return this;
+    }
+
+    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;
+
+        const tooltip = document.createElement('div');
+        tooltip.className = `jux-tooltip jux-tooltip-${position}`;
+        tooltip.id = this._id;
+        tooltip.setAttribute('role', 'tooltip');
+        tooltip.textContent = text;
+
+        if (className) {
+            tooltip.className += ` ${className}`;
+        }
+
+        if (style) {
+            tooltip.setAttribute('style', style);
+        }
+
+        document.body.appendChild(tooltip);
+        this._tooltipElement = tooltip;
+    }
+
+    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());
+        }
+    }
+
+    private _positionTooltip(): void {
+        if (!this._targetElement || !this._tooltipElement) return;
+
+        const targetRect = this._targetElement.getBoundingClientRect();
+        const tooltipRect = this._tooltipElement.getBoundingClientRect();
+        const { position } = this.state;
+
+        let top = 0;
+        let left = 0;
+
+        switch (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._tooltipElement.style.top = `${top + window.scrollY}px`;
+        this._tooltipElement.style.left = `${left + window.scrollX}px`;
+    }
+
+    /* -------------------------
+     * Render (Alternative usage)
+     * ------------------------- */
+
+    render(targetId?: string): this {
+        if (targetId) {
+            return this.attachTo(targetId);
+        }
+        throw new Error('Tooltip requires a target element. Use attachTo(selector) instead.');
+    }
+
+    renderTo(juxComponent: any): this {
+        if (!juxComponent?._id) {
+            throw new Error('Tooltip.renderTo: Invalid component');
+        }
+        return this.attachTo(`#${juxComponent._id}`);
+    }
+}
+
+export function tooltip(id: string, options: TooltipOptions = {}): Tooltip {
+    return new Tooltip(id, options);
+}