juxscript 1.1.239 → 1.1.243

package/lib/components/dataframe.ts

@@ -1,569 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-import { DataFrame } from '../storage/DataFrame.js';
-import { FileUpload } from './fileupload.js';
-import { Table } from './table.js';
-import { Tabs } from './tabs.js';
-import { Button } from './button.js';
-import { DataFrameSource, LoadResult, dataFrameSource } from './dataframe/DataFrameSource.js';
-import { ImportSettingsModal } from './dataframe/ImportSettingsModal.js';
-
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['load', 'error', 'transform'] as const;
-
-export interface DataFrameOptions {
-    // Data source options
-    maxFileSize?: number;
-    maxSheetSize?: number;
-    sheetChunkSize?: number;
-    persistToIndexedDB?: boolean;
-    dbName?: string;
-    storeName?: string;
-
-    // Table display options
-    striped?: boolean;
-    hoverable?: boolean;
-    sortable?: boolean;
-    filterable?: boolean;
-    paginated?: boolean;
-    rowsPerPage?: number;
-
-    // Styling
-    style?: string;
-    class?: string;
-}
-
-type DataFrameState = BaseState & {
-    loaded: boolean;
-    sourceName: string;
-    rowCount: number;
-    colCount: number;
-};
-
-export class DataFrameComponent extends BaseComponent<DataFrameState> {
-    private _source: DataFrameSource;
-    private _table: Table | null = null;
-    private _tabs: Tabs | null = null;
-    private _uploadRef: FileUpload | null = null;
-    private _importModal: ImportSettingsModal;
-    private _tableOptions: {
-        striped: boolean;
-        hoverable: boolean;
-        sortable: boolean;
-        filterable: boolean;
-        paginated: boolean;
-        rowsPerPage: number;
-    };
-    private _inlineUpload: { label: string; accept: string; icon: string } | null = null;
-    private _uploadButtonLabel: string = 'Upload File';
-    private _uploadButtonIcon: string = 'upload';
-    private _uploadButtonVariant: string = 'outline';
-    private _uploadAccept: string = '.csv,.tsv,.txt,.xlsx,.xls';
-    private _uploadDescription: string = '';
-    private _showUploadIcon: boolean = true;
-    private _pendingSource: (() => Promise<void>) | null = null;
-
-    constructor(id: string, options: DataFrameOptions = {}) {
-        super(id, {
-            visible: true,
-            disabled: false,
-            loading: false,
-            style: options.style ?? '',
-            class: options.class ?? '',
-            loaded: false,
-            sourceName: '',
-            rowCount: 0,
-            colCount: 0
-        });
-
-        // Initialize data source
-        this._source = dataFrameSource({
-            maxFileSize: options.maxFileSize ?? 50,
-            maxSheetSize: options.maxSheetSize ?? 100000,
-            sheetChunkSize: options.sheetChunkSize ?? 10000,
-            persistToIndexedDB: options.persistToIndexedDB ?? false,
-            dbName: options.dbName ?? 'jux-dataframes',
-            storeName: options.storeName ?? 'frames'
-        });
-
-        // Wire up source callbacks
-        this._source.onLoad((result) => this._handleLoadResult(result));
-        this._source.onError((message) => this._handleError(message));
-        this._source.onProgress((loaded, total) => this._handleProgress(loaded, total));
-
-        // Initialize import settings modal
-        this._importModal = new ImportSettingsModal(id, this._source.driver, {
-            maxSheetSize: options.maxSheetSize ?? 100000,
-            sheetChunkSize: options.sheetChunkSize ?? 10000
-        });
-
-        this._tableOptions = {
-            striped: options.striped ?? true,
-            hoverable: options.hoverable ?? true,
-            sortable: options.sortable ?? true,
-            filterable: options.filterable ?? false,
-            paginated: options.paginated ?? true,
-            rowsPerPage: options.rowsPerPage ?? 25
-        };
-    }
-
-    protected getTriggerEvents(): readonly string[] { return TRIGGER_EVENTS; }
-    protected getCallbackEvents(): readonly string[] { return CALLBACK_EVENTS; }
-
-    /* ═══════════════════════════════════════════════════
-     * DATA SOURCE METHODS (Delegate to DataFrameSource)
-     * ═══════════════════════════════════════════════════ */
-
-    /**
-     * Load from IndexedDB storage
-     */
-    fromStorage(key: string): this {
-        const loadFn = async () => {
-            this.state.loading = true;
-            this._updateStatus('Loading...', 'loading');
-            await this._source.fromStorage(key);
-        };
-        if (this._table) { loadFn(); } else { this._pendingSource = loadFn; }
-        return this;
-    }
-
-    /**
-     * Load from a FileUpload component
-     */
-    fromUpload(upload: FileUpload): this {
-        this._uploadRef = upload;
-        this._pendingSource = async () => {
-            this._source.fromUpload(upload);
-        };
-        return this;
-    }
-
-    /**
-     * Load from inline data
-     */
-    fromData(data: Record<string, any>[] | Record<string, any[]>): this {
-        const loadFn = async () => {
-            this.state.loading = true;
-            this._updateStatus('Loading data...', 'loading');
-            this._source.fromData(data);
-        };
-        if (this._table) { loadFn(); } else { this._pendingSource = loadFn; }
-        return this;
-    }
-
-    /**
-     * Load from a URL
-     */
-    fromUrl(url: string): this {
-        const loadFn = async () => {
-            this.state.loading = true;
-            this._updateStatus('Fetching...', 'loading');
-            await this._source.fromUrl(url);
-        };
-        if (this._table) { loadFn(); } else { this._pendingSource = loadFn; }
-        return this;
-    }
-
-    /**
-     * Enable inline file upload UI
-     */
-    withUpload(label: string = 'Upload File', accept: string = '.csv,.tsv,.txt,.xlsx,.xls', icon: string = 'upload'): this {
-        this._inlineUpload = { label, accept, icon };
-        this._uploadButtonLabel = label;
-        this._uploadAccept = accept;
-        this._uploadButtonIcon = icon;
-        return this;
-    }
-
-    /* ═══════════════════════════════════════════════════
-     * UPLOAD UI CONFIGURATION
-     * ═══════════════════════════════════════════════════ */
-
-    uploadLabel(label: string): this { this._uploadButtonLabel = label; return this; }
-    uploadIcon(icon: string): this { this._uploadButtonIcon = icon; this._showUploadIcon = !!icon; return this; }
-    uploadVariant(variant: string): this { this._uploadButtonVariant = variant; return this; }
-    uploadAccept(accept: string): this { this._uploadAccept = accept; return this; }
-    uploadDescription(description: string): this { this._uploadDescription = description; return this; }
-    showUploadIcon(show: boolean): this { this._showUploadIcon = show; return this; }
-
-    /* ═══════════════════════════════════════════════════
-     * TABLE OPTIONS
-     * ═══════════════════════════════════════════════════ */
-
-    striped(v: boolean): this { this._tableOptions.striped = v; return this; }
-    hoverable(v: boolean): this { this._tableOptions.hoverable = v; return this; }
-    sortable(v: boolean): this { this._tableOptions.sortable = v; return this; }
-    filterable(v: boolean): this { this._tableOptions.filterable = v; return this; }
-    paginated(v: boolean): this { this._tableOptions.paginated = v; return this; }
-    rowsPerPage(v: number): this { this._tableOptions.rowsPerPage = v; return this; }
-
-    /* ═══════════════════════════════════════════════════
-     * ACCESSORS (Delegate to DataFrameSource)
-     * ═══════════════════════════════════════════════════ */
-
-    get df(): DataFrame | null { return this._source.df; }
-    get source(): DataFrameSource { return this._source; }
-    get table(): Table | null { return this._table; }
-    get shape(): [number, number] { return this._source.shape; }
-    get columns(): string[] { return this._source.columns; }
-
-    toRows(): Record<string, any>[] { return this._source.df?.toRows() ?? []; }
-    toCSV(delimiter?: string): string { return this._source.df?.toCSV(delimiter) ?? ''; }
-    describe(): Record<string, any> | null { return this._source.df?.describe() ?? null; }
-
-    async save(key?: string): Promise<string | null> {
-        return this._source.save(key);
-    }
-
-    /* ═══════════════════════════════════════════════════
-     * TRANSFORM API (Operate on underlying DataFrame)
-     * ═══════════════════════════════════════════════════ */
-
-    apply(fn: (df: DataFrame) => DataFrame): this {
-        const df = this._source.df;
-        if (!df) return this;
-
-        const result = fn(df);
-        this._source.fromData(result.toRows(), this.state.sourceName + ' (transformed)');
-        this._triggerCallback('transform', result, null, this);
-        return this;
-    }
-
-    filter(predicate: (row: Record<string, any>, index: number) => boolean): this {
-        return this.apply(df => df.filter(predicate));
-    }
-
-    select(...cols: string[]): this {
-        return this.apply(df => df.select(...cols));
-    }
-
-    sort(col: string, descending?: boolean): this {
-        return this.apply(df => df.sort(col, descending));
-    }
-
-    head(n: number = 5): this {
-        return this.apply(df => df.head(n));
-    }
-
-    tail(n: number = 5): this {
-        return this.apply(df => df.tail(n));
-    }
-
-    /* ═══════════════════════════════════════════════════
-     * CLEAR / RESET
-     * ═══════════════════════════════════════════════════ */
-
-    async clear(): Promise<this> {
-        await this._source.clearStorage();
-        this._source.clear();
-
-        this.state.loaded = false;
-        this.state.sourceName = '';
-        this.state.rowCount = 0;
-        this.state.colCount = 0;
-
-        if (this._table) {
-            this._table.columns([]).rows([]);
-        }
-
-        this._hideDataView();
-        this._uploadRef?.clear();
-
-        return this;
-    }
-
-    /* ═══════════════════════════════════════════════════
-     * INTERNAL HANDLERS
-     * ═══════════════════════════════════════════════════ */
-
-    private _handleLoadResult(result: LoadResult): void {
-        if (result.error) {
-            this._handleError(result.error);
-            return;
-        }
-
-        this.state.loading = false;
-        this.state.loaded = true;
-        this.state.sourceName = result.sourceName;
-        this.state.rowCount = result.df?.height ?? 0;
-        this.state.colCount = result.df?.width ?? 0;
-
-        if (result.isMultiSheet && result.sheets) {
-            this._renderMultiSheet(result.sheets, result.sourceName);
-        } else if (result.df) {
-            this._renderSingleSheet(result.df);
-        }
-
-        this._updateStatus('', 'success');
-        this._triggerCallback('load', result.df, null, this);
-    }
-
-    private _handleError(message: string): void {
-        this.state.loading = false;
-        this._updateStatus(message, 'error');
-        this._triggerCallback('error', message, null, this);
-    }
-
-    private _handleProgress(loaded: number, total: number): void {
-        const pct = total ? Math.round((loaded / total) * 100) : 0;
-        this._updateStatus(`Loading... ${pct}%`, 'loading');
-    }
-
-    private _renderSingleSheet(df: DataFrame): void {
-        if (this._table) {
-            const columnDefs = df.columns.map(col => ({ key: col, label: col }));
-            this._table.columns(columnDefs).rows(df.toRows());
-        }
-        this._showDataView();
-    }
-
-    private _renderMultiSheet(sheets: Record<string, DataFrame>, sourceName: string): void {
-        const wrapper = document.getElementById(this._id);
-        if (!wrapper) return;
-
-        // Clear existing tabs
-        const existingTabs = wrapper.querySelector('.jux-tabs');
-        if (existingTabs) existingTabs.remove();
-
-        const sheetNames = Object.keys(sheets);
-        const sanitizeId = (name: string) => name.replace(/[^a-zA-Z0-9_-]/g, '_');
-
-        const tabDefs = sheetNames.map(name => ({
-            id: sanitizeId(name),
-            label: name,
-            content: ''
-        }));
-
-        this._tabs = new Tabs(`${this._id}-tabs`, {
-            tabs: tabDefs,
-            activeTab: sanitizeId(sheetNames[0])
-        });
-
-        const dataContainer = wrapper.querySelector('.jux-dataframe-data') as HTMLElement;
-        if (dataContainer) {
-            dataContainer.style.display = '';
-            const tabsContainer = document.createElement('div');
-            tabsContainer.className = 'jux-dataframe-tabs';
-            dataContainer.appendChild(tabsContainer);
-            this._tabs.render(tabsContainer);
-        }
-
-        sheetNames.forEach(sheetName => {
-            const df = sheets[sheetName];
-            const safeId = sanitizeId(sheetName);
-
-            const table = new Table(`${this._id}-table-${safeId}`, this._tableOptions);
-            const columnDefs = df.columns.map(col => ({ key: col, label: col }));
-            table.columns(columnDefs).rows(df.toRows());
-
-            const settingsBtn = new Button(`${this._id}-settings-${safeId}`, {
-                label: '⚙️ Import Settings',
-                variant: 'ghost',
-                size: 'small'
-            });
-            settingsBtn.bind('click', () => this._showImportSettings());
-
-            this._tabs!.addTabContent(safeId, [settingsBtn, table]);
-        });
-
-        this._showDataView();
-    }
-
-    /* ═══════════════════════════════════════════════════
-     * UI HELPERS
-     * ═══════════════════════════════════════════════════ */
-
-    private _updateStatus(text: string, type: 'loading' | 'success' | 'error' | 'empty'): void {
-        const el = document.getElementById(`${this._id}-status`);
-        if (!el) return;
-
-        if (type === 'loading' || type === 'error') {
-            el.style.display = '';
-            el.className = `jux-dataframe-status jux-dataframe-status-${type}`;
-            el.textContent = text;
-        } else {
-            el.style.display = 'none';
-        }
-    }
-
-    private _showDataView(): void {
-        const wrapper = document.getElementById(this._id);
-        if (!wrapper) return;
-
-        const uploadArea = wrapper.querySelector('.jux-dataframe-upload-area') as HTMLElement;
-        if (uploadArea) uploadArea.style.display = 'none';
-
-        const dataContainer = wrapper.querySelector('.jux-dataframe-data') as HTMLElement;
-        if (dataContainer) dataContainer.style.display = '';
-
-        this._updateSettingsGear();
-    }
-
-    private _hideDataView(): void {
-        const wrapper = document.getElementById(this._id);
-        if (!wrapper) return;
-
-        const uploadArea = wrapper.querySelector('.jux-dataframe-upload-area') as HTMLElement;
-        if (uploadArea) uploadArea.style.display = '';
-
-        const dataContainer = wrapper.querySelector('.jux-dataframe-data') as HTMLElement;
-        if (dataContainer) dataContainer.style.display = 'none';
-    }
-
-    private _updateSettingsGear(): void {
-        const gear = document.getElementById(`${this._id}-settings-gear`);
-        if (!gear || !this._source.df) return;
-
-        const isMalformed = this._source.detectMalformed();
-
-        if (isMalformed) {
-            gear.classList.add('jux-dataframe-gear-warning');
-            gear.title = `${this.state.sourceName} — May need reformatting`;
-        } else {
-            gear.classList.remove('jux-dataframe-gear-warning');
-            gear.title = `${this.state.sourceName} — ${this._source.height} rows × ${this._source.width} cols`;
-        }
-    }
-
-    private _showSettingsModal(): void {
-        this._importModal.showSettings(
-            {
-                fileName: this._source.rawFileData?.file?.name || this.state.sourceName,
-                fileSize: this._source.rawFileData?.file?.size,
-                rowCount: this._source.height,
-                colCount: this._source.width,
-                isMalformed: this._source.detectMalformed(),
-                hasRawFileData: !!this._source.rawFileData
-            },
-            {
-                onClear: async () => { await this.clear(); },
-                onAdjustImport: () => { this._showImportSettings(); }
-            }
-        );
-    }
-
-    private _showImportSettings(): void {
-        const rawData = this._source.rawFileData;
-        if (!rawData) return;
-
-        this._importModal.showImportSettings(rawData, {
-            onReimport: async (result, sourceName) => {
-                if (result instanceof DataFrame) {
-                    this._source.fromData(result.toRows(), sourceName);
-                } else {
-                    // Multi-sheet - handled by source callbacks
-                }
-            },
-            onError: (message) => this._handleError(message),
-            onStatusUpdate: (text, type) => {
-                this.state.loading = type === 'loading';
-                this._updateStatus(text, type);
-            }
-        });
-    }
-
-    /* ═══════════════════════════════════════════════════
-     * RENDER
-     * ═══════════════════════════════════════════════════ */
-
-    update(_prop: string, _value: any): void { }
-
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this {
-        const container = this._setupContainer(targetId);
-        const { style, class: className } = this.state;
-
-        const wrapper = document.createElement('div');
-        wrapper.className = 'jux-dataframe';
-        wrapper.id = this._id;
-        if (className) wrapper.className += ` ${className}`;
-        if (style) wrapper.setAttribute('style', style);
-
-        // Upload area
-        if (this._inlineUpload) {
-            const uploadArea = document.createElement('div');
-            uploadArea.className = 'jux-dataframe-upload-area';
-
-            const uploadOpts: any = {
-                label: this._uploadButtonLabel,
-                accept: this._uploadAccept,
-                variant: this._uploadButtonVariant,
-            };
-            if (this._showUploadIcon) uploadOpts.icon = this._uploadButtonIcon;
-
-            const upload = new FileUpload(`${this._id}-upload`, uploadOpts);
-            this._uploadRef = upload;
-
-            // Wire upload to source
-            upload.bind('change', async (files: File[]) => {
-                if (!files || files.length === 0) {
-                    await this.clear();
-                    return;
-                }
-                this.state.loading = true;
-                this._updateStatus(`Parsing ${files[0].name}...`, 'loading');
-                await this._source.fromFile(files[0]);
-            });
-
-            const uploadContainer = document.createElement('div');
-            uploadContainer.className = 'jux-dataframe-upload';
-            uploadArea.appendChild(uploadContainer);
-
-            const statusBar = document.createElement('div');
-            statusBar.className = 'jux-dataframe-status';
-            statusBar.id = `${this._id}-status`;
-            statusBar.style.display = 'none';
-            uploadArea.appendChild(statusBar);
-
-            if (this._uploadDescription) {
-                const descEl = document.createElement('div');
-                descEl.className = 'jux-dataframe-upload-description';
-                descEl.textContent = this._uploadDescription;
-                uploadArea.appendChild(descEl);
-            }
-
-            wrapper.appendChild(uploadArea);
-            container.appendChild(wrapper);
-            upload.render(uploadContainer);
-        } else {
-            container.appendChild(wrapper);
-        }
-
-        // Data container
-        const dataContainer = document.createElement('div');
-        dataContainer.className = 'jux-dataframe-data';
-        dataContainer.style.display = 'none';
-
-        const toolbar = document.createElement('div');
-        toolbar.className = 'jux-dataframe-toolbar';
-
-        const settingsGear = document.createElement('button');
-        settingsGear.className = 'jux-dataframe-gear';
-        settingsGear.id = `${this._id}-settings-gear`;
-        settingsGear.type = 'button';
-        settingsGear.innerHTML = '⚙️';
-        settingsGear.title = 'Data Settings';
-        settingsGear.addEventListener('click', () => this._showSettingsModal());
-        toolbar.appendChild(settingsGear);
-
-        dataContainer.appendChild(toolbar);
-        wrapper.appendChild(dataContainer);
-
-        // Table
-        const tbl = new Table(`${this._id}-table`, this._tableOptions);
-        tbl.render(dataContainer);
-        this._table = tbl;
-
-        if (this._pendingSource) {
-            const fn = this._pendingSource;
-            this._pendingSource = null;
-            fn();
-        }
-
-        this._wireStandardEvents(wrapper);
-
-        return this;
-    }
-}
-
-export function dataframe(id: string, options: DataFrameOptions = {}): DataFrameComponent {
-    return new DataFrameComponent(id, options);
-}

