juxscript 1.1.5 → 1.1.6

package/index.d.ts

@@ -104,8 +104,8 @@ export declare const jux: {
             onError(callback: (error: import("./lib/utils/fetch.js").FetchError) => void): /*elided*/ any;
             send(): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
             fetch(): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
-            then<TResult1 = import("./lib/utils/fetch.js").FetchResult<T>, TResult2 = never>(onfulfilled?: (value: import("./lib/utils/fetch.js").FetchResult<T>) => TResult1 | PromiseLike<TResult1>, onrejected?: (reason: any) => TResult2 | PromiseLike<TResult2>): Promise<TResult1 | TResult2>;
-            catch<TResult = never>(onrejected?: (reason: any) => TResult | PromiseLike<TResult>): Promise<import("./lib/utils/fetch.js").FetchResult<T> | TResult>;
+            then<TResult1 = import("./lib/utils/fetch.js").FetchResult<T>, TResult2 = never>(onfulfilled?: ((value: import("./lib/utils/fetch.js").FetchResult<T>) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null | undefined): Promise<TResult1 | TResult2>;
+            catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null | undefined): Promise<import("./lib/utils/fetch.js").FetchResult<T> | TResult>;
             finally(onfinally?: (() => void) | null): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
         };
         post: <T = any>(url: string, body?: any, options?: Omit<import("./lib/utils/fetch.js").FetchOptions, "method" | "body">) => {
@@ -124,8 +124,8 @@ export declare const jux: {
             onError(callback: (error: import("./lib/utils/fetch.js").FetchError) => void): /*elided*/ any;
             send(): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
             fetch(): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
-            then<TResult1 = import("./lib/utils/fetch.js").FetchResult<T>, TResult2 = never>(onfulfilled?: (value: import("./lib/utils/fetch.js").FetchResult<T>) => TResult1 | PromiseLike<TResult1>, onrejected?: (reason: any) => TResult2 | PromiseLike<TResult2>): Promise<TResult1 | TResult2>;
-            catch<TResult = never>(onrejected?: (reason: any) => TResult | PromiseLike<TResult>): Promise<import("./lib/utils/fetch.js").FetchResult<T> | TResult>;
+            then<TResult1 = import("./lib/utils/fetch.js").FetchResult<T>, TResult2 = never>(onfulfilled?: ((value: import("./lib/utils/fetch.js").FetchResult<T>) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null | undefined): Promise<TResult1 | TResult2>;
+            catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null | undefined): Promise<import("./lib/utils/fetch.js").FetchResult<T> | TResult>;
             finally(onfinally?: (() => void) | null): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
         };
         put: <T = any>(url: string, body?: any, options?: Omit<import("./lib/utils/fetch.js").FetchOptions, "method" | "body">) => {
@@ -144,8 +144,8 @@ export declare const jux: {
             onError(callback: (error: import("./lib/utils/fetch.js").FetchError) => void): /*elided*/ any;
             send(): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
             fetch(): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
-            then<TResult1 = import("./lib/utils/fetch.js").FetchResult<T>, TResult2 = never>(onfulfilled?: (value: import("./lib/utils/fetch.js").FetchResult<T>) => TResult1 | PromiseLike<TResult1>, onrejected?: (reason: any) => TResult2 | PromiseLike<TResult2>): Promise<TResult1 | TResult2>;
-            catch<TResult = never>(onrejected?: (reason: any) => TResult | PromiseLike<TResult>): Promise<import("./lib/utils/fetch.js").FetchResult<T> | TResult>;
+            then<TResult1 = import("./lib/utils/fetch.js").FetchResult<T>, TResult2 = never>(onfulfilled?: ((value: import("./lib/utils/fetch.js").FetchResult<T>) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null | undefined): Promise<TResult1 | TResult2>;
+            catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null | undefined): Promise<import("./lib/utils/fetch.js").FetchResult<T> | TResult>;
             finally(onfinally?: (() => void) | null): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
         };
         patch: <T = any>(url: string, body?: any, options?: Omit<import("./lib/utils/fetch.js").FetchOptions, "method" | "body">) => {
@@ -164,8 +164,8 @@ export declare const jux: {
             onError(callback: (error: import("./lib/utils/fetch.js").FetchError) => void): /*elided*/ any;
             send(): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
             fetch(): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
-            then<TResult1 = import("./lib/utils/fetch.js").FetchResult<T>, TResult2 = never>(onfulfilled?: (value: import("./lib/utils/fetch.js").FetchResult<T>) => TResult1 | PromiseLike<TResult1>, onrejected?: (reason: any) => TResult2 | PromiseLike<TResult2>): Promise<TResult1 | TResult2>;
-            catch<TResult = never>(onrejected?: (reason: any) => TResult | PromiseLike<TResult>): Promise<import("./lib/utils/fetch.js").FetchResult<T> | TResult>;
+            then<TResult1 = import("./lib/utils/fetch.js").FetchResult<T>, TResult2 = never>(onfulfilled?: ((value: import("./lib/utils/fetch.js").FetchResult<T>) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null | undefined): Promise<TResult1 | TResult2>;
+            catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null | undefined): Promise<import("./lib/utils/fetch.js").FetchResult<T> | TResult>;
             finally(onfinally?: (() => void) | null): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
         };
         delete: <T = any>(url: string, options?: Omit<import("./lib/utils/fetch.js").FetchOptions, "method">) => {
@@ -184,8 +184,8 @@ export declare const jux: {
             onError(callback: (error: import("./lib/utils/fetch.js").FetchError) => void): /*elided*/ any;
             send(): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
             fetch(): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
-            then<TResult1 = import("./lib/utils/fetch.js").FetchResult<T>, TResult2 = never>(onfulfilled?: (value: import("./lib/utils/fetch.js").FetchResult<T>) => TResult1 | PromiseLike<TResult1>, onrejected?: (reason: any) => TResult2 | PromiseLike<TResult2>): Promise<TResult1 | TResult2>;
-            catch<TResult = never>(onrejected?: (reason: any) => TResult | PromiseLike<TResult>): Promise<import("./lib/utils/fetch.js").FetchResult<T> | TResult>;
+            then<TResult1 = import("./lib/utils/fetch.js").FetchResult<T>, TResult2 = never>(onfulfilled?: ((value: import("./lib/utils/fetch.js").FetchResult<T>) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null | undefined): Promise<TResult1 | TResult2>;
+            catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null | undefined): Promise<import("./lib/utils/fetch.js").FetchResult<T> | TResult>;
             finally(onfinally?: (() => void) | null): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
         };
         config: typeof import("./lib/utils/fetch.js").configureFetch;

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}

package/lib/components/alert.d.ts

@@ -0,0 +1,32 @@
+import { BaseComponent } from './base/BaseComponent.js';
+export interface AlertOptions {
+    content?: string;
+    type?: 'info' | 'success' | 'warning' | 'error';
+    dismissible?: boolean;
+    icon?: string;
+    style?: string;
+    class?: string;
+}
+type AlertState = {
+    content: string;
+    type: string;
+    dismissible: boolean;
+    icon: string;
+    visible: boolean;
+    style: string;
+    class: string;
+};
+export declare class Alert extends BaseComponent<AlertState> {
+    private _alert;
+    constructor(id: string, options?: AlertOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    content(value: string): this;
+    type(value: 'info' | 'success' | 'warning' | 'error'): this;
+    dismissible(value: boolean): this;
+    icon(value: string): this;
+    render(targetId?: string): this;
+}
+export declare function alert(id: string, options?: AlertOptions): Alert;
+export {};
+//# sourceMappingURL=alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAOxD,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,UAAU,GAAG;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,KAAM,SAAQ,aAAa,CAAC,UAAU,CAAC;IAChD,OAAO,CAAC,MAAM,CAA4B;gBAE9B,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB;IAYlD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAiBhD,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,IAAI;IAK3D,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKjC,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IASzB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CA6GlC;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,KAAK,CAEnE"}

package/lib/components/alert.js

@@ -0,0 +1,153 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['dismiss'];
+export class Alert extends BaseComponent {
+    constructor(id, options = {}) {
+        super(id, {
+            content: options.content ?? '',
+            type: options.type ?? 'info',
+            dismissible: options.dismissible ?? true,
+            icon: options.icon ?? '',
+            visible: true,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+        this._alert = null;
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    // ✅ Inherited from BaseComponent:
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - addClass(), removeClass(), toggleClass()
+    // - visible(), show(), hide(), toggleVisibility()
+    // - attr(), attrs(), removeAttr()
+    // - disabled(), enable(), disable()
+    // - loading(), focus(), blur(), remove()
+    content(value) {
+        this.state.content = value;
+        return this;
+    }
+    type(value) {
+        this.state.type = value;
+        return this;
+    }
+    dismissible(value) {
+        this.state.dismissible = value;
+        return this;
+    }
+    icon(value) {
+        this.state.icon = value;
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const { content, type, dismissible, icon, style, class: className } = this.state;
+        const hasVisibleSync = this._syncBindings.some(b => b.property === 'visible');
+        // Build alert element
+        const alert = document.createElement('div');
+        alert.className = `jux-alert jux-alert-${type}`;
+        alert.id = this._id;
+        if (className)
+            alert.className += ` ${className}`;
+        if (style)
+            alert.setAttribute('style', style);
+        if (icon) {
+            const iconEl = document.createElement('span');
+            iconEl.className = 'jux-alert-icon';
+            iconEl.appendChild(renderIcon(icon));
+            alert.appendChild(iconEl);
+        }
+        const contentEl = document.createElement('div');
+        contentEl.className = 'jux-alert-content';
+        contentEl.textContent = content;
+        alert.appendChild(contentEl);
+        if (dismissible) {
+            const closeBtn = document.createElement('button');
+            closeBtn.className = 'jux-alert-close';
+            closeBtn.innerHTML = '×';
+            alert.appendChild(closeBtn);
+        }
+        // Default dismiss behavior (only if NOT using sync)
+        if (!hasVisibleSync && dismissible) {
+            const closeBtn = alert.querySelector('.jux-alert-close');
+            closeBtn?.addEventListener('click', () => {
+                // 🎯 Fire the dismiss callback event
+                this._triggerCallback('dismiss');
+                alert.remove();
+            });
+        }
+        // Wire events using inherited method
+        this._wireStandardEvents(alert);
+        // 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);
+                    contentEl.textContent = transformed;
+                    this.state.content = transformed;
+                });
+            }
+            else if (property === 'type') {
+                const transform = toComponent || ((v) => String(v));
+                stateObj.subscribe((val) => {
+                    const transformed = transform(val);
+                    alert.className = `jux-alert jux-alert-${transformed}`;
+                    if (className)
+                        alert.className += ` ${className}`;
+                    this.state.type = transformed;
+                });
+            }
+            else if (property === 'visible') {
+                const transformToState = toState || ((v) => Boolean(v));
+                const transform = toComponent || ((v) => Boolean(v));
+                let isUpdating = false;
+                // State → Component
+                stateObj.subscribe((val) => {
+                    if (isUpdating)
+                        return;
+                    const transformed = transform(val);
+                    alert.style.display = transformed ? 'flex' : 'none';
+                });
+                // Component → State (close button)
+                if (dismissible) {
+                    const closeBtn = alert.querySelector('.jux-alert-close');
+                    closeBtn?.addEventListener('click', () => {
+                        if (isUpdating)
+                            return;
+                        isUpdating = true;
+                        alert.style.display = 'none';
+                        stateObj.set(transformToState(false));
+                        // 🎯 Fire the dismiss callback event
+                        this._triggerCallback('dismiss');
+                        setTimeout(() => { isUpdating = false; }, 0);
+                    });
+                }
+            }
+        });
+        container.appendChild(alert);
+        this._alert = alert;
+        requestAnimationFrame(() => {
+            if (window.lucide) {
+                window.lucide.createIcons();
+            }
+        });
+        return this;
+    }
+}
+export function alert(id, options = {}) {
+    return new Alert(id, options);
+}

package/lib/components/alert.ts

@@ -0,0 +1,200 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['dismiss'] as const;
+
+export interface AlertOptions {
+    content?: string;
+    type?: 'info' | 'success' | 'warning' | 'error';
+    dismissible?: boolean;
+    icon?: string;
+    style?: string;
+    class?: string;
+}
+
+type AlertState = {
+    content: string;
+    type: string;
+    dismissible: boolean;
+    icon: string;
+    visible: boolean;
+    style: string;
+    class: string;
+};
+
+export class Alert extends BaseComponent<AlertState> {
+    private _alert: HTMLElement | null = null;
+
+    constructor(id: string, options: AlertOptions = {}) {
+        super(id, {
+            content: options.content ?? '',
+            type: options.type ?? 'info',
+            dismissible: options.dismissible ?? true,
+            icon: options.icon ?? '',
+            visible: true,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    // ✅ Inherited from BaseComponent:
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - addClass(), removeClass(), toggleClass()
+    // - visible(), show(), hide(), toggleVisibility()
+    // - attr(), attrs(), removeAttr()
+    // - disabled(), enable(), disable()
+    // - loading(), focus(), blur(), remove()
+
+    content(value: string): this {
+        this.state.content = value;
+        return this;
+    }
+
+    type(value: 'info' | 'success' | 'warning' | 'error'): this {
+        this.state.type = value;
+        return this;
+    }
+
+    dismissible(value: boolean): this {
+        this.state.dismissible = value;
+        return this;
+    }
+
+    icon(value: string): this {
+        this.state.icon = value;
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
+
+        const { content, type, dismissible, icon, style, class: className } = this.state;
+        const hasVisibleSync = this._syncBindings.some(b => b.property === 'visible');
+
+        // Build alert element
+        const alert = document.createElement('div');
+        alert.className = `jux-alert jux-alert-${type}`;
+        alert.id = this._id;
+        if (className) alert.className += ` ${className}`;
+        if (style) alert.setAttribute('style', style);
+
+        if (icon) {
+            const iconEl = document.createElement('span');
+            iconEl.className = 'jux-alert-icon';
+            iconEl.appendChild(renderIcon(icon));
+            alert.appendChild(iconEl);
+        }
+
+        const contentEl = document.createElement('div');
+        contentEl.className = 'jux-alert-content';
+        contentEl.textContent = content;
+        alert.appendChild(contentEl);
+
+        if (dismissible) {
+            const closeBtn = document.createElement('button');
+            closeBtn.className = 'jux-alert-close';
+            closeBtn.innerHTML = '×';
+            alert.appendChild(closeBtn);
+        }
+
+        // Default dismiss behavior (only if NOT using sync)
+        if (!hasVisibleSync && dismissible) {
+            const closeBtn = alert.querySelector('.jux-alert-close');
+            closeBtn?.addEventListener('click', () => {
+                // 🎯 Fire the dismiss callback event
+                this._triggerCallback('dismiss');
+                alert.remove();
+            });
+        }
+
+        // Wire events using inherited method
+        this._wireStandardEvents(alert);
+
+        // 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);
+                    contentEl.textContent = transformed;
+                    this.state.content = transformed;
+                });
+            }
+            else if (property === 'type') {
+                const transform = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform(val);
+                    alert.className = `jux-alert jux-alert-${transformed}`;
+                    if (className) alert.className += ` ${className}`;
+                    this.state.type = transformed;
+                });
+            }
+            else if (property === 'visible') {
+                const transformToState = toState || ((v: any) => Boolean(v));
+                const transform = toComponent || ((v: any) => Boolean(v));
+
+                let isUpdating = false;
+
+                // State → Component
+                stateObj.subscribe((val: any) => {
+                    if (isUpdating) return;
+                    const transformed = transform(val);
+                    alert.style.display = transformed ? 'flex' : 'none';
+                });
+
+                // Component → State (close button)
+                if (dismissible) {
+                    const closeBtn = alert.querySelector('.jux-alert-close');
+                    closeBtn?.addEventListener('click', () => {
+                        if (isUpdating) return;
+                        isUpdating = true;
+
+                        alert.style.display = 'none';
+                        stateObj.set(transformToState(false));
+
+                        // 🎯 Fire the dismiss callback event
+                        this._triggerCallback('dismiss');
+
+                        setTimeout(() => { isUpdating = false; }, 0);
+                    });
+                }
+            }
+        });
+
+        container.appendChild(alert);
+        this._alert = alert;
+
+        requestAnimationFrame(() => {
+            if ((window as any).lucide) {
+                (window as any).lucide.createIcons();
+            }
+        });
+
+        return this;
+    }
+}
+
+export function alert(id: string, options: AlertOptions = {}): Alert {
+    return new Alert(id, options);
+}

