juxscript 1.1.240 → 1.1.244

package/lib/components/alert.ts

@@ -1,219 +0,0 @@
-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;
-    }
-
-    /**
-     * Reactive update hook
-     */
-    update(prop: string, value: any): void {
-
-
-        const el = document.getElementById(this._id);
-        if (!el) return;
-
-        if (prop === 'content') {
-            const contentEl = el.querySelector('.jux-alert-content');
-            if (contentEl) contentEl.textContent = value;
-        } else if (prop === 'type') {
-            // Update alert type class
-            el.className = `jux-alert jux-alert-${value}`;
-            if (this.state.class) el.className += ` ${this.state.class}`;
-        }
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-
-    render(targetId?: string | HTMLElement | BaseComponent<any>): 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

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

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

package/lib/components/app.js

@@ -1,175 +0,0 @@
-/**
- * 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 class App {
-    constructor(id, options) {
-        this._componentId = id;
-        this.id = id;
-        const opts = options || {};
-        this.state = {
-            title: opts.title ?? '',
-            theme: opts.theme ?? 'auto',
-            favicon: opts.favicon ?? '',
-            meta: new Map(Object.entries(opts.meta || {})),
-            stylesheets: opts.stylesheets || [],
-            scripts: opts.scripts || [],
-            layout: {
-                header: opts.layout?.header ?? false,
-                subheader: opts.layout?.subheader ?? false,
-                sidebar: opts.layout?.sidebar ?? false,
-                main: opts.layout?.main ?? true,
-                aside: opts.layout?.aside ?? false,
-                footer: opts.layout?.footer ?? false
-            }
-        };
-    }
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
-    title(value) {
-        this.state.title = value;
-        return this;
-    }
-    theme(value) {
-        this.state.theme = value;
-        return this;
-    }
-    favicon(value) {
-        this.state.favicon = value;
-        return this;
-    }
-    meta(name, content) {
-        this.state.meta.set(name, content);
-        return this;
-    }
-    addStylesheet(url) {
-        if (!this.state.stylesheets.includes(url)) {
-            this.state.stylesheets.push(url);
-        }
-        return this;
-    }
-    addScript(url) {
-        if (!this.state.scripts.includes(url)) {
-            this.state.scripts.push(url);
-        }
-        return this;
-    }
-    /**
-     * Setup app with comprehensive configuration
-     */
-    setup(options) {
-        if (options.title)
-            this.state.title = options.title;
-        if (options.theme)
-            this.state.theme = options.theme;
-        if (options.favicon)
-            this.state.favicon = options.favicon;
-        if (options.meta) {
-            Object.entries(options.meta).forEach(([name, content]) => {
-                this.state.meta.set(name, content);
-            });
-        }
-        if (options.stylesheets) {
-            options.stylesheets.forEach(url => this.addStylesheet(url));
-        }
-        if (options.scripts) {
-            options.scripts.forEach(url => this.addScript(url));
-        }
-        if (options.layout) {
-            this.state.layout = { ...this.state.layout, ...options.layout };
-        }
-        return this;
-    }
-    /* -------------------------
-     * Render
-     * ------------------------- */
-    render() {
-        if (typeof document === 'undefined')
-            return this;
-        try {
-            const { title, theme, favicon, meta, stylesheets, scripts } = this.state;
-            // Apply title
-            if (title) {
-                document.title = title;
-            }
-            // Apply theme
-            if (theme) {
-                document.body.setAttribute('data-theme', theme);
-                document.body.classList.remove('theme-light', 'theme-dark', 'theme-auto');
-                document.body.classList.add(`theme-${theme}`);
-            }
-            // Apply favicon
-            if (favicon) {
-                let link = document.querySelector('link[rel="icon"]');
-                if (!link) {
-                    link = document.createElement('link');
-                    link.rel = 'icon';
-                    document.head.appendChild(link);
-                }
-                link.href = favicon;
-            }
-            // Apply meta tags
-            meta.forEach((content, name) => {
-                let metaEl = document.querySelector(`meta[name="${name}"]`);
-                if (!metaEl) {
-                    metaEl = document.createElement('meta');
-                    metaEl.name = name;
-                    document.head.appendChild(metaEl);
-                }
-                metaEl.content = content;
-            });
-            // Load stylesheets
-            stylesheets.forEach(url => {
-                if (!document.querySelector(`link[href="${url}"]`)) {
-                    const link = document.createElement('link');
-                    link.rel = 'stylesheet';
-                    link.href = url;
-                    document.head.appendChild(link);
-                }
-            });
-            // Load scripts
-            scripts.forEach(url => {
-                if (!document.querySelector(`script[src="${url}"]`)) {
-                    const script = document.createElement('script');
-                    script.src = url;
-                    document.head.appendChild(script);
-                }
-            });
-        }
-        catch (error) {
-            throw new Error(`App render failed: ${error.message}`);
-        }
-        return this;
-    }
-}
-/**
- * Factory helper
- */
-export function app(id, options) {
-    return new App(id, options);
-}