juxscript 1.1.239 → 1.1.243

package/lib/components/heading.ts

@@ -1,113 +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;
-    }
-
-    update(prop: string, value: any): void {
-        const el = document.getElementById(this._id);
-        if (!el) return;
-
-        switch (prop) {
-            case 'content':
-                el.textContent = value;
-                break;
-            case 'level':
-                // Would need to recreate element - skip for now
-                break;
-            default:
-                super.update(prop, value);
-                break;
-        }
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * 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 | HTMLElement | BaseComponent<any>): 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.d.ts

@@ -1,9 +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 declare function getOrCreateContainer(id: string): HTMLElement;
-//# sourceMappingURL=helpers.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["helpers.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,EAAE,MAAM,GAAG,WAAW,CAgC5D"}

package/lib/components/helpers.js

@@ -1,30 +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) {
-    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]');
-    const app = document.getElementById('app');
-    const parent = (dataJuxPage || app || document.body);
-    // 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;
-}

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;
-}

package/lib/components/hero.d.ts

@@ -1,60 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-export interface HeroOptions {
-    title?: string;
-    subtitle?: string;
-    content?: string;
-    cta?: string;
-    ctaLink?: string;
-    backgroundImage?: string | {
-        url: string;
-        size?: string;
-        repeat?: string;
-    };
-    backgroundOverlay?: boolean;
-    variant?: 'default' | 'centered' | 'split';
-    centered?: boolean;
-    style?: string;
-    class?: string;
-}
-type HeroState = BaseState & {
-    title: string;
-    subtitle: string;
-    content: string;
-    cta: string;
-    ctaLink: string;
-    backgroundImage: {
-        url: string;
-        size: string;
-        repeat: string;
-    };
-    backgroundOverlay: boolean;
-    variant: string;
-    centered: boolean;
-};
-export declare class Hero extends BaseComponent<HeroState> {
-    constructor(id: string, options?: HeroOptions);
-    protected getTriggerEvents(): readonly string[];
-    protected getCallbackEvents(): readonly string[];
-    /**
-     * Called automatically by BaseComponent when state changes.
-     * Centralizes DOM manipulation so setters don't have to drill/repeat logic.
-     */
-    update(prop: string, value: any): void;
-    title(value: string): this;
-    subtitle(value: string): this;
-    content(value: string): this;
-    cta(value: string): this;
-    ctaLink(value: string): this;
-    backgroundImage(value: string | {
-        url: string;
-        size?: string;
-        repeat?: string;
-    }): this;
-    backgroundOverlay(value: boolean): this;
-    variant(value: string): this;
-    centered(value: boolean): this;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-}
-export declare function hero(id: string, options?: HeroOptions): Hero;
-export {};
-//# sourceMappingURL=hero.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAMnE,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3E,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG,SAAS,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,iBAAiB,EAAE,OAAO,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAoBjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD;;;OAGG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAoGtC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKxB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAatF,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKvC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAS9B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAsEnE;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}

package/lib/components/hero.js

