juxscript 1.1.239 → 1.1.243

package/lib/components/tooltip.js

@@ -1,112 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = [];
-export class Tooltip extends BaseComponent {
-    constructor(id, options = {}) {
-        super(id, {
-            text: options.text ?? '',
-            position: options.position ?? 'top',
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
-        this._tooltip = null;
-        this._target = null;
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    text(value) {
-        this.state.text = value;
-        return this;
-    }
-    position(value) {
-        this.state.position = value;
-        return this;
-    }
-    attachTo(target) {
-        if (!target)
-            return this;
-        this._target = target;
-        this._setupTooltip();
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    _setupTooltip() {
-        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();
-        });
-    }
-    _show() {
-        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';
-    }
-    _hide() {
-        if (this._tooltip) {
-            this._tooltip.style.display = 'none';
-        }
-    }
-    render(targetId) {
-        // Tooltips don't render to containers, they attach to targets
-        console.warn('Tooltip: Use .attachTo(element) instead of .render()');
-        return this;
-    }
-    update(prop, value) {
-        // No reactive updates needed
-    }
-}
-export function tooltip(id, options = {}) {
-    return new Tooltip(id, options);
-}

package/lib/components/tooltip.ts

@@ -1,148 +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 | HTMLElement | BaseComponent<any>): this {
-        // Tooltips don't render to containers, they attach to targets
-        console.warn('Tooltip: Use .attachTo(element) instead of .render()');
-        return this;
-    }
-
-    update(prop: string, value: any): void {
-        // No reactive updates needed
-    }
-}
-
-export function tooltip(id: string, options: TooltipOptions = {}): Tooltip {
-    return new Tooltip(id, options);
-}

package/lib/components/watcher.d.ts