package/lib/components/tag.ts

@@ -0,0 +1,68 @@
+import generateId from '../utils/idgen';
+
+interface TagProps {
+    id: string;
+    tagName: string;
+    content?: string;
+    options?: Record<string, string>;
+}
+class Tag extends HTMLElement {
+    content: string;
+    options: Record<string, string>;
+    constructor(data: Partial<TagProps>) {
+        super();
+        this.id = generateId();
+        this.content = data.content || '';
+        this.options = data.options || {};
+    }
+    modify() {
+        return this;
+    }
+
+    render() {
+        const el = document.createElement(this.tagName);
+        el.textContent = this.content;
+        for (const [key, value] of Object.entries(this.options)) {
+            el.setAttribute(key, value);
+        }
+        return el;
+    }
+}
+
+export function tag(data: Partial<TagProps>): Tag {
+    const t = new Tag(data);
+    return t;
+}
+export function div(data: Partial<TagProps>): Tag {
+    return tag({ ...data, tagName: 'div' });
+}
+export function span(data: Partial<TagProps>): Tag {
+    return tag({ ...data, tagName: 'span' });
+}
+export function p(data: Partial<TagProps>): Tag {
+    return tag({ ...data, tagName: 'p' });
+}
+export function code(data: Partial<TagProps>): Tag {
+    return tag({ ...data, tagName: 'code' });
+}
+export function pre(data: Partial<TagProps>): Tag {
+    return tag({ ...data, tagName: 'pre' });
+}
+export function h1(data: Partial<TagProps>): Tag {
+    return tag({ ...data, tagName: 'h1' });
+}
+export function h2(data: Partial<TagProps>): Tag {
+    return tag({ ...data, tagName: 'h2' });
+}
+export function h3(data: Partial<TagProps>): Tag {
+    return tag({ ...data, tagName: 'h3' });
+}
+export function h4(data: Partial<TagProps>): Tag {
+    return tag({ ...data, tagName: 'h4' });
+}
+export function h5(data: Partial<TagProps>): Tag {
+    return tag({ ...data, tagName: 'h5' });
+}
+export function h6(data: Partial<TagProps>): Tag {
+    return tag({ ...data, tagName: 'h6' });
+}   

