juxscript 1.0.61 → 1.0.63

package/lib/components/token-calculator.ts

@@ -1,313 +0,0 @@
-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();
-
-        }
-    }
-
-    private _buildContent(): string {
-        const summary = this.getSummary();
-        const { estimates } = summary;
-
-        return `
-      ${this.state.showComparison ? `
-        <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>
-    `;
-    }
-
-
-
-    /* -------------------------
-     * 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);
-        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

@@ -1,144 +0,0 @@
-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.ts

@@ -1,190 +0,0 @@
-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);
-}