juxscript 1.1.341 → 1.1.343

package/dist/lib/components/data.js

@@ -1,130 +0,0 @@
-import generateId from '../utils/idgen.js';
-import { pageState } from '../state/pageState.js';
-class Data {
-    constructor(id, options = {}) {
-        this._value = null;
-        this._loading = false;
-        this._error = null;
-        this._onChange = null;
-        this.id = id || generateId();
-        this.options = { method: 'GET', auto: true, ...options };
-    }
-    // Fluent API
-    url(value) { this.options.url = value; return this; }
-    method(value) { this.options.method = value; return this; }
-    headers(value) { this.options.headers = value; return this; }
-    body(value) { this.options.body = value; return this; }
-    transform(fn) { this.options.transform = fn; return this; }
-    onChange(fn) {
-        this._onChange = fn;
-        return this;
-    }
-    // Getters for pageState integration
-    getValue() { return this._value; }
-    getLoading() { return this._loading; }
-    getError() { return this._error; }
-    setValue(val) {
-        this._value = val;
-        if (this._onChange)
-            this._onChange(val);
-        return this;
-    }
-    /**
-     * Re-fetch the data and notify pageState.
-     * Triggers all watchers that depend on this data's value.
-     */
-    async refresh() {
-        const result = await this.fetch();
-        // Notify pageState so watchers re-run
-        pageState.__notify(`${this.id}.value`);
-        pageState.__notify(`${this.id}.loading`);
-        return result;
-    }
-    async fetch(urlOverride) {
-        const fetchUrl = urlOverride || this.options.url;
-        if (!fetchUrl) {
-            this._error = 'No URL provided';
-            return null;
-        }
-        this._loading = true;
-        this._error = null;
-        // Notify pageState of loading change
-        if (pageState.__notify) {
-            pageState.__notify(`${this.id}.loading`);
-        }
-        try {
-            const fetchOptions = {
-                method: this.options.method,
-                headers: this.options.headers,
-            };
-            if (this.options.body && this.options.method !== 'GET') {
-                fetchOptions.body = typeof this.options.body === 'string'
-                    ? this.options.body
-                    : JSON.stringify(this.options.body);
-                if (!this.options.headers?.['Content-Type']) {
-                    fetchOptions.headers = {
-                        'Content-Type': 'application/json',
-                        ...fetchOptions.headers
-                    };
-                }
-            }
-            const res = await globalThis.fetch(fetchUrl, fetchOptions);
-            if (!res.ok) {
-                throw new Error(`HTTP ${res.status}: ${res.statusText}`);
-            }
-            const contentType = res.headers.get('content-type') || '';
-            let raw;
-            if (contentType.includes('application/json')) {
-                raw = await res.json();
-            }
-            else {
-                raw = await res.text();
-            }
-            this._value = this.options.transform ? this.options.transform(raw) : raw;
-            this._loading = false;
-            this._error = null;
-            if (this._onChange)
-                this._onChange(this._value);
-            return this._value;
-        }
-        catch (err) {
-            this._loading = false;
-            this._error = err.message || 'Fetch failed';
-            console.error(`❌ jux.data('${this.id}') fetch error:`, err.message);
-            return null;
-        }
-    }
-}
-/**
- * Create a data source that integrates with pageState.
- *
- * @example
- * // Auto-fetch on creation
- * const api = await jux.data('api', { url: '/api/test' });
- * // pageState['api'].value → { users: [...], posts: [...] }
- *
- * // With transform
- * const users = await jux.data('users', {
- *     url: '/api/test',
- *     transform: raw => raw.users
- * });
- * // pageState['users'].value → [{ id: 1, name: 'Alice' }, ...]
- *
- * // Manual fetch
- * const manual = jux.data('manual', { url: '/api/test', auto: false });
- * await manual.fetch(); // fetch later
- *
- * // Re-fetch
- * await pageState['api'].refresh();
- */
-export async function data(id, options = {}) {
-    const d = new Data(id, options);
-    pageState.__register(d);
-    if (options.auto !== false && options.url) {
-        await d.fetch();
-        // Re-register so pageState picks up the fetched value
-        pageState.__register(d);
-    }
-    return d;
-}
-export { Data };

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