@@ -1,239 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-// Event definitions - Hero is display-only, but CTA button can trigger actions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = ['ctaClick'];
-export class Hero extends BaseComponent {
-    constructor(id, options = {}) {
-        const bgImage = typeof options.backgroundImage === 'string'
-            ? { url: options.backgroundImage, size: 'cover', repeat: 'no-repeat' }
-            : options.backgroundImage || { url: '', size: 'cover', repeat: 'no-repeat' };
-        super(id, {
-            title: options.title ?? '',
-            subtitle: options.subtitle ?? '',
-            content: options.content ?? '',
-            cta: options.cta ?? '',
-            ctaLink: options.ctaLink ?? '#',
-            backgroundImage: { url: bgImage.url, size: bgImage.size || 'cover', repeat: bgImage.repeat || 'no-repeat' },
-            backgroundOverlay: options.backgroundOverlay ?? false,
-            variant: options.variant ?? 'default',
-            centered: options.centered ?? false,
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * REACTIVE DOM UPDATES
-     * ═════════════════════════════════════════════════════════════════ */
-    /**
-     * Called automatically by BaseComponent when state changes.
-     * Centralizes DOM manipulation so setters don't have to drill/repeat logic.
-     */
-    update(prop, value) {
-        super.update(prop, value); // Handle base properties
-        const hero = document.getElementById(this._id);
-        if (!hero)
-            return;
-        const contentContainer = hero.querySelector('.jux-hero-content');
-        if (!contentContainer)
-            return;
-        switch (prop) {
-            case 'title':
-                let titleEl = document.getElementById(`${this._id}-title`);
-                if (!titleEl) {
-                    // ✅ Create title element if it doesn't exist
-                    titleEl = document.createElement('h1');
-                    titleEl.className = 'jux-hero-title';
-                    titleEl.id = `${this._id}-title`;
-                    contentContainer.insertBefore(titleEl, contentContainer.firstChild);
-                }
-                titleEl.textContent = value;
-                break;
-            case 'subtitle':
-                let subtitleEl = document.getElementById(`${this._id}-subtitle`);
-                if (!subtitleEl) {
-                    // ✅ Create subtitle element if it doesn't exist
-                    subtitleEl = document.createElement('p');
-                    subtitleEl.className = 'jux-hero-subtitle';
-                    subtitleEl.id = `${this._id}-subtitle`;
-                    // Insert after title if exists, otherwise at start
-                    const titleEl = document.getElementById(`${this._id}-title`);
-                    if (titleEl) {
-                        titleEl.after(subtitleEl);
-                    }
-                    else {
-                        contentContainer.insertBefore(subtitleEl, contentContainer.firstChild);
-                    }
-                }
-                subtitleEl.textContent = value;
-                break;
-            case 'content':
-                let contentEl = hero.querySelector('.jux-hero-body');
-                if (!contentEl) {
-                    // ✅ Create content element if it doesn't exist
-                    contentEl = document.createElement('div');
-                    contentEl.className = 'jux-hero-body';
-                    // Insert after subtitle if exists, otherwise after title, otherwise at start
-                    const subtitleEl = document.getElementById(`${this._id}-subtitle`);
-                    const titleEl = document.getElementById(`${this._id}-title`);
-                    if (subtitleEl) {
-                        subtitleEl.after(contentEl);
-                    }
-                    else if (titleEl) {
-                        titleEl.after(contentEl);
-                    }
-                    else {
-                        contentContainer.insertBefore(contentEl, contentContainer.firstChild);
-                    }
-                }
-                contentEl.innerHTML = value;
-                break;
-            case 'cta':
-                let ctaEl = hero.querySelector('.jux-hero-cta');
-                if (!ctaEl) {
-                    // ✅ Create CTA element if it doesn't exist
-                    ctaEl = document.createElement('a');
-                    ctaEl.className = 'jux-hero-cta';
-                    ctaEl.href = this.state.ctaLink;
-                    ctaEl.addEventListener('click', (e) => {
-                        this._triggerCallback('ctaClick', e);
-                    });
-                    contentContainer.appendChild(ctaEl);
-                }
-                ctaEl.textContent = value;
-                break;
-            case 'ctaLink':
-                const ctaLinkEl = hero.querySelector('.jux-hero-cta');
-                if (ctaLinkEl)
-                    ctaLinkEl.href = value;
-                break;
-            case 'backgroundImage':
-                hero.style.backgroundImage = `url(${value.url})`;
-                hero.style.backgroundSize = value.size;
-                hero.style.backgroundRepeat = value.repeat;
-                break;
-            case 'centered':
-                hero.classList.toggle('jux-hero-centered', value);
-                break;
-        }
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API (Simplified - just updates state)
-     * ═════════════════════════════════════════════════════════════════ */
-    title(value) {
-        this.state.title = value; // Triggers update('title', value) via Proxy
-        return this;
-    }
-    subtitle(value) {
-        this.state.subtitle = value;
-        return this;
-    }
-    content(value) {
-        this.state.content = value;
-        return this;
-    }
-    cta(value) {
-        this.state.cta = value;
-        return this;
-    }
-    ctaLink(value) {
-        this.state.ctaLink = value;
-        return this;
-    }
-    backgroundImage(value) {
-        if (typeof value === 'string') {
-            this.state.backgroundImage = { url: value, size: 'cover', repeat: 'no-repeat' };
-        }
-        else {
-            this.state.backgroundImage = {
-                url: value.url,
-                size: value.size || 'cover',
-                repeat: value.repeat || 'no-repeat'
-            };
-        }
-        return this;
-    }
-    backgroundOverlay(value) {
-        this.state.backgroundOverlay = value;
-        return this;
-    }
-    variant(value) {
-        this.state.variant = value;
-        return this;
-    }
-    centered(value) {
-        this.state.centered = value;
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { title, subtitle, content, backgroundImage, backgroundOverlay, centered, style, class: className } = this.state;
-        const hero = document.createElement('section');
-        hero.className = 'jux-hero';
-        hero.id = this._id;
-        if (centered)
-            hero.classList.add('jux-hero-centered');
-        if (className)
-            hero.className += ` ${className}`;
-        if (style)
-            hero.setAttribute('style', style);
-        if (backgroundImage.url) {
-            hero.style.backgroundImage = `url(${backgroundImage.url})`;
-            hero.style.backgroundSize = backgroundImage.size;
-            hero.style.backgroundRepeat = backgroundImage.repeat;
-            if (backgroundOverlay) {
-                const overlay = document.createElement('div');
-                overlay.className = 'jux-hero-overlay';
-                hero.appendChild(overlay);
-            }
-        }
-        const contentContainer = document.createElement('div');
-        contentContainer.className = 'jux-hero-content';
-        if (title) {
-            const titleEl = document.createElement('h1');
-            titleEl.className = 'jux-hero-title';
-            titleEl.id = `${this._id}-title`;
-            titleEl.textContent = title;
-            contentContainer.appendChild(titleEl);
-        }
-        if (subtitle) {
-            const subtitleEl = document.createElement('p');
-            subtitleEl.className = 'jux-hero-subtitle';
-            subtitleEl.id = `${this._id}-subtitle`;
-            subtitleEl.textContent = subtitle;
-            contentContainer.appendChild(subtitleEl);
-        }
-        if (content) {
-            const contentEl = document.createElement('div');
-            contentEl.className = 'jux-hero-body';
-            contentEl.innerHTML = content;
-            contentContainer.appendChild(contentEl);
-        }
-        if (this.state.cta) {
-            const ctaButton = document.createElement('a');
-            ctaButton.className = 'jux-hero-cta';
-            ctaButton.href = this.state.ctaLink;
-            ctaButton.textContent = this.state.cta;
-            ctaButton.addEventListener('click', (e) => {
-                this._triggerCallback('ctaClick', e);
-            });
-            contentContainer.appendChild(ctaButton);
-        }
-        hero.appendChild(contentContainer);
-        this._wireStandardEvents(hero);
-        this._wireAllSyncs();
-        container.appendChild(hero);
-        return this;
-    }
-}
-export function hero(id, options = {}) {
-    return new Hero(id, options);
-}