juxscript 1.1.28 → 1.1.31

package/lib/components/history/StateHistory.ts

@@ -0,0 +1,200 @@
+/**
+ * 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/pen.d.ts

@@ -0,0 +1,125 @@
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
+export interface PenShape {
+    id: string;
+    type: 'line' | 'rectangle' | 'circle' | 'text';
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    radius?: number;
+    text?: string;
+    color?: string;
+    fillColor?: string;
+    strokeWidth?: number;
+    connectedTo?: string[];
+}
+export interface PenConnection {
+    from: string;
+    to: string;
+    color?: string;
+    strokeWidth?: number;
+    dashed?: boolean;
+}
+export interface PenOptions {
+    width?: number | string;
+    height?: number | string;
+    backgroundColor?: string;
+    backgroundImage?: string;
+    border?: string;
+    text?: string;
+    radius?: number;
+    gridEnabled?: boolean;
+    gridSize?: number;
+    gridColor?: string;
+    style?: string;
+    class?: string;
+}
+type PenState = BaseState & {
+    width: number | string;
+    height: number | string;
+    backgroundColor: string;
+    backgroundImage: string;
+    border: string;
+    text: string;
+    radius: number;
+    gridEnabled: boolean;
+    gridSize: number;
+    gridColor: string;
+    shapes: PenShape[];
+    connections: PenConnection[];
+};
+export declare class Pen extends BaseComponent<PenState> {
+    private _canvas;
+    private _ctx;
+    private _animationFrame?;
+    constructor(id: string, options?: PenOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    update(prop: string, value: any): void;
+    width(value: number | string): this;
+    height(value: number | string): this;
+    backgroundColor(value: string): this;
+    backgroundImage(value: string): this;
+    border(value: string): this;
+    text(value: string): this;
+    radius(value: number): this;
+    grid(enabled: boolean, size?: number, color?: string): this;
+    /**
+     * Add a line shape
+     */
+    drawLine(x1: number, y1: number, x2: number, y2: number, options?: Partial<PenShape>): this;
+    /**
+     * Add a rectangle shape
+     */
+    drawRect(x: number, y: number, width: number, height: number, options?: Partial<PenShape>): this;
+    /**
+     * Add a circle shape
+     */
+    drawCircle(x: number, y: number, radius: number, options?: Partial<PenShape>): this;
+    /**
+     * Add text to canvas
+     */
+    drawText(x: number, y: number, text: string, options?: Partial<PenShape>): this;
+    /**
+     * Connect two shapes with a line
+     */
+    connect(fromId: string, toId: string, options?: Partial<PenConnection>): this;
+    /**
+     * Remove a shape by ID
+     */
+    removeShape(id: string): this;
+    /**
+     * Clear all shapes and connections
+     */
+    clear(): this;
+    /**
+     * Get shape by ID
+     */
+    getShape(id: string): PenShape | undefined;
+    /**
+     * Get all shapes
+     */
+    getShapes(): PenShape[];
+    /**
+     * Export canvas as data URL
+     */
+    toDataURL(type?: string): string;
+    /**
+     * Download canvas as image
+     */
+    download(filename?: string): this;
+    private _updateCanvasSize;
+    private _redraw;
+    private _drawContent;
+    private _drawGrid;
+    private _drawShape;
+    private _drawConnection;
+    render(targetId?: string): this;
+    /**
+     * Cleanup on destroy
+     */
+    destroy(): void;
+}
+export declare function pen(id: string, options?: PenOptions): Pen;
+export {};
+//# sourceMappingURL=pen.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pen.d.ts","sourceRoot":"","sources":["pen.ts"],"names":[],"mappings":"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"}