@@ -1,58 +0,0 @@
-type GridDensity = 'dense' | 'normal' | 'inflated';
-interface GridColumn {
-    name: string;
-    width?: string;
-}
-interface GridOptions {
-    rows?: number;
-    cols?: number | GridColumn[];
-    density?: GridDensity;
-    class?: string;
-    style?: string;
-    target?: string;
-    [key: string]: any;
-}
-declare class Grid {
-    id: string;
-    opts: GridOptions;
-    private _element;
-    private _columns;
-    constructor(id: string, options?: GridOptions);
-    getValue(): string;
-    getContent(): string;
-    setContent(val: string): this;
-    setClass(val: string): this;
-    setStyle(val: string): this;
-    setInnerHTML(val: string): this;
-    getElement(): HTMLElement;
-    /** Get a named column cell element */
-    getColumn(name: string): HTMLElement | null;
-    getColumns(): GridColumn[];
-}
-/**
- * Create a CSS grid layout container.
- *
- * @example
- * // Simple: 3 equal columns
- * jux.grid('cards', { cols: 3 });
- *
- * // Named columns with custom widths
- * jux.grid('layout', {
- *     cols: [
- *         { name: 'sidebar', width: '260px' },
- *         { name: 'content', width: '3fr' },
- *         { name: 'aside',   width: '1fr' },
- *     ]
- * });
- * // Then target into them:
- * jux.nav('main-nav', { target: 'sidebar' });
- * jux.h1('title', { content: 'Hello', target: 'content' });
- *
- * // Density options
- * jux.grid('tight', { cols: 4, density: 'dense' });
- * jux.grid('spacious', { cols: 2, density: 'inflated' });
- */
-export declare function grid(id: string, options?: GridOptions): Grid;
-export { Grid, GridOptions, GridColumn, GridDensity };
-export default grid;
-//# sourceMappingURL=grid.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../lib/components/grid.ts"],"names":[],"mappings":"AAGA,KAAK,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEnD,UAAU,UAAU;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,WAAW;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAQD,cAAM,IAAI;IACN,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,QAAQ,CAAoB;gBAExB,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAoEjD,QAAQ,IAAI,MAAM;IAClB,UAAU,IAAI,MAAM;IAEpB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK7B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK/B,UAAU,IAAI,WAAW;IAEzB,sCAAsC;IACtC,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI;IAI3C,UAAU,IAAI,UAAU,EAAE;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAIhE;AAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC;AACtD,eAAe,IAAI,CAAC"}

package/dist/lib/components/grid.js