@@ -1,195 +0,0 @@
-import { BaseComponent } from "./base/BaseComponent.js";
-/**
- * 🔍 WATCHER - Simple Component Observer
- *
- * Watches JUX components and fires callbacks when their state changes.
- * Think of it as a "subscribe to component updates" utility.
- *
- * ═══════════════════════════════════════════════════════════════════════════════
- * BASIC USAGE
- * ═══════════════════════════════════════════════════════════════════════════════
- *
- * ```javascript
- * import { input, paragraph, watcher } from 'juxscript';
- *
- * const nameInput = input('name').render('app');
- * const greeting = paragraph('greeting').render('app');
- *
- * // Watch nameInput and update greeting whenever it changes
- * watcher('name-watcher')
- *     .watch(nameInput, () => {
- *         greeting.text(`Hello, ${nameInput.getValue()}!`);
- *     });
- * ```
- *
- * ═══════════════════════════════════════════════════════════════════════════════
- * MULTIPLE COMPONENTS
- * ═══════════════════════════════════════════════════════════════════════════════
- *
- * ```javascript
- * const firstNameInput = input('firstName').render();
- * const lastNameInput = input('lastName').render();
- * const fullName = paragraph('fullName').render();
- *
- * const formWatcher = watcher('form');
- *
- * // Watch both inputs, same callback
- * formWatcher
- *     .watch(firstNameInput, updateFullName)
- *     .watch(lastNameInput, updateFullName);
- *
- * function updateFullName() {
- *     const first = firstNameInput.getValue();
- *     const last = lastNameInput.getValue();
- *     fullName.text(`${first} ${last}`.trim());
- * }
- * ```
- *
- * ═══════════════════════════════════════════════════════════════════════════════
- * DECLARATIVE STYLE - Watch Many, Do One Thing
- * ═══════════════════════════════════════════════════════════════════════════════
- *
- * ```javascript
- * const price = input('price').render();
- * const quantity = input('quantity').render();
- * const discount = input('discount').render();
- * const total = paragraph('total').render();
- *
- * // Update total whenever ANY input changes
- * watcher('calculator')
- *     .watchMany([price, quantity, discount], () => {
- *         const p = parseFloat(price.getValue()) || 0;
- *         const q = parseInt(quantity.getValue()) || 0;
- *         const d = parseFloat(discount.getValue()) || 0;
- *
- *         const subtotal = p * q;
- *         const finalTotal = subtotal - (subtotal * d / 100);
- *
- *         total.text(`Total: $${finalTotal.toFixed(2)}`);
- *     });
- * ```
- *
- * ═══════════════════════════════════════════════════════════════════════════════
- * STOP WATCHING
- * ═══════════════════════════════════════════════════════════════════════════════
- *
- * ```javascript
- * const myWatcher = watcher('temp');
- * const myInput = input('field').render();
- *
- * const myCallback = () => console.log('Changed!');
- *
- * myWatcher.watch(myInput, myCallback);
- *
- * // Later: stop watching
- * myWatcher.unwatch(myInput, myCallback);
- *
- * // Or stop watching ALL callbacks for this component
- * myWatcher.unwatchAll(myInput);
- *
- * // Or clear everything
- * myWatcher.clear();
- * ```
- *
- * ═══════════════════════════════════════════════════════════════════════════════
- * HOW IT WORKS
- * ═══════════════════════════════════════════════════════════════════════════════
- *
- * 1. Watcher stores callbacks keyed by component._id
- * 2. Component's Proxy detects state changes
- * 3. Component calls watcher.notify(component) [if integrated]
- * 4. Watcher runs all registered callbacks for that component
- *
- * Current limitation: Manual notification required. To auto-notify:
- *
- * ```javascript
- * // In your component after state change:
- * this._notifyWatchers();
- * ```
- *
- * Or integrate into BaseComponent.update():
- *
- * ```typescript
- * update(prop: string, value: any): void {
- *     // ...existing update logic...
- *     this._watchers.forEach(w => w.notify(this));
- * }
- * ```
- */
-export declare class Watcher {
-    private _id;
-    private _callbacks;
-    constructor(id: string);
-    /**
-     * Watch a component and run callback when it changes
-     *
-     * @param component - Component to watch
-     * @param callback - Function to run on change
-     * @returns this (for chaining)
-     */
-    watch(component: BaseComponent<any>, callback: Function): this;
-    /**
-     * Watch multiple components with the same callback
-     *
-     * @param components - Array of components to watch
-     * @param callback - Function to run when ANY of them change
-     * @returns this (for chaining)
-     */
-    watchMany(components: BaseComponent<any>[], callback: Function): this;
-    /**
-     * Stop watching a component (remove specific callback)
-     *
-     * @param component - Component to stop watching
-     * @param callback - Specific callback to remove
-     * @returns this (for chaining)
-     */
-    unwatch(component: BaseComponent<any>, callback: Function): this;
-    /**
-     * Stop watching a component (remove ALL callbacks)
-     *
-     * @param component - Component to stop watching completely
-     * @returns this (for chaining)
-     */
-    unwatchAll(component: BaseComponent<any>): this;
-    /**
-     * Notify all callbacks for a component (call this when component changes)
-     *
-     * @param component - Component that changed
-     * @param args - Optional arguments to pass to callbacks
-     */
-    notify(component: BaseComponent<any>, ...args: any[]): void;
-    /**
-     * Clear all watched components and callbacks
-     *
-     * @returns this (for chaining)
-     */
-    clear(): this;
-    /**
-     * Get list of component IDs being watched
-     *
-     * @returns Array of component IDs
-     */
-    getWatchedIds(): string[];
-    /**
-     * Get count of callbacks for a component
-     *
-     * @param component - Component to check
-     * @returns Number of callbacks registered
-     */
-    getCallbackCount(component: BaseComponent<any>): number;
-    /**
-     * Check if watching a component
-     *
-     * @param component - Component to check
-     * @returns true if watching this component
-     */
-    isWatching(component: BaseComponent<any>): boolean;
-}
-/**
- * Create a new watcher instance
- *
- * @param id - Unique identifier for this watcher
- * @returns New Watcher instance
- */
-export declare function watcher(id: string): Watcher;
-//# sourceMappingURL=watcher.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"watcher.d.ts","sourceRoot":"","sources":["watcher.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoHG;AAEH,qBAAa,OAAO;IAChB,OAAO,CAAC,GAAG,CAAS;IACpB,OAAO,CAAC,UAAU,CAAyC;gBAE/C,EAAE,EAAE,MAAM;IAItB;;;;;;OAMG;IACH,KAAK,CAAC,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI;IAW9D;;;;;;OAMG;IACH,SAAS,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI;IAKrE;;;;;;OAMG;IACH,OAAO,CAAC,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI;IAgBhE;;;;;OAKG;IACH,UAAU,CAAC,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IAK/C;;;;;OAKG;IACH,MAAM,CAAC,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI;IAc3D;;;;OAIG;IACH,KAAK,IAAI,IAAI;IAKb;;;;OAIG;IACH,aAAa,IAAI,MAAM,EAAE;IAIzB;;;;;OAKG;IACH,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,GAAG,MAAM;IAIvD;;;;;OAKG;IACH,UAAU,CAAC,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,GAAG,OAAO;CAGrD;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAE3C"}

