juxscript 1.1.240 → 1.1.244

package/lib/components/fileupload.ts

@@ -1,449 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-import { renderIcon } from './icons.js';
-import { formatIdAsLabel } from '../utils/formatId.js';
-import { FileStorage } from '../storage/FileStorage.js';
-import { TabularDriver } from '../storage/TabularDriver.js';
-import { DataFrame } from '../storage/DataFrame.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['change', 'filesSelected', 'clear', 'stored'] as const;
-
-export interface FileUploadOptions {
-    label?: string;
-    accept?: string;
-    multiple?: boolean;
-    icon?: string;
-    variant?: 'outline' | 'primary' | 'ghost' | 'secondary';
-    showFileList?: boolean;
-    maxFiles?: number;
-    maxFileSize?: number;
-    disabled?: boolean;
-    required?: boolean;
-    name?: string;
-    onValidate?: (files: File[]) => boolean | string;
-    storage?: FileStorage;
-    metadata?: Record<string, any>;
-    style?: string;
-    class?: string;
-}
-
-type FileUploadState = BaseState & {
-    label: string;
-    accept: string;
-    multiple: boolean;
-    icon: string;
-    variant: string;
-    showFileList: boolean;
-    maxFiles: number;
-    maxFileSize: number;
-    files: File[];
-};
-
-export class FileUpload extends BaseComponent<FileUploadState> {
-    private _fileListElement: HTMLElement | null = null;
-    private _storage: FileStorage | null = null;
-    private _metadata: Record<string, any> | undefined;
-
-    /** IndexedDB caching */
-    private _cacheEnabled: boolean = false;
-    private _cacheDriver: TabularDriver | null = null;
-    private _cacheDbName: string = 'jux-dataframes';
-    private _cacheStoreName: string = 'frames';
-    private _cacheKeyPrefix: string = '';
-    private _storageKeys: Map<string, string> = new Map();
-    private _lastStorageKey: string | null = null;
-    private _cachedDataFrames: Map<string, DataFrame> = new Map();
-
-    constructor(id: string, options: FileUploadOptions = {}) {
-        super(id, {
-            visible: true,
-            disabled: options.disabled ?? false,
-            loading: false,
-            class: options.class ?? '',
-            style: options.style ?? '',
-            attributes: {},
-            label: options.label ?? formatIdAsLabel(id),
-            required: options.required ?? false,
-            name: options.name ?? id,
-            errorMessage: undefined,
-            files: [],
-            accept: options.accept ?? '',
-            multiple: options.multiple ?? false,
-            icon: options.icon ?? 'upload',
-            variant: options.variant ?? 'outline',
-            showFileList: options.showFileList ?? true,
-            maxFiles: options.maxFiles ?? 10,
-            maxFileSize: options.maxFileSize ?? 10,
-        });
-
-        if (options.onValidate) {
-            this._onValidate = options.onValidate;
-        }
-
-        this._storage = options.storage ?? null;
-        this._metadata = options.metadata;
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    accept(value: string): this {
-        this.state.accept = value;
-        return this;
-    }
-
-    multiple(value: boolean): this {
-        this.state.multiple = value;
-        return this;
-    }
-
-    icon(value: string): this {
-        this.state.icon = value;
-        return this;
-    }
-
-    variant(value: 'outline' | 'primary' | 'ghost' | 'secondary'): this {
-        this.state.variant = value;
-        return this;
-    }
-
-    storage(store: FileStorage, metadata?: Record<string, any>): this {
-        this._storage = store;
-        this._metadata = metadata;
-        return this;
-    }
-
-    /**
-     * Enable IndexedDB caching of uploaded files.
-     * After upload, the file is parsed and stored as a DataFrame.
-     * The storage key is available via .storageKey and a 'stored' event fires.
-     *
-     * Usage:
-     *   jux.fileUpload('my-upload', { accept: '.csv' })
-     *       .cache()                          // enable with defaults
-     *       .cache({ prefix: 'raw/' })        // key prefix
-     *       .cache({ dbName: 'my-db' })       // custom DB
-     *
-     *   upload.bind('stored', (key, df) => {
-     *       await data().fromStorage(key).into(myTable);
-     *   });
-     */
-    cache(options: {
-        enabled?: boolean;
-        dbName?: string;
-        storeName?: string;
-        prefix?: string;
-    } = {}): this {
-        this._cacheEnabled = options.enabled ?? true;
-        if (options.dbName) this._cacheDbName = options.dbName;
-        if (options.storeName) this._cacheStoreName = options.storeName;
-        if (options.prefix) this._cacheKeyPrefix = options.prefix;
-
-        if (this._cacheEnabled && !this._cacheDriver) {
-            this._cacheDriver = new TabularDriver(this._cacheDbName, this._cacheStoreName);
-        }
-
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * STORAGE KEY ACCESSORS
-     * ═════════════════════════════════════════════════════════════════ */
-
-    /** The IndexedDB key for the most recently cached upload, or null. */
-    get storageKey(): string | null {
-        return this._lastStorageKey;
-    }
-
-    /** Map of filename → storage key for all cached files this session. */
-    get storageKeys(): ReadonlyMap<string, string> {
-        return this._storageKeys;
-    }
-
-    /** Get the storage key for a specific filename. */
-    storageKeyFor(filename: string): string | null {
-        return this._storageKeys.get(filename) ?? null;
-    }
-
-    /** The cached DataFrame for the most recent upload (after 'stored' fires). */
-    get cachedDf(): DataFrame | null {
-        if (!this._lastStorageKey) return null;
-        return this._cachedDataFrames.get(this._lastStorageKey) ?? null;
-    }
-
-    clear(): this {
-        this.state.files = [];
-        if (this._inputElement) {
-            (this._inputElement as HTMLInputElement).value = '';
-        }
-        if (this._fileListElement) {
-            this._fileListElement.innerHTML = '';
-        }
-        this._lastStorageKey = null;
-        this._triggerCallback('clear', null, null, this);
-        return this;
-    }
-
-    clearFiles(): this {
-        this.state.files = [];
-        this._updateFileList();
-        this._triggerCallback('change', [], null, this);
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FORM INPUT IMPLEMENTATION
-     * ═════════════════════════════════════════════════════════════════ */
-
-    getValue(): File[] {
-        return this.state.files;
-    }
-
-    setValue(files: File[]): this {
-        this.state.files = files;
-        this._updateFileList();
-        return this;
-    }
-
-    validate(): boolean {
-        this._hasBeenValidated = true;
-        const files = this.getValue();
-        const result = this._validateValue(files);
-
-        if (result === true) {
-            this._clearError();
-            return true;
-        } else {
-            this._showError(result as string);
-            return false;
-        }
-    }
-
-    isValid(): boolean {
-        const files = this.getValue();
-        return this._validateValue(files) === true;
-    }
-
-    protected _validateValue(files: File[]): boolean | string {
-        const { required } = this.state;
-
-        if (required && files.length === 0) {
-            return 'Please select at least one file';
-        }
-
-        if (this._onValidate) {
-            const result = this._onValidate(files);
-            if (result !== true) {
-                return result || 'Invalid files';
-            }
-        }
-
-        return true;
-    }
-
-    private _updateFileList(): void {
-        if (!this._fileListElement) return;
-
-        this._fileListElement.innerHTML = '';
-
-        if (this.state.files.length === 0) {
-            return;
-        }
-
-        this.state.files.forEach((file, index) => {
-            const fileItem = document.createElement('div');
-            fileItem.className = 'jux-fileupload-item';
-            fileItem.innerHTML = `
-                <span class="jux-fileupload-filename">${file.name}</span>
-                <span class="jux-fileupload-filesize">${this._formatFileSize(file.size)}</span>
-                <button class="jux-fileupload-remove" data-index="${index}">×</button>
-            `;
-
-            const removeBtn = fileItem.querySelector('.jux-fileupload-remove');
-            removeBtn?.addEventListener('click', () => {
-                this.state.files = this.state.files.filter((_, i) => i !== index);
-                this._updateFileList();
-                this._triggerCallback('change', this.state.files, null, this);
-            });
-
-            this._fileListElement!.appendChild(fileItem);
-        });
-    }
-
-    private _formatFileSize(bytes: number): string {
-        if (bytes === 0) return '0 Bytes';
-        const k = 1024;
-        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-        const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * INTERNAL — CACHE FILE TO INDEXEDDB
-     * ═════════════════════════════════════════════════════════════════ */
-
-    private async _cacheFile(file: File): Promise<void> {
-        if (!this._cacheEnabled || !this._cacheDriver) return;
-
-        try {
-            const key = this._cacheKeyPrefix + file.name;
-            let df: DataFrame;
-
-            const isExcel = /\.(xlsx?|xls)$/i.test(file.name);
-            if (isExcel) {
-                const sheets = await this._cacheDriver.streamFileMultiSheet(file, {});
-                const sheetNames = Object.keys(sheets);
-                if (sheetNames.length === 0) return;
-                df = sheets[sheetNames[0]];
-            } else {
-                const text = await file.text();
-                df = this._cacheDriver.parseCSV(text, {
-                    autoDetectDelimiter: true,
-                    hasHeader: true
-                });
-            }
-
-            await this._cacheDriver.store(key, df, {
-                source: file.name,
-                size: file.size,
-                type: file.type,
-                cachedAt: new Date().toISOString(),
-                ...this._metadata
-            });
-
-            this._lastStorageKey = key;
-            this._storageKeys.set(file.name, key);
-            this._cachedDataFrames.set(key, df);
-
-            this._triggerCallback('stored', key, null, this);
-        } catch (err: any) {
-            console.warn(`[FileUpload] Failed to cache ${file.name}:`, err.message);
-        }
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-
-    update(prop: string, value: any): void {
-        // No reactive updates needed
-    }
-
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this {
-        const container = this._setupContainer(targetId);
-
-        const { label, accept, multiple, icon, variant, showFileList, style, class: className } = this.state;
-
-        const wrapper = document.createElement('div');
-        wrapper.className = 'jux-fileupload';
-        wrapper.id = this._id;
-        if (className) wrapper.className += ` ${className}`;
-        if (style) wrapper.setAttribute('style', style);
-
-        const fileInput = document.createElement('input');
-        fileInput.type = 'file';
-        fileInput.accept = accept;
-        fileInput.multiple = multiple;
-        fileInput.style.display = 'none';
-        fileInput.id = `${this._id}-input`;
-        this._inputElement = fileInput;
-
-        const btn = document.createElement('button');
-        btn.className = `jux-fileupload-button jux-button-${variant}`;
-        btn.type = 'button';
-
-        if (icon) {
-            const iconEl = document.createElement('span');
-            iconEl.className = 'jux-fileupload-icon';
-            iconEl.appendChild(renderIcon(icon));
-            btn.appendChild(iconEl);
-        }
-
-        const labelSpan = document.createElement('span');
-        labelSpan.textContent = label;
-        btn.appendChild(labelSpan);
-
-        const buttonContainer = document.createElement('div');
-        buttonContainer.className = 'jux-fileupload-button-container';
-        buttonContainer.appendChild(fileInput);
-        buttonContainer.appendChild(btn);
-        wrapper.appendChild(buttonContainer);
-
-        if (showFileList) {
-            const fileList = document.createElement('div');
-            fileList.className = 'jux-fileupload-filelist';
-            this._fileListElement = fileList;
-            wrapper.appendChild(fileList);
-        }
-
-        wrapper.appendChild(this._renderError());
-
-        btn.addEventListener('click', () => fileInput.click());
-
-        // Wire up file input change — with caching
-        fileInput.addEventListener('change', async (e) => {
-            const files = Array.from(fileInput.files || []);
-            this.state.files = files;
-            this._updateFileList();
-            this._clearError();
-
-            this._triggerCallback('change', files, e, this);
-            this._triggerCallback('filesSelected', files, e, this);
-
-            if (this._storage && files.length > 0) {
-                this._storage.storeAll(files, this._metadata).then((stored) => {
-                    this._triggerCallback('stored', stored, e, this);
-                }).catch((err) => {
-                    console.error('[FileUpload] Storage error:', err);
-                });
-            }
-
-            // Cache to IndexedDB as parsed DataFrames
-            if (this._cacheEnabled && files.length > 0) {
-                for (const file of files) {
-                    await this._cacheFile(file);
-                }
-            }
-        });
-
-        this._wireStandardEvents(wrapper);
-
-        fileInput.addEventListener('blur', () => {
-            if (this._hasBeenValidated) {
-                this.validate();
-            }
-        });
-
-        const labelSync = this._syncBindings.find(b => b.property === 'label');
-        if (labelSync) {
-            const transform = labelSync.toComponent || ((v: any) => String(v));
-            labelSync.stateObj.subscribe((val: any) => {
-                this.label(transform(val));
-            });
-        }
-
-        container.appendChild(wrapper);
-
-        requestAnimationFrame(() => {
-            if ((window as any).lucide) {
-                (window as any).lucide.createIcons();
-            }
-        });
-
-        return this;
-    }
-}
-
-export function fileupload(id: string, options: FileUploadOptions = {}): FileUpload {
-    return new FileUpload(id, options);
-}

package/lib/components/grid.d.ts

@@ -1,88 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-export interface GridRowConfig {
-    height?: string;
-    style?: string;
-    class?: string;
-}
-export interface GridColumnConfig {
-    width?: string;
-    style?: string;
-    class?: string;
-}
-export interface GridItemConfig {
-    target: string;
-    text?: string;
-    html?: string;
-    component?: any;
-}
-export interface GridCreateConfig {
-    columns?: GridColumnConfig[] | number;
-    rows?: GridRowConfig[] | number;
-    items?: GridItemConfig[];
-}
-export interface GridOptions {
-    columns?: GridColumnConfig[] | number;
-    rows?: GridRowConfig[] | number;
-    width?: string;
-    height?: string;
-    gap?: string;
-    style?: string;
-    class?: string;
-}
-type GridState = {
-    rows: GridRowConfig[];
-    columns: GridColumnConfig[];
-    boundary: {
-        width: string;
-        height: string;
-    };
-    gap: string;
-    cells: Map<string, HTMLElement>;
-    style: string;
-    class: string;
-    gridder: boolean;
-};
-export declare class Grid extends BaseComponent<GridState> {
-    constructor(id: string, options?: GridOptions);
-    protected getTriggerEvents(): readonly string[];
-    protected getCallbackEvents(): readonly string[];
-    width(value: string): this;
-    height(value: string): this;
-    gap(value: string): this;
-    /**
-     * Define rows (SETTER)
-     * @param config - Number (creates N equal rows) or Array of row configs
-     */
-    rows(config: GridRowConfig[] | number): this;
-    /**
-     * Define columns (SETTER)
-     * @param config - Number (creates N equal columns) or Array of column configs
-     */
-    columns(config: GridColumnConfig[] | number): this;
-    /**
-     * Get the cell ID for a specific coordinate
-     */
-    getCellId(row: number, col: number): string;
-    /**
-     * Get the DOM element for a specific cell
-     */
-    getCell(row: number, col: number): HTMLElement | undefined;
-    /**
-     * ✅ Enable blueprint/wireframe visualization
-     * Shows grid structure, cell coordinates, and geometric borders
-     */
-    gridder(value?: boolean): this;
-    /**
-     * Pattern B: The Static Orchestration
-     * Creates the grid and populates it with items in one operation
-     */
-    create(config: GridCreateConfig): this;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-    update(prop: string, value: any): void;
-}
-/**
- * Factory function
- */
-export declare function grid(id: string, options?: GridOptions): Grid;
-export {};
-//# sourceMappingURL=grid.d.ts.map

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

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