@@ -1,127 +0,0 @@
-import generateId from '../utils/idgen.js';
-import { pageState } from '../state/pageState.js';
-const DENSITY_MAP = {
-    dense: { gap: '4px', padding: '4px' },
-    normal: { gap: '12px', padding: '12px' },
-    inflated: { gap: '24px', padding: '24px' },
-};
-class Grid {
-    constructor(id, options = {}) {
-        this._columns = [];
-        this.id = id || generateId();
-        this.opts = {
-            cols: 2,
-            density: 'normal',
-            ...options
-        };
-        this._element = document.createElement('div');
-        this._element.id = this.id;
-        if (this.opts.class)
-            this._element.className = this.opts.class;
-        // Resolve columns
-        const cols = this.opts.cols;
-        let templateCols;
-        if (cols && typeof cols === 'object' && Array.isArray(cols)) {
-            this._columns = cols.map(c => ({
-                name: c.name,
-                width: c.width || '1fr'
-            }));
-            templateCols = this._columns.map(c => c.width).join(' ');
-        }
-        else {
-            const count = typeof cols === 'number' ? cols : 2;
-            templateCols = `repeat(${count}, 1fr)`;
-        }
-        const d = DENSITY_MAP[this.opts.density] || DENSITY_MAP.normal;
-        const parts = [
-            'display:grid',
-            `grid-template-columns:${templateCols}`,
-            `gap:${d.gap}`,
-            `padding:${d.padding}`,
-        ];
-        if (this.opts.rows) {
-            parts.push(`grid-template-rows:repeat(${this.opts.rows}, auto)`);
-        }
-        if (this.opts.style)
-            parts.push(this.opts.style);
-        this._element.setAttribute('style', parts.join(';'));
-        // Extra attributes
-        for (const [key, value] of Object.entries(this.opts)) {
-            if (['rows', 'cols', 'density', 'class', 'style', 'target'].includes(key))
-                continue;
-            this._element.setAttribute(`data-${key}`, String(value));
-        }
-        // Mount
-        const resolvedTarget = this.opts.target;
-        const parent = resolvedTarget
-            ? document.getElementById(resolvedTarget) || document.querySelector(resolvedTarget)
-            : document.getElementById('app');
-        parent?.appendChild(this._element);
-        // Create named column cells if using array cols
-        if (this._columns.length > 0) {
-            for (const col of this._columns) {
-                const cell = document.createElement('div');
-                cell.id = col.name;
-                cell.setAttribute('data-grid-col', col.name);
-                this._element.appendChild(cell);
-            }
-        }
-    }
-    // ═══════════════════════════════════════════════════════════
-    // PAGESTATE INTEGRATION
-    // ═══════════════════════════════════════════════════════════
-    getValue() { return ''; }
-    getContent() { return this._element.textContent ?? ''; }
-    setContent(val) {
-        this._element.textContent = val;
-        return this;
-    }
-    setClass(val) {
-        this._element.className = val;
-        return this;
-    }
-    setStyle(val) {
-        this._element.setAttribute('style', val);
-        return this;
-    }
-    setInnerHTML(val) {
-        this._element.innerHTML = val;
-        return this;
-    }
-    getElement() { return this._element; }
-    /** Get a named column cell element */
-    getColumn(name) {
-        return this._element.querySelector(`[data-grid-col="${name}"]`);
-    }
-    getColumns() { return [...this._columns]; }
-}
-/**
- * Create a CSS grid layout container.
- *
- * @example
- * // Simple: 3 equal columns
- * jux.grid('cards', { cols: 3 });
- *
- * // Named columns with custom widths
- * jux.grid('layout', {
- *     cols: [
- *         { name: 'sidebar', width: '260px' },
- *         { name: 'content', width: '3fr' },
- *         { name: 'aside',   width: '1fr' },
- *     ]
- * });
- * // Then target into them:
- * jux.nav('main-nav', { target: 'sidebar' });
- * jux.h1('title', { content: 'Hello', target: 'content' });
- *
- * // Density options
- * jux.grid('tight', { cols: 4, density: 'dense' });
- * jux.grid('spacious', { cols: 2, density: 'inflated' });
- */
-export function grid(id, options = {}) {
-    const g = new Grid(id, options);
-    pageState.__register(g);
-    return g;
-}
-export { Grid };
-export default grid;

package/dist/lib/components/include.d.ts

@@ -1,86 +0,0 @@
-/**
- * Include - Simplified resource injection for bundled and external resources
- * Supports page-specific scoping and cleanup
- */
-type ResourceType = 'css' | 'js' | 'module';
-interface IncludeOptions {
-    type?: ResourceType;
-    target?: string;
-    async?: boolean;
-    defer?: boolean;
-    crossOrigin?: 'anonymous' | 'use-credentials';
-    integrity?: string;
-    pageScoped?: boolean;
-}
-export declare class Include {
-    private url;
-    private options;
-    private element;
-    private pageId;
-    constructor(url: string, options?: IncludeOptions);
-    css(): this;
-    js(): this;
-    module(): this;
-    async(): this;
-    defer(): this;
-    /**
-     * Inject into specific container instead of <head>
-     * Useful for page-specific styles
-     *
-     * @example
-     * jux.include('/css/page1.css').into('#page1-container');
-     */
-    into(selector: string): this;
-    /**
-     * Mark as page-scoped for automatic cleanup
-     *
-     * @example
-     * jux.include('/css/dashboard.css').forPage('dashboard');
-     * // Later: Include.cleanupPage('dashboard');
-     */
-    forPage(pageId: string): this;
-    render(): this;
-    private createStylesheet;
-    private createScript;
-    private getContainer;
-    private isAlreadyLoaded;
-    remove(): this;
-    /**
-     * Remove all resources for a specific page
-     *
-     * @example
-     * Include.cleanupPage('dashboard');
-     */
-    static cleanupPage(pageId: string): void;
-    /**
-     * Remove all page-scoped resources
-     */
-    static cleanupAll(): void;
-}
-/**
- * Factory function - simplified usage
- *
- * Usage:
- *   // Basic (auto-detects from extension)
- *   jux.include('/css/styles.css');
- *   jux.include('/js/app.js');
- *
- *   // Page-specific with cleanup
- *   jux.include('/css/dashboard.css').forPage('dashboard');
- *   jux.include('/js/dashboard.js').forPage('dashboard');
- *
- *   // Later cleanup:
- *   Include.cleanupPage('dashboard');
- *
- *   // Inject into specific container
- *   jux.include('/css/widget.css').into('#widget-container');
- *
- *   // External CDN
- *   jux.include('https://cdn.tailwindcss.com').js();
- *
- *   // Module
- *   jux.include('/js/app.mjs').module();
- */
-export declare function include(url: string, options?: IncludeOptions): Include;
-export {};
-//# sourceMappingURL=include.d.ts.map