package/lib/components/watcher.js

@@ -1,241 +0,0 @@
-/**
- * 🔍 WATCHER - Simple Component Observer
- *
- * Watches JUX components and fires callbacks when their state changes.
- * Think of it as a "subscribe to component updates" utility.
- *
- * ═══════════════════════════════════════════════════════════════════════════════
- * BASIC USAGE
- * ═══════════════════════════════════════════════════════════════════════════════
- *
- * ```javascript
- * import { input, paragraph, watcher } from 'juxscript';
- *
- * const nameInput = input('name').render('app');
- * const greeting = paragraph('greeting').render('app');
- *
- * // Watch nameInput and update greeting whenever it changes
- * watcher('name-watcher')
- *     .watch(nameInput, () => {
- *         greeting.text(`Hello, ${nameInput.getValue()}!`);
- *     });
- * ```
- *
- * ═══════════════════════════════════════════════════════════════════════════════
- * MULTIPLE COMPONENTS
- * ═══════════════════════════════════════════════════════════════════════════════
- *
- * ```javascript
- * const firstNameInput = input('firstName').render();
- * const lastNameInput = input('lastName').render();
- * const fullName = paragraph('fullName').render();
- *
- * const formWatcher = watcher('form');
- *
- * // Watch both inputs, same callback
- * formWatcher
- *     .watch(firstNameInput, updateFullName)
- *     .watch(lastNameInput, updateFullName);
- *
- * function updateFullName() {
- *     const first = firstNameInput.getValue();
- *     const last = lastNameInput.getValue();
- *     fullName.text(`${first} ${last}`.trim());
- * }
- * ```
- *
- * ═══════════════════════════════════════════════════════════════════════════════
- * DECLARATIVE STYLE - Watch Many, Do One Thing
- * ═══════════════════════════════════════════════════════════════════════════════
- *
- * ```javascript
- * const price = input('price').render();
- * const quantity = input('quantity').render();
- * const discount = input('discount').render();
- * const total = paragraph('total').render();
- *
- * // Update total whenever ANY input changes
- * watcher('calculator')
- *     .watchMany([price, quantity, discount], () => {
- *         const p = parseFloat(price.getValue()) || 0;
- *         const q = parseInt(quantity.getValue()) || 0;
- *         const d = parseFloat(discount.getValue()) || 0;
- *
- *         const subtotal = p * q;
- *         const finalTotal = subtotal - (subtotal * d / 100);
- *
- *         total.text(`Total: $${finalTotal.toFixed(2)}`);
- *     });
- * ```
- *
- * ═══════════════════════════════════════════════════════════════════════════════
- * STOP WATCHING
- * ═══════════════════════════════════════════════════════════════════════════════
- *
- * ```javascript
- * const myWatcher = watcher('temp');
- * const myInput = input('field').render();
- *
- * const myCallback = () => console.log('Changed!');
- *
- * myWatcher.watch(myInput, myCallback);
- *
- * // Later: stop watching
- * myWatcher.unwatch(myInput, myCallback);
- *
- * // Or stop watching ALL callbacks for this component
- * myWatcher.unwatchAll(myInput);
- *
- * // Or clear everything
- * myWatcher.clear();
- * ```
- *
- * ═══════════════════════════════════════════════════════════════════════════════
- * HOW IT WORKS
- * ═══════════════════════════════════════════════════════════════════════════════
- *
- * 1. Watcher stores callbacks keyed by component._id
- * 2. Component's Proxy detects state changes
- * 3. Component calls watcher.notify(component) [if integrated]
- * 4. Watcher runs all registered callbacks for that component
- *
- * Current limitation: Manual notification required. To auto-notify:
- *
- * ```javascript
- * // In your component after state change:
- * this._notifyWatchers();
- * ```
- *
- * Or integrate into BaseComponent.update():
- *
- * ```typescript
- * update(prop: string, value: any): void {
- *     // ...existing update logic...
- *     this._watchers.forEach(w => w.notify(this));
- * }
- * ```
- */
-export class Watcher {
-    constructor(id) {
-        this._callbacks = new Map();
-        this._id = id;
-    }
-    /**
-     * Watch a component and run callback when it changes
-     *
-     * @param component - Component to watch
-     * @param callback - Function to run on change
-     * @returns this (for chaining)
-     */
-    watch(component, callback) {
-        const id = component._id;
-        if (!this._callbacks.has(id)) {
-            this._callbacks.set(id, new Set());
-        }
-        this._callbacks.get(id).add(callback);
-        return this;
-    }
-    /**
-     * Watch multiple components with the same callback
-     *
-     * @param components - Array of components to watch
-     * @param callback - Function to run when ANY of them change
-     * @returns this (for chaining)
-     */
-    watchMany(components, callback) {
-        components.forEach(component => this.watch(component, callback));
-        return this;
-    }
-    /**
-     * Stop watching a component (remove specific callback)
-     *
-     * @param component - Component to stop watching
-     * @param callback - Specific callback to remove
-     * @returns this (for chaining)
-     */
-    unwatch(component, callback) {
-        const id = component._id;
-        const callbacks = this._callbacks.get(id);
-        if (callbacks) {
-            callbacks.delete(callback);
-            // Clean up empty sets
-            if (callbacks.size === 0) {
-                this._callbacks.delete(id);
-            }
-        }
-        return this;
-    }
-    /**
-     * Stop watching a component (remove ALL callbacks)
-     *
-     * @param component - Component to stop watching completely
-     * @returns this (for chaining)
-     */
-    unwatchAll(component) {
-        this._callbacks.delete(component._id);
-        return this;
-    }
-    /**
-     * Notify all callbacks for a component (call this when component changes)
-     *
-     * @param component - Component that changed
-     * @param args - Optional arguments to pass to callbacks
-     */
-    notify(component, ...args) {
-        const callbacks = this._callbacks.get(component._id);
-        if (callbacks && callbacks.size > 0) {
-            callbacks.forEach(callback => {
-                try {
-                    callback(...args);
-                }
-                catch (error) {
-                    console.error(`[Watcher ${this._id}] Callback error:`, error);
-                }
-            });
-        }
-    }
-    /**
-     * Clear all watched components and callbacks
-     *
-     * @returns this (for chaining)
-     */
-    clear() {
-        this._callbacks.clear();
-        return this;
-    }
-    /**
-     * Get list of component IDs being watched
-     *
-     * @returns Array of component IDs
-     */
-    getWatchedIds() {
-        return Array.from(this._callbacks.keys());
-    }
-    /**
-     * Get count of callbacks for a component
-     *
-     * @param component - Component to check
-     * @returns Number of callbacks registered
-     */
-    getCallbackCount(component) {
-        return this._callbacks.get(component._id)?.size || 0;
-    }
-    /**
-     * Check if watching a component
-     *
-     * @param component - Component to check
-     * @returns true if watching this component
-     */
-    isWatching(component) {
-        return this._callbacks.has(component._id);
-    }
-}
-/**
- * Create a new watcher instance
- *
- * @param id - Unique identifier for this watcher
- * @returns New Watcher instance
- */
-export function watcher(id) {
-    return new Watcher(id);
-}