juxscript 1.1.239 → 1.1.243

package/lib/components/history/StateHistory.ts

@@ -1,200 +0,0 @@
-/**
- * State History Tracker
- * Tracks all state mutations for time-travel debugging and undo/redo
- */
-
-export interface StateSnapshot<T = any> {
-    timestamp: number;
-    componentId: string;
-    property: string;
-    oldValue: T;
-    newValue: T;
-    stackTrace?: string;
-}
-
-export interface EventSnapshot {
-    timestamp: number;
-    componentId: string;
-    eventType: 'bind' | 'sync' | 'callback' | 'trigger';
-    eventName: string;
-    details: Record<string, any>;
-}
-
-export class StateHistory {
-    private stateSnapshots: StateSnapshot[] = [];
-    private eventSnapshots: EventSnapshot[] = [];
-    private maxHistory: number = 100;
-    private currentIndex: number = -1;
-    private isReplaying: boolean = false;
-
-    /**
-     * Record a state change
-     */
-    recordStateChange<T>(
-        componentId: string,
-        property: string,
-        oldValue: T,
-        newValue: T
-    ): void {
-        if (this.isReplaying) return; // Don't record during replay
-
-        const snapshot: StateSnapshot<T> = {
-            timestamp: Date.now(),
-            componentId,
-            property,
-            oldValue,
-            newValue,
-            stackTrace: new Error().stack
-        };
-
-        // Trim future history if we're not at the end
-        if (this.currentIndex < this.stateSnapshots.length - 1) {
-            this.stateSnapshots = this.stateSnapshots.slice(0, this.currentIndex + 1);
-        }
-
-        this.stateSnapshots.push(snapshot);
-        this.currentIndex = this.stateSnapshots.length - 1;
-
-        // Trim if exceeds max
-        if (this.stateSnapshots.length > this.maxHistory) {
-            this.stateSnapshots.shift();
-            this.currentIndex--;
-        }
-    }
-
-    /**
-     * Record an event (bind, sync, callback, trigger)
-     */
-    recordEvent(
-        componentId: string,
-        eventType: 'bind' | 'sync' | 'callback' | 'trigger',
-        eventName: string,
-        details: Record<string, any> = {}
-    ): void {
-        const snapshot: EventSnapshot = {
-            timestamp: Date.now(),
-            componentId,
-            eventType,
-            eventName,
-            details
-        };
-
-        this.eventSnapshots.push(snapshot);
-
-        // Trim if exceeds max
-        if (this.eventSnapshots.length > this.maxHistory) {
-            this.eventSnapshots.shift();
-        }
-    }
-
-    /**
-     * Get timeline of all changes and events
-     */
-    getTimeline(): Array<StateSnapshot | EventSnapshot> {
-        return [...this.stateSnapshots, ...this.eventSnapshots]
-            .sort((a, b) => a.timestamp - b.timestamp);
-    }
-
-    /**
-     * Get state snapshots for a specific component
-     */
-    getComponentHistory(componentId: string): StateSnapshot[] {
-        return this.stateSnapshots.filter(s => s.componentId === componentId);
-    }
-
-    /**
-     * Get event snapshots for a specific component
-     */
-    getComponentEvents(componentId: string): EventSnapshot[] {
-        return this.eventSnapshots.filter(s => s.componentId === componentId);
-    }
-
-    /**
-     * Check if we can roll back
-     */
-    canRollback(): boolean {
-        return this.currentIndex > 0;
-    }
-
-    /**
-     * Check if we can roll forward
-     */
-    canRollforward(): boolean {
-        return this.currentIndex < this.stateSnapshots.length - 1;
-    }
-
-    /**
-     * Get the current snapshot (for rollback)
-     */
-    getCurrentSnapshot(): StateSnapshot | null {
-        if (this.currentIndex >= 0 && this.currentIndex < this.stateSnapshots.length) {
-            return this.stateSnapshots[this.currentIndex];
-        }
-        return null;
-    }
-
-    /**
-     * Move index for rollback
-     */
-    moveBack(): StateSnapshot | null {
-        if (this.canRollback()) {
-            this.currentIndex--;
-            return this.stateSnapshots[this.currentIndex];
-        }
-        return null;
-    }
-
-    /**
-     * Move index for rollforward
-     */
-    moveForward(): StateSnapshot | null {
-        if (this.canRollforward()) {
-            this.currentIndex++;
-            return this.stateSnapshots[this.currentIndex];
-        }
-        return null;
-    }
-
-    /**
-     * Mark as replaying to prevent recursive recording
-     */
-    startReplay(): void {
-        this.isReplaying = true;
-    }
-
-    /**
-     * End replay mode
-     */
-    endReplay(): void {
-        this.isReplaying = false;
-    }
-
-    /**
-     * Clear all history
-     */
-    clear(): void {
-        this.stateSnapshots = [];
-        this.eventSnapshots = [];
-        this.currentIndex = -1;
-    }
-
-    /**
-     * Get summary statistics
-     */
-    getStats() {
-        return {
-            totalStateChanges: this.stateSnapshots.length,
-            totalEvents: this.eventSnapshots.length,
-            currentIndex: this.currentIndex,
-            canRollback: this.canRollback(),
-            canRollforward: this.canRollforward(),
-            components: new Set([
-                ...this.stateSnapshots.map(s => s.componentId),
-                ...this.eventSnapshots.map(s => s.componentId)
-            ]).size
-        };
-    }
-}
-
-// Global singleton
-export const stateHistory = new StateHistory();

