juxscript 1.1.240 → 1.1.244

package/lib/components/paragraph.ts

@@ -1,123 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = [] as const;
-
-export interface ParagraphOptions {
-    content?: string;
-    class?: string;
-    style?: string;
-}
-
-type ParagraphState = {
-    content: string;
-    class: string;
-    style: string;
-};
-
-export class Paragraph extends BaseComponent<ParagraphState> {
-    constructor(id: string, options: ParagraphOptions = {}) {
-        super(id, {
-            content: options.content ?? '',
-            class: options.class ?? '',
-            style: options.style ?? ''
-        });
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    /**
-     * ✅ Reactive update implementation for Paragraph
-     * Called automatically when this.state[prop] changes via Proxy
-     */
-    update(prop: string, value: any): void {
-        const el = document.getElementById(this._id);
-        if (!el) return;
-
-        switch (prop) {
-            case 'content':
-                el.textContent = value;
-                break;
-
-            default:
-                super.update(prop, value);
-                break;
-        }
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    // ✅ Inherited from BaseComponent:
-    // - style(), class()
-    // - bind(), sync(), renderTo()
-    // - All other base methods
-
-    content(value: string): this {
-        this.state.content = value; // ✅ Triggers update()
-        return this;
-    }
-
-    /**
-     * Alias for content() - more intuitive naming
-     */
-    text(value: string): this {
-        return this.content(value);
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this {
-        const container = this._setupContainer(targetId);
-
-        const { content, style, class: className } = this.state;
-
-        const paragraph = document.createElement('p');
-        paragraph.className = 'jux-paragraph';
-        paragraph.id = this._id;
-        paragraph.textContent = content;
-        if (className) paragraph.className += ` ${className}`;
-        if (style) paragraph.setAttribute('style', style);
-
-        this._wireStandardEvents(paragraph);
-
-        // Wire sync bindings
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'content') {
-                const transform = toComponent || ((v: any) => String(v));
-
-                stateObj.subscribe((val: any) => {
-                    const transformed = transform(val);
-                    paragraph.textContent = transformed;
-                    this.state.content = transformed;
-                });
-            }
-            else if (property === 'class') {
-                const transform = toComponent || ((v: any) => String(v));
-
-                stateObj.subscribe((val: any) => {
-                    const transformed = transform(val);
-                    paragraph.className = `jux-paragraph ${transformed}`;
-                    this.state.class = transformed;
-                });
-            }
-        });
-
-        container.appendChild(paragraph);
-        return this;
-    }
-}
-
-export function paragraph(id: string, options: ParagraphOptions = {}): Paragraph {
-    return new Paragraph(id, options);
-}

package/lib/components/pen.d.ts

@@ -1,125 +0,0 @@
-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 | HTMLElement | BaseComponent<any>): 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

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

package/lib/components/pen.js

@@ -1,443 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = ['draw', 'shapeAdd', 'shapeRemove', 'connectionAdd'];
-export class Pen extends BaseComponent {
-    constructor(id, options = {}) {
-        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 ?? ''
-        });
-        this._canvas = null;
-        this._ctx = null;
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * REACTIVE UPDATE
-     * ═════════════════════════════════════════════════════════════════ */
-    update(prop, value) {
-        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) {
-        this.state.width = value;
-        if (this._canvas) {
-            this._canvas.style.width = typeof value === 'number' ? `${value}px` : value;
-            this._updateCanvasSize();
-        }
-        return this;
-    }
-    height(value) {
-        this.state.height = value;
-        if (this._canvas) {
-            this._canvas.style.height = typeof value === 'number' ? `${value}px` : value;
-            this._updateCanvasSize();
-        }
-        return this;
-    }
-    backgroundColor(value) {
-        this.state.backgroundColor = value;
-        return this;
-    }
-    backgroundImage(value) {
-        this.state.backgroundImage = value;
-        return this;
-    }
-    border(value) {
-        this.state.border = value;
-        if (this._canvas) {
-            this._canvas.style.border = value;
-        }
-        return this;
-    }
-    text(value) {
-        this.state.text = value;
-        return this;
-    }
-    radius(value) {
-        this.state.radius = value;
-        if (this._canvas) {
-            this._canvas.style.borderRadius = `${value}px`;
-        }
-        return this;
-    }
-    grid(enabled, size, color) {
-        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, y1, x2, y2, options = {}) {
-        const shape = {
-            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, y, width, height, options = {}) {
-        const shape = {
-            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, y, radius, options = {}) {
-        const shape = {
-            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, y, text, options = {}) {
-        const shape = {
-            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, toId, options = {}) {
-        const connection = {
-            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) {
-        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.state.shapes = [];
-        this.state.connections = [];
-        return this;
-    }
-    /**
-     * Get shape by ID
-     */
-    getShape(id) {
-        return this.state.shapes.find(s => s.id === id);
-    }
-    /**
-     * Get all shapes
-     */
-    getShapes() {
-        return this.state.shapes;
-    }
-    /**
-     * Export canvas as data URL
-     */
-    toDataURL(type = 'image/png') {
-        return this._canvas?.toDataURL(type) || '';
-    }
-    /**
-     * Download canvas as image
-     */
-    download(filename = 'pen-drawing.png') {
-        const dataURL = this.toDataURL();
-        const link = document.createElement('a');
-        link.download = filename;
-        link.href = dataURL;
-        link.click();
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * PRIVATE RENDERING
-     * ═════════════════════════════════════════════════════════════════ */
-    _updateCanvasSize() {
-        if (!this._canvas)
-            return;
-        const rect = this._canvas.getBoundingClientRect();
-        this._canvas.width = rect.width;
-        this._canvas.height = rect.height;
-        this._redraw();
-    }
-    _redraw() {
-        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();
-        }
-    }
-    _drawContent() {
-        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 });
-    }
-    _drawGrid() {
-        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();
-        }
-    }
-    _drawShape(shape) {
-        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;
-        }
-    }
-    _drawConnection(conn) {
-        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) {
-        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() {
-        if (this._animationFrame) {
-            cancelAnimationFrame(this._animationFrame);
-        }
-        this.remove();
-    }
-}
-export function pen(id, options = {}) {
-    return new Pen(id, options);
-}