package/lib/components/app.d.ts

@@ -0,0 +1,89 @@
+/**
+ * App component options
+ */
+export interface AppOptions {
+    title?: string;
+    theme?: 'light' | 'dark' | 'auto';
+    favicon?: string;
+    meta?: Record<string, string>;
+    stylesheets?: string[];
+    scripts?: string[];
+    layout?: {
+        header?: boolean | string;
+        subheader?: boolean | string;
+        sidebar?: boolean | string;
+        main?: boolean | string;
+        aside?: boolean | string;
+        footer?: boolean | string;
+    };
+}
+/**
+ * App component state
+ */
+type AppState = {
+    title: string;
+    theme: string;
+    favicon: string;
+    meta: Map<string, string>;
+    stylesheets: string[];
+    scripts: string[];
+    layout: {
+        header: boolean | string;
+        subheader: boolean | string;
+        sidebar: boolean | string;
+        main: boolean | string;
+        aside: boolean | string;
+        footer: boolean | string;
+    };
+};
+/**
+ * App - Configure application-level settings
+ * Manages document metadata, theme, and global configuration
+ *
+ * Usage:
+ *   jux.app('myApp').setup({
+ *     title: 'My App',
+ *     theme: 'dark',
+ *     favicon: '/favicon.ico',
+ *     stylesheets: [
+ *       '/lib/layouts/notion.css',
+ *       '/lib/presets/light.css'
+ *     ],
+ *     layout: {
+ *       header: true,
+ *       sidebar: true,
+ *       main: true,
+ *       footer: true
+ *     }
+ *   });
+ *
+ *   // Or fluent
+ *   jux.app('myApp')
+ *     .title('My App')
+ *     .theme('dark')
+ *     .addStylesheet('/presets/main.css')
+ *     .render();
+ */
+export declare class App {
+    state: AppState;
+    _componentId: string;
+    id: string;
+    constructor(id: string, options?: AppOptions);
+    title(value: string): this;
+    theme(value: 'light' | 'dark' | 'auto'): this;
+    favicon(value: string): this;
+    meta(name: string, content: string): this;
+    addStylesheet(url: string): this;
+    addScript(url: string): this;
+    /**
+     * Setup app with comprehensive configuration
+     */
+    setup(options: AppOptions): this;
+    render(): this;
+}
+/**
+ * Factory helper
+ */
+export declare function app(id: string, options?: AppOptions): App;
+export {};
+//# sourceMappingURL=app.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["app.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,MAAM,CAAC,EAAE;QACP,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QAC1B,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QAC7B,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QAC3B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QACxB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QACzB,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;KAC3B,CAAC;CACH;AAED;;GAEG;AACH,KAAK,QAAQ,GAAG;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE;QACN,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;QACzB,SAAS,EAAE,OAAO,GAAG,MAAM,CAAC;QAC5B,OAAO,EAAE,OAAO,GAAG,MAAM,CAAC;QAC1B,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;QACvB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;QACxB,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;KAC1B,CAAC;CACH,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,GAAG;IACd,KAAK,EAAE,QAAQ,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;gBAEC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,UAAU;IA4B5C,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,KAAK,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI;IAK7C,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IAKzC,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAOhC,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAO5B;;OAEG;IACH,KAAK,CAAC,OAAO,EAAE,UAAU,GAAG,IAAI;IA8BhC,MAAM,IAAI,IAAI;CAqEf;AAED;;GAEG;AACH,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,UAAU,GAAG,GAAG,CAEzD"}