juxscript 1.1.350 → 1.1.353

package/dist/lib/components/container.js

@@ -0,0 +1,151 @@
+import generateId from '../utils/idgen.js';
+import { pageState } from '../state/pageState.js';
+const JUSTIFY_MAP = {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    between: 'space-between',
+    around: 'space-around',
+    evenly: 'space-evenly'
+};
+const ALIGN_MAP = {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    stretch: 'stretch',
+    baseline: 'baseline'
+};
+class Container {
+    constructor(id, options = {}) {
+        this.id = id || generateId();
+        this.opts = {
+            layout: 'flex',
+            direction: 'column',
+            tag: 'div',
+            ...options
+        };
+        this._element = document.createElement(this.opts.tag);
+        this._element.id = this.id;
+        // Classes
+        if (this.opts.class)
+            this._element.className = this.opts.class;
+        // Build computed style from layout options
+        const styles = this._buildStyles();
+        if (this.opts.style)
+            styles.push(this.opts.style);
+        if (styles.length)
+            this._element.setAttribute('style', styles.join(';'));
+        // Content (rare for containers, but supported)
+        if (this.opts.content)
+            this._element.textContent = this.opts.content;
+        // Extra attributes
+        for (const [key, value] of Object.entries(this.opts)) {
+            if ([
+                'layout', 'direction', 'wrap', 'gap', 'padding', 'align', 'justify',
+                'columns', 'width', 'height', 'maxWidth', 'minHeight',
+                'class', 'style', 'target', 'tag', 'content'
+            ].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);
+    }
+    // ═══════════════════════════════════════════════════════════
+    // LAYOUT HELPERS
+    // ═══════════════════════════════════════════════════════════
+    _buildStyles() {
+        const s = [];
+        const o = this.opts;
+        if (o.layout === 'grid') {
+            s.push('display:grid');
+            if (o.columns) {
+                const cols = typeof o.columns === 'number'
+                    ? `repeat(${o.columns}, 1fr)`
+                    : o.columns;
+                s.push(`grid-template-columns:${cols}`);
+            }
+        }
+        else if (o.layout === 'flex') {
+            s.push('display:flex');
+            if (o.direction)
+                s.push(`flex-direction:${o.direction}`);
+            if (o.wrap)
+                s.push('flex-wrap:wrap');
+        }
+        else {
+            s.push('display:block');
+        }
+        if (o.gap)
+            s.push(`gap:${o.gap}`);
+        if (o.padding)
+            s.push(`padding:${o.padding}`);
+        if (o.align)
+            s.push(`align-items:${ALIGN_MAP[o.align] || o.align}`);
+        if (o.justify)
+            s.push(`justify-content:${JUSTIFY_MAP[o.justify] || o.justify}`);
+        if (o.width)
+            s.push(`width:${o.width}`);
+        if (o.height)
+            s.push(`height:${o.height}`);
+        if (o.maxWidth)
+            s.push(`max-width:${o.maxWidth}`);
+        if (o.minHeight)
+            s.push(`min-height:${o.minHeight}`);
+        return s;
+    }
+    // ═══════════════════════════════════════════════════════════
+    // PAGESTATE INTEGRATION
+    // ═══════════════════════════════════════════════════════════
+    getValue() { return this._element.textContent ?? ''; }
+    getContent() { return this._element.textContent ?? this.opts.content ?? ''; }
+    setValue(val) {
+        this.opts.content = val;
+        this._element.textContent = val;
+        return this;
+    }
+    setContent(val) { return this.setValue(val); }
+    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; }
+}
+/**
+ * Create a layout container.
+ *
+ * @example
+ * // Flex column (default)
+ * jux.container('main', { gap: '16px', padding: '24px' });
+ *
+ * // Flex row
+ * jux.container('toolbar', { direction: 'row', gap: '8px', align: 'center' });
+ *
+ * // Grid
+ * jux.container('grid', { layout: 'grid', columns: 3, gap: '16px' });
+ *
+ * // Centered page wrapper
+ * jux.container('page', { maxWidth: '960px', padding: '24px 16px', align: 'center' });
+ *
+ * // Nested
+ * jux.container('card', { gap: '8px', padding: '16px', target: 'grid' });
+ */
+export function container(id, options = {}) {
+    const c = new Container(id, options);
+    pageState.__register(c);
+    return c;
+}
+export { Container };
+export default container;

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

@@ -0,0 +1,58 @@
+interface DataOptions {
+    url?: string;
+    method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+    headers?: Record<string, string>;
+    body?: any;
+    transform?: (raw: any) => any;
+    auto?: boolean;
+}
+declare class Data {
+    id: string;
+    options: DataOptions;
+    private _value;
+    private _loading;
+    private _error;
+    private _onChange;
+    constructor(id: string, options?: DataOptions);
+    url(value: string): this;
+    method(value: DataOptions['method']): this;
+    headers(value: Record<string, string>): this;
+    body(value: any): this;
+    transform(fn: (raw: any) => any): this;
+    onChange(fn: (value: any) => void): this;
+    getValue(): any;
+    getLoading(): boolean;
+    getError(): string | null;
+    setValue(val: any): this;
+    /**
+     * Re-fetch the data and notify pageState.
+     * Triggers all watchers that depend on this data's value.
+     */
+    refresh(): Promise<any>;
+    fetch(urlOverride?: string): Promise<any>;
+}
+/**
+ * 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 declare function data(id: string, options?: DataOptions): Promise<Data>;
+export { Data, DataOptions };
+//# sourceMappingURL=data.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../lib/components/data.ts"],"names":[],"mappings":"AAGA,UAAU,WAAW;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,cAAM,IAAI;IACN,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,SAAS,CAAuC;gBAE5C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAMjD,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IACxB,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,GAAG,IAAI;IAC1C,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI;IAC5C,IAAI,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IACtB,SAAS,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI;IAEtC,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,GAAG,IAAI;IAMxC,QAAQ,IAAI,GAAG;IACf,UAAU,IAAI,OAAO;IACrB,QAAQ,IAAI,MAAM,GAAG,IAAI;IAEzB,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI;IAMxB;;;OAGG;IACG,OAAO,IAAI,OAAO,CAAC,GAAG,CAAC;IAQvB,KAAK,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC;CA+DlD;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAsB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,CAW/E;AAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC"}

package/dist/lib/components/data.js

@@ -0,0 +1,130 @@
+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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,127 @@
+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

@@ -0,0 +1,86 @@
+/**
+ * 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

@@ -0,0 +1 @@
+{"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"}