package/lib/components/icon.d.ts

@@ -1,36 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-export interface IconOptions {
-    value?: string;
-    size?: string;
-    color?: string;
-    useEmoji?: boolean;
-    iconCollection?: string;
-    style?: string;
-    class?: string;
-}
-type IconState = {
-    value: string;
-    size: string;
-    color: string;
-    useEmoji: boolean;
-    iconCollection: string;
-    style: string;
-    class: string;
-};
-export declare class Icon extends BaseComponent<IconState> {
-    constructor(id: string, options?: IconOptions);
-    protected getTriggerEvents(): readonly string[];
-    protected getCallbackEvents(): readonly string[];
-    value(value: string): this;
-    size(value: string): this;
-    color(value: string): this;
-    useEmoji(value: boolean): this;
-    iconCollection(value: string): this;
-    style(value: string): this;
-    class(value: string): this;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-    update(prop: string, value: any): void;
-}
-export declare function icon(id: string, options: IconOptions): Icon;
-export {};
-//# sourceMappingURL=icon.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAOxD,MAAM,WAAW,WAAW;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,SAAS,GAAG;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBAClC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAYjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAUhD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK9B,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKnC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAS1B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IAiFlE,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;CAGzC;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAE3D"}

package/lib/components/icon.js

@@ -1,135 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { renderIcon, renderEmoji } from './icons.js';
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = [];
-export class Icon extends BaseComponent {
-    constructor(id, options = {}) {
-        super(id, {
-            value: options.value ?? '',
-            size: options.size ?? '24px',
-            color: options.color ?? '',
-            useEmoji: options.useEmoji ?? false,
-            iconCollection: options.iconCollection ?? '',
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    // ✅ Inherited from BaseComponent
-    value(value) {
-        this.state.value = value;
-        return this;
-    }
-    size(value) {
-        this.state.size = value;
-        return this;
-    }
-    color(value) {
-        this.state.color = value;
-        return this;
-    }
-    useEmoji(value) {
-        this.state.useEmoji = value;
-        return this;
-    }
-    iconCollection(value) {
-        this.state.iconCollection = value;
-        return this;
-    }
-    style(value) {
-        this.state.style = value;
-        return this;
-    }
-    class(value) {
-        this.state.class = value;
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { value, size, color, useEmoji, iconCollection, style, class: className } = this.state;
-        const wrapper = document.createElement('span');
-        wrapper.className = 'jux-icon';
-        wrapper.id = this._id;
-        if (className)
-            wrapper.className += ` ${className}`;
-        if (style)
-            wrapper.setAttribute('style', style);
-        const iconElement = useEmoji ? renderEmoji(value) : renderIcon(value, iconCollection);
-        iconElement.style.width = size;
-        iconElement.style.height = size;
-        if (color)
-            iconElement.style.color = color;
-        wrapper.appendChild(iconElement);
-        this._wireStandardEvents(wrapper);
-        // Wire sync bindings
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'value') {
-                const transform = toComponent || ((v) => String(v));
-                stateObj.subscribe((val) => {
-                    const transformed = transform(val);
-                    this.state.value = transformed;
-                    wrapper.innerHTML = '';
-                    const newIcon = this.state.useEmoji ? renderEmoji(transformed) : renderIcon(transformed, this.state.iconCollection);
-                    newIcon.style.width = this.state.size;
-                    newIcon.style.height = this.state.size;
-                    if (this.state.color)
-                        newIcon.style.color = this.state.color;
-                    wrapper.appendChild(newIcon);
-                    requestAnimationFrame(() => {
-                        if (window.Iconify) {
-                            window.Iconify.scan();
-                        }
-                    });
-                });
-            }
-            else if (property === 'size') {
-                const transform = toComponent || ((v) => String(v));
-                stateObj.subscribe((val) => {
-                    const transformed = transform(val);
-                    const icon = wrapper.querySelector('img, svg, span');
-                    if (icon instanceof HTMLElement) {
-                        icon.style.width = transformed;
-                        icon.style.height = transformed;
-                    }
-                    this.state.size = transformed;
-                });
-            }
-            else if (property === 'color') {
-                const transform = toComponent || ((v) => String(v));
-                stateObj.subscribe((val) => {
-                    const transformed = transform(val);
-                    const icon = wrapper.querySelector('img, svg, span');
-                    if (icon instanceof HTMLElement) {
-                        icon.style.color = transformed;
-                    }
-                    this.state.color = transformed;
-                });
-            }
-        });
-        container.appendChild(wrapper);
-        requestAnimationFrame(() => {
-            if (window.lucide) {
-                window.lucide.createIcons();
-            }
-        });
-        return this;
-    }
-    update(prop, value) {
-        // No reactive updates needed
-    }
-}
-export function icon(id, options) {
-    return new Icon(id, options);
-}