package/lib/styles/shadcn.css

@@ -734,13 +734,14 @@ code {
 .jux-hstack,
 .jux-zstack {
   display: flex;
+  width: 100%;
   
   /* ✅ Use CSS variables from foundation/theme */
   gap: var(--jux-gap, 1rem);
   padding: var(--jux-pad, 0);
   
-  /* Default alignment */
-  align-items: var(--jux-align, flex-start);
+  /* Default alignment — stretch so children fill cross-axis */
+  align-items: var(--jux-align, stretch);
 }
 
 /* ═════════════════════════════════════════════════════════════════
@@ -757,7 +758,21 @@ code {
 
 .jux-hstack {
   flex-direction: row;
-  flex-wrap: wrap; /* Allow wrapping on mobile */
+  flex-wrap: nowrap; /* ✅ Don't wrap — stay horizontal */
+}
+
+/* ✅ HStack children share space equally */
+.jux-hstack > * {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ✅ Opt out for intrinsic-size elements */
+.jux-hstack > button,
+.jux-hstack > .jux-button,
+.jux-hstack > .jux-icon,
+.jux-hstack > .jux-fileupload {
+  flex: none;
 }
 
 /* ═════════════════════════════════════════════════════════════════
@@ -804,13 +819,11 @@ code {
 
 @media (max-width: 768px) {
   .jux-hstack {
-    flex-direction: column;
-    /* Gap remains consistent via CSS variables */
+    flex-wrap: wrap; /* ✅ Only wrap on mobile */
   }
   
-  /* Optional: Force HStack to stay horizontal on mobile */
   .jux-hstack.stay-horizontal {
-    flex-direction: row;
+    flex-wrap: nowrap;
   }
 }
 

package/lib/utils/idgen.ts

@@ -0,0 +1,6 @@
+
+
+export default function generateId(prefix: string = 'jux', length: number = 9): string {
+    const randomPart = Math.random().toString(36).substr(2, length); // Generate a random string
+    return `${prefix}-${randomPart}`;
+}