package/dist/lib/components/include.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"include.d.ts","sourceRoot":"","sources":["../../../lib/components/include.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,KAAK,YAAY,GAAG,KAAK,GAAG,IAAI,GAAG,QAAQ,CAAC;AAE5C,UAAU,cAAc;IACpB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,WAAW,GAAG,iBAAiB,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAKD,qBAAa,OAAO;IAChB,OAAO,CAAC,GAAG,CAAS;IACpB,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,MAAM,CAAuB;gBAEzB,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB;IAoBrD,GAAG,IAAI,IAAI;IAKX,EAAE,IAAI,IAAI;IAKV,MAAM,IAAI,IAAI;IAKd,KAAK,IAAI,IAAI;IAKb,KAAK,IAAI,IAAI;IAKb;;;;;;OAMG;IACH,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAK5B;;;;;;OAMG;IACH,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAU7B,MAAM,IAAI,IAAI;IAoDd,OAAO,CAAC,gBAAgB;IAiBxB,OAAO,CAAC,YAAY;IAuBpB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,eAAe;IAKvB,MAAM,IAAI,IAAI;IAYd;;;;;OAKG;IACH,MAAM,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAYxC;;OAEG;IACH,MAAM,CAAC,UAAU,IAAI,IAAI;CAS5B;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,cAAc,GAAG,OAAO,CAItE"}

package/dist/lib/components/include.js