package/lib/components/icon.ts

@@ -1,182 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { renderIcon, renderEmoji } from './icons.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = [] as const;
-
-export interface IconOptions {
-    value?: string;
-    size?: string;
-    color?: string;
-    useEmoji?: boolean;
-    iconCollection?: string;
-    style?: string;
-    class?: string;
-}
-
-type IconState = {
-    value: string;
-    size: string;
-    color: string;
-    useEmoji: boolean;
-    iconCollection: string;
-    style: string;
-    class: string;
-};
-
-export class Icon extends BaseComponent<IconState> {
-    constructor(id: string, options: IconOptions = {}) {
-        super(id, {
-            value: options.value ?? '',
-            size: options.size ?? '24px',
-            color: options.color ?? '',
-            useEmoji: options.useEmoji ?? false,
-            iconCollection: options.iconCollection ?? '',
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    // ✅ Inherited from BaseComponent
-
-    value(value: string): this {
-        this.state.value = value;
-        return this;
-    }
-
-    size(value: string): this {
-        this.state.size = value;
-        return this;
-    }
-
-    color(value: string): this {
-        this.state.color = value;
-        return this;
-    }
-
-    useEmoji(value: boolean): this {
-        this.state.useEmoji = value;
-        return this;
-    }
-
-    iconCollection(value: string): this {
-        this.state.iconCollection = value;
-        return this;
-    }
-
-    style(value: string): this {
-        this.state.style = value;
-        return this;
-    }
-
-    class(value: string): this {
-        this.state.class = value;
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this {
-        const container = this._setupContainer(targetId);
-
-        const { value, size, color, useEmoji, iconCollection, style, class: className } = this.state;
-
-        const wrapper = document.createElement('span');
-        wrapper.className = 'jux-icon';
-        wrapper.id = this._id;
-        if (className) wrapper.className += ` ${className}`;
-        if (style) wrapper.setAttribute('style', style);
-
-        const iconElement = useEmoji ? renderEmoji(value) : renderIcon(value, iconCollection);
-        iconElement.style.width = size;
-        iconElement.style.height = size;
-        if (color) iconElement.style.color = color;
-
-        wrapper.appendChild(iconElement);
-
-        this._wireStandardEvents(wrapper);
-
-        // Wire sync bindings
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'value') {
-                const transform = toComponent || ((v: any) => String(v));
-
-                stateObj.subscribe((val: any) => {
-                    const transformed = transform(val);
-                    this.state.value = transformed;
-
-                    wrapper.innerHTML = '';
-                    const newIcon = this.state.useEmoji ? renderEmoji(transformed) : renderIcon(transformed, this.state.iconCollection);
-                    newIcon.style.width = this.state.size;
-                    newIcon.style.height = this.state.size;
-                    if (this.state.color) newIcon.style.color = this.state.color;
-                    wrapper.appendChild(newIcon);
-
-                    requestAnimationFrame(() => {
-                        if ((window as any).Iconify) {
-                            (window as any).Iconify.scan();
-                        }
-                    });
-                });
-            }
-            else if (property === 'size') {
-                const transform = toComponent || ((v: any) => String(v));
-
-                stateObj.subscribe((val: any) => {
-                    const transformed = transform(val);
-                    const icon = wrapper.querySelector('img, svg, span');
-                    if (icon instanceof HTMLElement) {
-                        icon.style.width = transformed;
-                        icon.style.height = transformed;
-                    }
-                    this.state.size = transformed;
-                });
-            }
-            else if (property === 'color') {
-                const transform = toComponent || ((v: any) => String(v));
-
-                stateObj.subscribe((val: any) => {
-                    const transformed = transform(val);
-                    const icon = wrapper.querySelector('img, svg, span');
-                    if (icon instanceof HTMLElement) {
-                        icon.style.color = transformed;
-                    }
-                    this.state.color = transformed;
-                });
-            }
-        });
-
-        container.appendChild(wrapper);
-
-        requestAnimationFrame(() => {
-            if ((window as any).lucide) {
-                (window as any).lucide.createIcons();
-            }
-        });
-
-        return this;
-    }
-
-    update(prop: string, value: any): void {
-        // No reactive updates needed
-    }
-}
-
-export function icon(id: string, options: IconOptions): Icon {
-    return new Icon(id, options);
-}

package/lib/components/icons.d.ts

@@ -1,25 +0,0 @@
-/**
- * Icon utilities for components
- * All icons are rendered through Iconify with configurable collections (lucide, heroicons, streamline, etc.)
- */
-/**
- * Render an icon from emoji, icon name, or image path
- * @param value - Emoji (🚀), icon name (rocket), or image path (/icon.png)
- * @param collection - Optional icon collection override (lucide, mdi, tabler, etc.)
- * @returns HTMLElement containing the icon
- *
- * Usage:
- *   const icon = renderIcon('🚀');                 // Default collection icon
- *   const icon = renderIcon('📎', 'mdi');          // MDI collection
- *   const icon = renderIcon('lucide:rocket');      // Explicit lucide collection
- *   const icon = renderIcon('mdi:home');           // Explicit mdi collection
- *   const icon = renderIcon('/icon.png');          // Image element
- */
-export declare function renderIcon(value: string, collection?: string): HTMLElement;
-/**
- * Render raw emoji without conversion
- * @param emoji - The emoji character
- * @returns HTMLElement containing just the emoji
- */
-export declare function renderEmoji(emoji: string): HTMLElement;
-//# sourceMappingURL=icons.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["icons.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAqSH;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,WAAW,CAoC1E;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,CAEtD"}