juxscript 1.1.2 → 1.1.4

package/lib/components/grid.ts

@@ -1,291 +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): 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;
-    }
-}
-
-/**
- * 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/guard.ts

@@ -1,92 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { State } from '../reactivity/state.js';
-
-// Extend Window interface to include Jux navigation hooks
-declare global {
-    interface Window {
-        juxBeforeNavigate?: (from: string, to: string) => boolean | string;
-        juxAfterNavigate?: (path: string) => void;
-    }
-}
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['blocked', 'allowed'] as const;
-
-export interface GuardOptions {
-    authState?: State<boolean>;       // Check if user is authenticated
-    loginPath?: string;               // Where to redirect if blocked
-    protectedPaths?: string[];        // Paths that require auth
-}
-
-type GuardState = {
-    authState: State<boolean> | null;
-    loginPath: string;
-    protectedPaths: string[];
-    isActive: boolean;
-};
-
-/**
- * ⚠️ DEPRECATED: Guard component is no longer supported after removing global middleware.
- * 
- * Recommended alternatives:
- * 1. Server-side authentication (Express, FastAPI, Laravel)
- * 2. Manual route checks in each view
- * 3. Custom wrapper components
- * 
- * This component will be removed in a future version.
- */
-export class Guard extends BaseComponent<GuardState> {
-    constructor(id: string, options: GuardOptions = {}) {
-        super(id, {
-            authState: options.authState ?? null,
-            loginPath: options.loginPath ?? '/login',
-            protectedPaths: options.protectedPaths ?? [],
-            isActive: false
-        });
-
-        console.warn(
-            '[Jux Guard] DEPRECATED: Guard component no longer supported after middleware removal.\n' +
-            'Use server-side auth or manual checks instead.'
-        );
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API (No-ops now)
-     * ═════════════════════════════════════════════════════════════════ */
-
-    requireAuth(authState: State<boolean>, loginPath?: string): this {
-        console.warn('[Jux Guard] DEPRECATED: requireAuth() has no effect');
-        return this;
-    }
-
-    protect(...paths: string[]): this {
-        console.warn('[Jux Guard] DEPRECATED: protect() has no effect');
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER (No-op)
-     * ═════════════════════════════════════════════════════════════════ */
-
-    render(targetId?: string): this {
-        console.warn('[Jux Guard] DEPRECATED: Guard rendering has no effect');
-        return this;
-    }
-
-    deactivate(): this {
-        return this;
-    }
-}
-
-export function guard(id: string, options?: GuardOptions): Guard {
-    return new Guard(id, options);
-}

package/lib/components/heading.ts

@@ -1,96 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = [] as const;  // Headings are display-only, no events
-
-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 class Heading extends BaseComponent<HeadingState> {
-    constructor(id: string, options: HeadingOptions = {}) {
-        super(id, {
-            level: options.level ?? 1,
-            content: options.content ?? '',
-            class: options.class ?? '',
-            style: options.style ?? ''
-        });
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    // ✅ Inherited from BaseComponent:
-    // - style(), class()
-    // - bind(), sync(), renderTo()
-    // - All other base methods
-
-    level(value: 1 | 2 | 3 | 4 | 5 | 6): this {
-        this.state.level = value;
-        return this;
-    }
-
-    content(value: string): this {
-        this.state.content = value;
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-
-    render(targetId?: string): this {
-        const container = this._setupContainer(targetId);
-
-        const { content, level, style, class: className } = this.state;
-
-        const heading = document.createElement(`h${level}`) as HTMLHeadingElement;
-        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: any) => String(v));
-
-                stateObj.subscribe((val: any) => {
-                    const transformed = transform(val);
-                    heading.textContent = transformed;
-                    this.state.content = transformed;
-                });
-            }
-        });
-
-        container.appendChild(heading);
-        return this;
-    }
-}
-
-export function heading(id: string, options: HeadingOptions = {}): Heading {
-    return new Heading(id, options);
-}

package/lib/components/helpers.ts

@@ -1,41 +0,0 @@
-/**
- * Component helper utilities
- */
-
-/**
- * Get or create a container element for a component
- * Auto-creates if it doesn't exist and appends to appropriate parent
- */
-export function getOrCreateContainer(id: string): HTMLElement {
-    if (typeof document === 'undefined') {
-        throw new Error('Document is not available');
-    }
-
-    let container = document.getElementById(id);
-
-    // Container already exists, return it
-    if (container) {
-        return container;
-    }
-
-    // Auto-create container if it doesn't exist
-    container = document.createElement('div');
-    container.id = id;
-
-    // Find appropriate parent - [data-jux-page] takes precedence, then #app, then body
-    const dataJuxPage = document.querySelector('[data-jux-page]') as HTMLElement;
-    const app = document.getElementById('app');
-
-    const parent: HTMLElement = (dataJuxPage || app || document.body) as HTMLElement;
-
-    // Log warning if falling back to body
-    if (!dataJuxPage && !app) {
-        console.warn(
-            `[Jux] Preferred container targets "[data-jux-page]" or "#app" not found. Creating container "#${id}" in fallback parent: body`,
-        );
-    }
-
-    parent.appendChild(container);
-
-    return container;
-}