juxscript 1.1.240 → 1.1.244

package/lib/components/grid.js

@@ -1,208 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-// Event definitions - Grid is layout-only, no interactive events
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = [];
-export class Grid extends BaseComponent {
-    constructor(id, options = {}) {
-        // Normalize columns/rows to config arrays
-        const columnsConfig = normalizeTrackConfig(options.columns || 1);
-        const rowsConfig = normalizeTrackConfig(options.rows || 1);
-        super(id, {
-            rows: rowsConfig,
-            columns: columnsConfig,
-            boundary: {
-                width: options.width ?? '', // ✅ CHANGE: Empty = inherit parent
-                height: options.height ?? '' // ✅ CHANGE: Empty = inherit parent
-            },
-            gap: options.gap ?? '0',
-            cells: new Map(),
-            style: options.style ?? '',
-            class: options.class ?? '',
-            gridder: false
-        });
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * PROPS ACCESSOR - Inherited from BaseComponent
-     * ═════════════════════════════════════════════════════════════════ */
-    // ✅ Already available via BaseComponent.props getter
-    // Access: grid.props.rows, grid.props.columns, grid.props.gap, etc.
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API - The Blueprint (Setters)
-     * ═════════════════════════════════════════════════════════════════ */
-    width(value) {
-        this.state.boundary.width = value;
-        return this;
-    }
-    height(value) {
-        this.state.boundary.height = value;
-        return this;
-    }
-    gap(value) {
-        this.state.gap = value;
-        return this;
-    }
-    /**
-     * Define rows (SETTER)
-     * @param config - Number (creates N equal rows) or Array of row configs
-     */
-    rows(config) {
-        this.state.rows = normalizeTrackConfig(config);
-        return this;
-    }
-    /**
-     * Define columns (SETTER)
-     * @param config - Number (creates N equal columns) or Array of column configs
-     */
-    columns(config) {
-        this.state.columns = normalizeTrackConfig(config);
-        return this;
-    }
-    /**
-     * Get the cell ID for a specific coordinate
-     */
-    getCellId(row, col) {
-        return `${this._id}-${row}-${col}`;
-    }
-    /**
-     * Get the DOM element for a specific cell
-     */
-    getCell(row, col) {
-        const cellId = this.getCellId(row, col);
-        return this.state.cells.get(cellId);
-    }
-    /**
-     * ✅ Enable blueprint/wireframe visualization
-     * Shows grid structure, cell coordinates, and geometric borders
-     */
-    gridder(value = true) {
-        this.state.gridder = value;
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * ORCHESTRATION - The Execution
-     * ═════════════════════════════════════════════════════════════════ */
-    /**
-     * Pattern B: The Static Orchestration
-     * Creates the grid and populates it with items in one operation
-     */
-    create(config) {
-        // Apply configuration
-        if (config.columns) {
-            this.columns(config.columns);
-        }
-        if (config.rows) {
-            this.rows(config.rows);
-        }
-        // Render the grid structure
-        this.render();
-        // Populate items
-        if (config.items) {
-            config.items.forEach(item => {
-                const targetId = item.target.replace(/^#/, '');
-                const cell = document.getElementById(targetId);
-                if (!cell) {
-                    console.warn(`[Grid] Cell not found: ${item.target}`);
-                    return;
-                }
-                if (item.component) {
-                    // Render Jux component
-                    item.component.render(`#${targetId}`);
-                }
-                else if (item.html) {
-                    cell.innerHTML = item.html;
-                }
-                else if (item.text) {
-                    cell.textContent = item.text;
-                }
-            });
-        }
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { rows, columns, boundary, gap, style, class: className, gridder } = this.state;
-        // Build grid container
-        const grid = document.createElement('div');
-        grid.className = 'jux-grid';
-        grid.id = this._id;
-        if (gridder)
-            grid.classList.add('jux-grid-gridder');
-        if (className)
-            grid.className += ` ${className}`;
-        // Apply grid styles
-        const gridTemplateRows = rows.map(r => r.height || '1fr').join(' ');
-        const gridTemplateColumns = columns.map(c => c.width || '1fr').join(' ');
-        const gridStyle = `
-            display: grid;
-            grid-template-rows: ${gridTemplateRows};
-            grid-template-columns: ${gridTemplateColumns};
-            gap: ${gap};
-            ${boundary.width ? `width: ${boundary.width};` : ''}  /* ✅ CHANGE: Only apply if set */
-            ${boundary.height ? `height: ${boundary.height};` : ''} /* ✅ CHANGE: Only apply if set */
-            ${style}
-        `;
-        grid.setAttribute('style', gridStyle.trim());
-        // Generate cells with coordinate-based IDs
-        this.state.cells.clear();
-        rows.forEach((row, rowIndex) => {
-            columns.forEach((col, colIndex) => {
-                const cell = document.createElement('div');
-                const cellId = this.getCellId(rowIndex, colIndex);
-                cell.id = cellId;
-                cell.className = 'jux-grid-cell';
-                cell.setAttribute('data-row', String(rowIndex));
-                cell.setAttribute('data-col', String(colIndex));
-                // ✅ CHANGE: Use title attribute instead of DOM element
-                if (gridder) {
-                    cell.setAttribute('title', `Cell [${rowIndex},${colIndex}] — #${cellId}`);
-                }
-                // Apply row-specific styles
-                if (row.style) {
-                    cell.setAttribute('style', (cell.getAttribute('style') || '') + row.style);
-                }
-                if (row.class) {
-                    cell.className += ` ${row.class}`;
-                }
-                // Apply column-specific styles
-                if (col.style) {
-                    cell.setAttribute('style', (cell.getAttribute('style') || '') + col.style);
-                }
-                if (col.class) {
-                    cell.className += ` ${col.class}`;
-                }
-                this.state.cells.set(cellId, cell);
-                grid.appendChild(cell);
-            });
-        });
-        this._wireStandardEvents(grid);
-        container.appendChild(grid);
-        return this;
-    }
-    update(prop, value) {
-        // No reactive updates needed
-    }
-}
-/**
- * Normalize track configuration to array format
- */
-function normalizeTrackConfig(config) {
-    if (typeof config === 'number') {
-        return Array(config).fill({});
-    }
-    return config;
-}
-/**
- * Factory function
- */
-export function grid(id, options = {}) {
-    return new Grid(id, options);
-}

package/lib/components/grid.ts

@@ -1,295 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-
-// Event definitions - Grid is layout-only, no interactive events
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = [] as const;
-
-export interface GridRowConfig {
-    height?: string;
-    style?: string;
-    class?: string;
-}
-
-export interface GridColumnConfig {
-    width?: string;
-    style?: string;
-    class?: string;
-}
-
-export interface GridItemConfig {
-    target: string;  // e.g., "#Dashboard-0-1"
-    text?: string;
-    html?: string;
-    component?: any; // Jux component instance
-}
-
-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;  // ✅ ADD: Enable blueprint visualization
-};
-
-export class Grid extends BaseComponent<GridState> {
-    constructor(id: string, options: GridOptions = {}) {
-        // Normalize columns/rows to config arrays
-        const columnsConfig = normalizeTrackConfig(options.columns || 1);
-        const rowsConfig = normalizeTrackConfig(options.rows || 1);
-
-        super(id, {
-            rows: rowsConfig,
-            columns: columnsConfig,
-            boundary: {
-                width: options.width ?? '',  // ✅ CHANGE: Empty = inherit parent
-                height: options.height ?? '' // ✅ CHANGE: Empty = inherit parent
-            },
-            gap: options.gap ?? '0',
-            cells: new Map(),
-            style: options.style ?? '',
-            class: options.class ?? '',
-            gridder: false
-        });
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * PROPS ACCESSOR - Inherited from BaseComponent
-     * ═════════════════════════════════════════════════════════════════ */
-
-    // ✅ Already available via BaseComponent.props getter
-    // Access: grid.props.rows, grid.props.columns, grid.props.gap, etc.
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API - The Blueprint (Setters)
-     * ═════════════════════════════════════════════════════════════════ */
-
-    width(value: string): this {
-        this.state.boundary.width = value;
-        return this;
-    }
-
-    height(value: string): this {
-        this.state.boundary.height = value;
-        return this;
-    }
-
-    gap(value: string): this {
-        this.state.gap = value;
-        return this;
-    }
-
-    /**
-     * Define rows (SETTER)
-     * @param config - Number (creates N equal rows) or Array of row configs
-     */
-    rows(config: GridRowConfig[] | number): this {
-        this.state.rows = normalizeTrackConfig(config);
-        return this;
-    }
-
-    /**
-     * Define columns (SETTER)
-     * @param config - Number (creates N equal columns) or Array of column configs
-     */
-    columns(config: GridColumnConfig[] | number): this {
-        this.state.columns = normalizeTrackConfig(config);
-        return this;
-    }
-
-    /**
-     * Get the cell ID for a specific coordinate
-     */
-    getCellId(row: number, col: number): string {
-        return `${this._id}-${row}-${col}`;
-    }
-
-    /**
-     * Get the DOM element for a specific cell
-     */
-    getCell(row: number, col: number): HTMLElement | undefined {
-        const cellId = this.getCellId(row, col);
-        return this.state.cells.get(cellId);
-    }
-
-    /**
-     * ✅ Enable blueprint/wireframe visualization
-     * Shows grid structure, cell coordinates, and geometric borders
-     */
-    gridder(value: boolean = true): this {
-        this.state.gridder = value;
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * ORCHESTRATION - The Execution
-     * ═════════════════════════════════════════════════════════════════ */
-
-    /**
-     * Pattern B: The Static Orchestration
-     * Creates the grid and populates it with items in one operation
-     */
-    create(config: GridCreateConfig): this {
-        // Apply configuration
-        if (config.columns) {
-            this.columns(config.columns);
-        }
-        if (config.rows) {
-            this.rows(config.rows);
-        }
-
-        // Render the grid structure
-        this.render();
-
-        // Populate items
-        if (config.items) {
-            config.items.forEach(item => {
-                const targetId = item.target.replace(/^#/, '');
-                const cell = document.getElementById(targetId);
-
-                if (!cell) {
-                    console.warn(`[Grid] Cell not found: ${item.target}`);
-                    return;
-                }
-
-                if (item.component) {
-                    // Render Jux component
-                    item.component.render(`#${targetId}`);
-                } else if (item.html) {
-                    cell.innerHTML = item.html;
-                } else if (item.text) {
-                    cell.textContent = item.text;
-                }
-            });
-        }
-
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this {
-        const container = this._setupContainer(targetId);
-
-        const { rows, columns, boundary, gap, style, class: className, gridder } = this.state;
-
-        // Build grid container
-        const grid = document.createElement('div');
-        grid.className = 'jux-grid';
-        grid.id = this._id;
-        if (gridder) grid.classList.add('jux-grid-gridder');
-        if (className) grid.className += ` ${className}`;
-
-        // Apply grid styles
-        const gridTemplateRows = rows.map(r => r.height || '1fr').join(' ');
-        const gridTemplateColumns = columns.map(c => c.width || '1fr').join(' ');
-
-        const gridStyle = `
-            display: grid;
-            grid-template-rows: ${gridTemplateRows};
-            grid-template-columns: ${gridTemplateColumns};
-            gap: ${gap};
-            ${boundary.width ? `width: ${boundary.width};` : ''}  /* ✅ CHANGE: Only apply if set */
-            ${boundary.height ? `height: ${boundary.height};` : ''} /* ✅ CHANGE: Only apply if set */
-            ${style}
-        `;
-
-        grid.setAttribute('style', gridStyle.trim());
-
-        // Generate cells with coordinate-based IDs
-        this.state.cells.clear();
-
-        rows.forEach((row, rowIndex) => {
-            columns.forEach((col, colIndex) => {
-                const cell = document.createElement('div');
-                const cellId = this.getCellId(rowIndex, colIndex);
-
-                cell.id = cellId;
-                cell.className = 'jux-grid-cell';
-                cell.setAttribute('data-row', String(rowIndex));
-                cell.setAttribute('data-col', String(colIndex));
-
-                // ✅ CHANGE: Use title attribute instead of DOM element
-                if (gridder) {
-                    cell.setAttribute('title', `Cell [${rowIndex},${colIndex}] — #${cellId}`);
-                }
-
-                // Apply row-specific styles
-                if (row.style) {
-                    cell.setAttribute('style', (cell.getAttribute('style') || '') + row.style);
-                }
-                if (row.class) {
-                    cell.className += ` ${row.class}`;
-                }
-
-                // Apply column-specific styles
-                if (col.style) {
-                    cell.setAttribute('style', (cell.getAttribute('style') || '') + col.style);
-                }
-                if (col.class) {
-                    cell.className += ` ${col.class}`;
-                }
-
-                this.state.cells.set(cellId, cell);
-                grid.appendChild(cell);
-            });
-        });
-
-        this._wireStandardEvents(grid);
-
-        container.appendChild(grid);
-        return this;
-    }
-
-    update(prop: string, value: any): void {
-        // No reactive updates needed
-    }
-}
-
-/**
- * Normalize track configuration to array format
- */
-function normalizeTrackConfig(config: GridRowConfig[] | GridColumnConfig[] | number): any[] {
-    if (typeof config === 'number') {
-        return Array(config).fill({});
-    }
-    return config;
-}
-
-/**
- * Factory function
- */
-export function grid(id: string, options: GridOptions = {}): Grid {
-    return new Grid(id, options);
-}

package/lib/components/heading.d.ts

@@ -1,25 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-export interface HeadingOptions {
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
-    content?: string;
-    class?: string;
-    style?: string;
-}
-type HeadingState = {
-    level: 1 | 2 | 3 | 4 | 5 | 6;
-    content: string;
-    class: string;
-    style: string;
-};
-export declare class Heading extends BaseComponent<HeadingState> {
-    constructor(id: string, options?: HeadingOptions);
-    protected getTriggerEvents(): readonly string[];
-    protected getCallbackEvents(): readonly string[];
-    update(prop: string, value: any): void;
-    level(value: 1 | 2 | 3 | 4 | 5 | 6): this;
-    content(value: string): this;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-}
-export declare function heading(id: string, options?: HeadingOptions): Heading;
-export {};
-//# sourceMappingURL=heading.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["heading.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,cAAc;IAC3B,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,YAAY,GAAG;IAChB,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,OAAQ,SAAQ,aAAa,CAAC,YAAY,CAAC;gBACxC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB;IASpD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAIhD,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IA0BtC,KAAK,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI;IAKzC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAS5B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA8BrE;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB,GAAG,OAAO,CAEzE"}

package/lib/components/heading.js

@@ -1,83 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = []; // Headings are display-only, no events
-export class Heading extends BaseComponent {
-    constructor(id, options = {}) {
-        super(id, {
-            level: options.level ?? 1,
-            content: options.content ?? '',
-            class: options.class ?? '',
-            style: options.style ?? ''
-        });
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    update(prop, value) {
-        const el = document.getElementById(this._id);
-        if (!el)
-            return;
-        switch (prop) {
-            case 'content':
-                el.textContent = value;
-                break;
-            case 'level':
-                // Would need to recreate element - skip for now
-                break;
-            default:
-                super.update(prop, value);
-                break;
-        }
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    // ✅ Inherited from BaseComponent:
-    // - style(), class()
-    // - bind(), sync(), renderTo()
-    // - All other base methods
-    level(value) {
-        this.state.level = value;
-        return this;
-    }
-    content(value) {
-        this.state.content = value;
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { content, level, style, class: className } = this.state;
-        const heading = document.createElement(`h${level}`);
-        heading.className = `jux-heading jux-heading-${level}`;
-        heading.id = this._id;
-        heading.textContent = content;
-        if (className)
-            heading.className += ` ${className}`;
-        if (style)
-            heading.setAttribute('style', style);
-        this._wireStandardEvents(heading);
-        // Wire sync bindings
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'content') {
-                const transform = toComponent || ((v) => String(v));
-                stateObj.subscribe((val) => {
-                    const transformed = transform(val);
-                    heading.textContent = transformed;
-                    this.state.content = transformed;
-                });
-            }
-        });
-        container.appendChild(heading);
-        return this;
-    }
-}
-export function heading(id, options = {}) {
-    return new Heading(id, options);
-}