@@ -1,238 +0,0 @@
-/**
- * Include - Simplified resource injection for bundled and external resources
- * Supports page-specific scoping and cleanup
- */
-// Global registry for page-scoped resources
-const scopedResources = new Map();
-export class Include {
-    constructor(url, options = {}) {
-        this.element = null;
-        this.pageId = null;
-        this.url = url;
-        this.options = options;
-        // Auto-detect type from extension if not provided
-        if (!options.type) {
-            if (url.endsWith('.css')) {
-                this.options.type = 'css';
-            }
-            else if (url.endsWith('.mjs') || url.endsWith('.module.js')) {
-                this.options.type = 'module';
-            }
-            else {
-                this.options.type = 'js';
-            }
-        }
-    }
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
-    css() {
-        this.options.type = 'css';
-        return this;
-    }
-    js() {
-        this.options.type = 'js';
-        return this;
-    }
-    module() {
-        this.options.type = 'module';
-        return this;
-    }
-    async() {
-        this.options.async = true;
-        return this;
-    }
-    defer() {
-        this.options.defer = true;
-        return this;
-    }
-    /**
-     * Inject into specific container instead of <head>
-     * Useful for page-specific styles
-     *
-     * @example
-     * jux.include('/css/page1.css').into('#page1-container');
-     */
-    into(selector) {
-        this.options.target = selector;
-        return this;
-    }
-    /**
-     * Mark as page-scoped for automatic cleanup
-     *
-     * @example
-     * jux.include('/css/dashboard.css').forPage('dashboard');
-     * // Later: Include.cleanupPage('dashboard');
-     */
-    forPage(pageId) {
-        this.pageId = pageId;
-        this.options.pageScoped = true;
-        return this;
-    }
-    /* -------------------------
-     * Render
-     * ------------------------- */
-    render() {
-        if (typeof document === 'undefined')
-            return this;
-        try {
-            // Check if already loaded
-            if (this.isAlreadyLoaded()) {
-                console.log(`⚠️  Resource already loaded: ${this.url}`);
-                return this;
-            }
-            // Create element based on type
-            let element;
-            switch (this.options.type) {
-                case 'css':
-                    element = this.createStylesheet();
-                    break;
-                case 'js':
-                case 'module':
-                    element = this.createScript();
-                    break;
-                default:
-                    throw new Error(`Unknown resource type: ${this.options.type}`);
-            }
-            // Get target container
-            const container = this.getContainer();
-            container.appendChild(element);
-            this.element = element;
-            // Register for page cleanup if needed
-            if (this.options.pageScoped && this.pageId) {
-                if (!scopedResources.has(this.pageId)) {
-                    scopedResources.set(this.pageId, new Set());
-                }
-                scopedResources.get(this.pageId).add(element);
-            }
-            console.log(`✓ Loaded ${this.options.type}: ${this.url}`);
-        }
-        catch (error) {
-            console.error(`✗ Failed to load ${this.options.type}: ${this.url}`, error);
-            throw error;
-        }
-        return this;
-    }
-    /* -------------------------
-     * Element Creation
-     * ------------------------- */
-    createStylesheet() {
-        const link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = this.url;
-        link.dataset.juxInclude = this.url;
-        if (this.options.crossOrigin)
-            link.crossOrigin = this.options.crossOrigin;
-        if (this.options.integrity)
-            link.integrity = this.options.integrity;
-        link.onload = () => console.log(`✓ Stylesheet loaded: ${this.url}`);
-        link.onerror = () => {
-            throw new Error(`Failed to load stylesheet: ${this.url}`);
-        };
-        return link;
-    }
-    createScript() {
-        const script = document.createElement('script');
-        script.src = this.url;
-        script.dataset.juxInclude = this.url;
-        if (this.options.type === 'module')
-            script.type = 'module';
-        if (this.options.async)
-            script.async = true;
-        if (this.options.defer)
-            script.defer = true;
-        if (this.options.crossOrigin)
-            script.crossOrigin = this.options.crossOrigin;
-        if (this.options.integrity)
-            script.integrity = this.options.integrity;
-        script.onload = () => console.log(`✓ Script loaded: ${this.url}`);
-        script.onerror = () => {
-            throw new Error(`Failed to load script: ${this.url}`);
-        };
-        return script;
-    }
-    /* -------------------------
-     * Helpers
-     * ------------------------- */
-    getContainer() {
-        if (this.options.target) {
-            const container = document.querySelector(this.options.target);
-            if (!container) {
-                throw new Error(`Target container not found: ${this.options.target}`);
-            }
-            return container;
-        }
-        return document.head;
-    }
-    isAlreadyLoaded() {
-        const selector = `[data-jux-include="${this.url}"]`;
-        return document.querySelector(selector) !== null;
-    }
-    remove() {
-        if (this.element?.parentNode) {
-            this.element.parentNode.removeChild(this.element);
-            this.element = null;
-        }
-        return this;
-    }
-    /* -------------------------
-     * Static Page Cleanup
-     * ------------------------- */
-    /**
-     * Remove all resources for a specific page
-     *
-     * @example
-     * Include.cleanupPage('dashboard');
-     */
-    static cleanupPage(pageId) {
-        const resources = scopedResources.get(pageId);
-        if (!resources)
-            return;
-        resources.forEach(element => {
-            element.parentNode?.removeChild(element);
-        });
-        scopedResources.delete(pageId);
-        console.log(`✓ Cleaned up page resources: ${pageId}`);
-    }
-    /**
-     * Remove all page-scoped resources
-     */
-    static cleanupAll() {
-        scopedResources.forEach((resources, pageId) => {
-            resources.forEach(element => {
-                element.parentNode?.removeChild(element);
-            });
-        });
-        scopedResources.clear();
-        console.log('✓ Cleaned up all page-scoped resources');
-    }
-}
-/**
- * Factory function - simplified usage
- *
- * Usage:
- *   // Basic (auto-detects from extension)
- *   jux.include('/css/styles.css');
- *   jux.include('/js/app.js');
- *
- *   // Page-specific with cleanup
- *   jux.include('/css/dashboard.css').forPage('dashboard');
- *   jux.include('/js/dashboard.js').forPage('dashboard');
- *
- *   // Later cleanup:
- *   Include.cleanupPage('dashboard');
- *
- *   // Inject into specific container
- *   jux.include('/css/widget.css').into('#widget-container');
- *
- *   // External CDN
- *   jux.include('https://cdn.tailwindcss.com').js();
- *
- *   // Module
- *   jux.include('/js/app.mjs').module();
- */
-export function include(url, options) {
-    const inc = new Include(url, options);
-    inc.render();
-    return inc;
-}