juxscript 1.1.239 → 1.1.243

package/lib/components/pen.ts

@@ -1,567 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['draw', 'shapeAdd', 'shapeRemove', 'connectionAdd'] as const;
-
-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[]; // IDs of shapes connected to this one
-}
-
-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 class Pen extends BaseComponent<PenState> {
-    private _canvas: HTMLCanvasElement | null = null;
-    private _ctx: CanvasRenderingContext2D | null = null;
-    private _animationFrame?: number;
-
-    constructor(id: string, options: PenOptions = {}) {
-        super(id, {
-            width: options.width ?? '100%',
-            height: options.height ?? 400,
-            backgroundColor: options.backgroundColor ?? '#ffffff',
-            backgroundImage: options.backgroundImage ?? '',
-            border: options.border ?? '1px solid #e5e7eb',
-            text: options.text ?? '',
-            radius: options.radius ?? 0,
-            gridEnabled: options.gridEnabled ?? false,
-            gridSize: options.gridSize ?? 20,
-            gridColor: options.gridColor ?? '#f0f0f0',
-            shapes: [],
-            connections: [],
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * REACTIVE UPDATE
-     * ═════════════════════════════════════════════════════════════════ */
-
-    update(prop: string, value: any): void {
-        super.update(prop, value);
-
-        if (!this._canvas || !this._ctx) return;
-
-        switch (prop) {
-            case 'backgroundColor':
-                this._redraw();
-                break;
-            case 'backgroundImage':
-                this._redraw();
-                break;
-            case 'text':
-                this._redraw();
-                break;
-            case 'gridEnabled':
-            case 'gridSize':
-            case 'gridColor':
-                this._redraw();
-                break;
-            case 'shapes':
-            case 'connections':
-                this._redraw();
-                break;
-        }
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    width(value: number | string): this {
-        this.state.width = value;
-        if (this._canvas) {
-            this._canvas.style.width = typeof value === 'number' ? `${value}px` : value;
-            this._updateCanvasSize();
-        }
-        return this;
-    }
-
-    height(value: number | string): this {
-        this.state.height = value;
-        if (this._canvas) {
-            this._canvas.style.height = typeof value === 'number' ? `${value}px` : value;
-            this._updateCanvasSize();
-        }
-        return this;
-    }
-
-    backgroundColor(value: string): this {
-        this.state.backgroundColor = value;
-        return this;
-    }
-
-    backgroundImage(value: string): this {
-        this.state.backgroundImage = value;
-        return this;
-    }
-
-    border(value: string): this {
-        this.state.border = value;
-        if (this._canvas) {
-            this._canvas.style.border = value;
-        }
-        return this;
-    }
-
-    text(value: string): this {
-        this.state.text = value;
-        return this;
-    }
-
-    radius(value: number): this {
-        this.state.radius = value;
-        if (this._canvas) {
-            this._canvas.style.borderRadius = `${value}px`;
-        }
-        return this;
-    }
-
-    grid(enabled: boolean, size?: number, color?: string): this {
-        this.state.gridEnabled = enabled;
-        if (size !== undefined) this.state.gridSize = size;
-        if (color !== undefined) this.state.gridColor = color;
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * DRAWING API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    /**
-     * Add a line shape
-     */
-    drawLine(x1: number, y1: number, x2: number, y2: number, options: Partial<PenShape> = {}): this {
-        const shape: PenShape = {
-            id: options.id || `line-${Date.now()}-${Math.random()}`,
-            type: 'line',
-            x: x1,
-            y: y1,
-            width: x2 - x1,
-            height: y2 - y1,
-            color: options.color || '#000000',
-            strokeWidth: options.strokeWidth || 2,
-            connectedTo: options.connectedTo || []
-        };
-
-        this.state.shapes = [...this.state.shapes, shape];
-        this._triggerCallback('shapeAdd', shape);
-        return this;
-    }
-
-    /**
-     * Add a rectangle shape
-     */
-    drawRect(x: number, y: number, width: number, height: number, options: Partial<PenShape> = {}): this {
-        const shape: PenShape = {
-            id: options.id || `rect-${Date.now()}-${Math.random()}`,
-            type: 'rectangle',
-            x,
-            y,
-            width,
-            height,
-            color: options.color || '#000000',
-            fillColor: options.fillColor,
-            strokeWidth: options.strokeWidth || 2,
-            connectedTo: options.connectedTo || []
-        };
-
-        this.state.shapes = [...this.state.shapes, shape];
-        this._triggerCallback('shapeAdd', shape);
-        return this;
-    }
-
-    /**
-     * Add a circle shape
-     */
-    drawCircle(x: number, y: number, radius: number, options: Partial<PenShape> = {}): this {
-        const shape: PenShape = {
-            id: options.id || `circle-${Date.now()}-${Math.random()}`,
-            type: 'circle',
-            x,
-            y,
-            radius,
-            color: options.color || '#000000',
-            fillColor: options.fillColor,
-            strokeWidth: options.strokeWidth || 2,
-            connectedTo: options.connectedTo || []
-        };
-
-        this.state.shapes = [...this.state.shapes, shape];
-        this._triggerCallback('shapeAdd', shape);
-        return this;
-    }
-
-    /**
-     * Add text to canvas
-     */
-    drawText(x: number, y: number, text: string, options: Partial<PenShape> = {}): this {
-        const shape: PenShape = {
-            id: options.id || `text-${Date.now()}-${Math.random()}`,
-            type: 'text',
-            x,
-            y,
-            text,
-            color: options.color || '#000000',
-            connectedTo: options.connectedTo || []
-        };
-
-        this.state.shapes = [...this.state.shapes, shape];
-        this._triggerCallback('shapeAdd', shape);
-        return this;
-    }
-
-    /**
-     * Connect two shapes with a line
-     */
-    connect(fromId: string, toId: string, options: Partial<PenConnection> = {}): this {
-        const connection: PenConnection = {
-            from: fromId,
-            to: toId,
-            color: options.color || '#666666',
-            strokeWidth: options.strokeWidth || 1,
-            dashed: options.dashed || false
-        };
-
-        this.state.connections = [...this.state.connections, connection];
-
-        // Update connected shapes
-        const fromShape = this.state.shapes.find(s => s.id === fromId);
-        if (fromShape && !fromShape.connectedTo?.includes(toId)) {
-            fromShape.connectedTo = [...(fromShape.connectedTo || []), toId];
-        }
-
-        this._triggerCallback('connectionAdd', connection);
-        return this;
-    }
-
-    /**
-     * Remove a shape by ID
-     */
-    removeShape(id: string): this {
-        this.state.shapes = this.state.shapes.filter(s => s.id !== id);
-        this.state.connections = this.state.connections.filter(c => c.from !== id && c.to !== id);
-        this._triggerCallback('shapeRemove', id);
-        return this;
-    }
-
-    /**
-     * Clear all shapes and connections
-     */
-    clear(): this {
-        this.state.shapes = [];
-        this.state.connections = [];
-        return this;
-    }
-
-    /**
-     * Get shape by ID
-     */
-    getShape(id: string): PenShape | undefined {
-        return this.state.shapes.find(s => s.id === id);
-    }
-
-    /**
-     * Get all shapes
-     */
-    getShapes(): PenShape[] {
-        return this.state.shapes;
-    }
-
-    /**
-     * Export canvas as data URL
-     */
-    toDataURL(type: string = 'image/png'): string {
-        return this._canvas?.toDataURL(type) || '';
-    }
-
-    /**
-     * Download canvas as image
-     */
-    download(filename: string = 'pen-drawing.png'): this {
-        const dataURL = this.toDataURL();
-        const link = document.createElement('a');
-        link.download = filename;
-        link.href = dataURL;
-        link.click();
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * PRIVATE RENDERING
-     * ═════════════════════════════════════════════════════════════════ */
-
-    private _updateCanvasSize(): void {
-        if (!this._canvas) return;
-
-        const rect = this._canvas.getBoundingClientRect();
-        this._canvas.width = rect.width;
-        this._canvas.height = rect.height;
-        this._redraw();
-    }
-
-    private _redraw(): void {
-        if (!this._ctx || !this._canvas) return;
-
-        const { width, height } = this._canvas;
-
-        // Clear canvas
-        this._ctx.clearRect(0, 0, width, height);
-
-        // Draw background
-        if (this.state.backgroundColor) {
-            this._ctx.fillStyle = this.state.backgroundColor;
-            this._ctx.fillRect(0, 0, width, height);
-        }
-
-        // Draw background image
-        if (this.state.backgroundImage) {
-            const img = new Image();
-            img.src = this.state.backgroundImage;
-            img.onload = () => {
-                this._ctx?.drawImage(img, 0, 0, width, height);
-                this._drawContent();
-            };
-        } else {
-            this._drawContent();
-        }
-    }
-
-    private _drawContent(): void {
-        if (!this._ctx || !this._canvas) return;
-
-        // Draw grid
-        if (this.state.gridEnabled) {
-            this._drawGrid();
-        }
-
-        // Draw connections first (under shapes)
-        this.state.connections.forEach(conn => this._drawConnection(conn));
-
-        // Draw shapes
-        this.state.shapes.forEach(shape => this._drawShape(shape));
-
-        // Draw text overlay
-        if (this.state.text) {
-            this._ctx.fillStyle = '#000000';
-            this._ctx.font = '16px sans-serif';
-            this._ctx.fillText(this.state.text, 10, 30);
-        }
-
-        this._triggerCallback('draw', { shapes: this.state.shapes, connections: this.state.connections });
-    }
-
-    private _drawGrid(): void {
-        if (!this._ctx || !this._canvas) return;
-
-        const { width, height } = this._canvas;
-        const { gridSize, gridColor } = this.state;
-
-        this._ctx.strokeStyle = gridColor;
-        this._ctx.lineWidth = 1;
-
-        // Vertical lines
-        for (let x = 0; x <= width; x += gridSize) {
-            this._ctx.beginPath();
-            this._ctx.moveTo(x, 0);
-            this._ctx.lineTo(x, height);
-            this._ctx.stroke();
-        }
-
-        // Horizontal lines
-        for (let y = 0; y <= height; y += gridSize) {
-            this._ctx.beginPath();
-            this._ctx.moveTo(0, y);
-            this._ctx.lineTo(width, y);
-            this._ctx.stroke();
-        }
-    }
-
-    private _drawShape(shape: PenShape): void {
-        if (!this._ctx) return;
-
-        this._ctx.strokeStyle = shape.color || '#000000';
-        this._ctx.lineWidth = shape.strokeWidth || 2;
-
-        switch (shape.type) {
-            case 'line':
-                this._ctx.beginPath();
-                this._ctx.moveTo(shape.x, shape.y);
-                this._ctx.lineTo(shape.x + (shape.width || 0), shape.y + (shape.height || 0));
-                this._ctx.stroke();
-                break;
-
-            case 'rectangle':
-                if (shape.fillColor) {
-                    this._ctx.fillStyle = shape.fillColor;
-                    this._ctx.fillRect(shape.x, shape.y, shape.width || 0, shape.height || 0);
-                }
-                this._ctx.strokeRect(shape.x, shape.y, shape.width || 0, shape.height || 0);
-                break;
-
-            case 'circle':
-                this._ctx.beginPath();
-                this._ctx.arc(shape.x, shape.y, shape.radius || 0, 0, Math.PI * 2);
-                if (shape.fillColor) {
-                    this._ctx.fillStyle = shape.fillColor;
-                    this._ctx.fill();
-                }
-                this._ctx.stroke();
-                break;
-
-            case 'text':
-                this._ctx.fillStyle = shape.color || '#000000';
-                this._ctx.font = '14px sans-serif';
-                this._ctx.fillText(shape.text || '', shape.x, shape.y);
-                break;
-        }
-    }
-
-    private _drawConnection(conn: PenConnection): void {
-        if (!this._ctx) return;
-
-        const fromShape = this.state.shapes.find(s => s.id === conn.from);
-        const toShape = this.state.shapes.find(s => s.id === conn.to);
-
-        if (!fromShape || !toShape) return;
-
-        // Calculate center points
-        const fromX = fromShape.x + (fromShape.width || fromShape.radius || 0) / 2;
-        const fromY = fromShape.y + (fromShape.height || fromShape.radius || 0) / 2;
-        const toX = toShape.x + (toShape.width || toShape.radius || 0) / 2;
-        const toY = toShape.y + (toShape.height || toShape.radius || 0) / 2;
-
-        this._ctx.strokeStyle = conn.color || '#666666';
-        this._ctx.lineWidth = conn.strokeWidth || 1;
-
-        if (conn.dashed) {
-            this._ctx.setLineDash([5, 5]);
-        }
-
-        this._ctx.beginPath();
-        this._ctx.moveTo(fromX, fromY);
-        this._ctx.lineTo(toX, toY);
-        this._ctx.stroke();
-
-        if (conn.dashed) {
-            this._ctx.setLineDash([]);
-        }
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this {
-        const container = this._setupContainer(targetId);
-
-        const { width, height, backgroundColor, border, radius, style, class: className } = this.state;
-
-        const wrapper = document.createElement('div');
-        wrapper.className = 'jux-pen';
-        wrapper.id = `${this._id}-wrapper`;
-        if (className) wrapper.className += ` ${className}`;
-        if (style) wrapper.setAttribute('style', style);
-
-        const canvas = document.createElement('canvas');
-        canvas.id = this._id;
-        canvas.className = 'jux-pen-canvas';
-        canvas.style.width = typeof width === 'number' ? `${width}px` : width;
-        canvas.style.height = typeof height === 'number' ? `${height}px` : height;
-        canvas.style.backgroundColor = backgroundColor;
-        canvas.style.border = border;
-        canvas.style.borderRadius = `${radius}px`;
-        canvas.style.display = 'block';
-
-        this._canvas = canvas;
-        this._ctx = canvas.getContext('2d');
-
-        // Set initial canvas size
-        requestAnimationFrame(() => {
-            this._updateCanvasSize();
-        });
-
-        // Handle window resize
-        window.addEventListener('resize', () => {
-            this._updateCanvasSize();
-        });
-
-        this._wireStandardEvents(wrapper);
-        this._wireAllSyncs();
-
-        wrapper.appendChild(canvas);
-        container.appendChild(wrapper);
-
-        return this;
-    }
-
-    /**
-     * Cleanup on destroy
-     */
-    destroy(): void {
-        if (this._animationFrame) {
-            cancelAnimationFrame(this._animationFrame);
-        }
-        this.remove();
-    }
-}
-
-export function pen(id: string, options: PenOptions = {}): Pen {
-    return new Pen(id, options);
-}

package/lib/components/progress.d.ts

@@ -1,40 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-export interface ProgressOptions {
-    value?: number;
-    max?: number;
-    variant?: 'default' | 'success' | 'warning' | 'error';
-    showPercentage?: boolean;
-    label?: string;
-    size?: 'sm' | 'md' | 'lg';
-    style?: string;
-    class?: string;
-}
-type ProgressState = {
-    value: number;
-    max: number;
-    variant: string;
-    showPercentage: boolean;
-    label: string;
-    size: string;
-    style: string;
-    class: string;
-};
-export declare class Progress extends BaseComponent<ProgressState> {
-    private _bar;
-    private _label;
-    constructor(id: string, options?: ProgressOptions);
-    protected getTriggerEvents(): readonly string[];
-    protected getCallbackEvents(): readonly string[];
-    value(val: number): this;
-    max(val: number): this;
-    variant(value: 'default' | 'success' | 'warning' | 'error'): this;
-    showPercentage(value: boolean): this;
-    label(value: string): this;
-    size(value: 'sm' | 'md' | 'lg'): this;
-    private _updateProgress;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-    update(prop: string, value: any): void;
-}
-export declare function progress(id: string, options?: ProgressOptions): Progress;
-export {};
-//# sourceMappingURL=progress.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,eAAe;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,aAAa,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,OAAO,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,QAAS,SAAQ,aAAa,CAAC,aAAa,CAAC;IACtD,OAAO,CAAC,IAAI,CAA4B;IACxC,OAAO,CAAC,MAAM,CAA4B;gBAE9B,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB;IAarD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAMxB,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAMtB,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,IAAI;IAKjE,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKpC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQ1B,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;IAKrC,OAAO,CAAC,eAAe;IAevB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IAgDlE,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;CAGzC;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB,GAAG,QAAQ,CAE5E"}