juxscript 1.1.240 → 1.1.244

package/lib/components/nav.js

@@ -1,193 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { renderIcon } from './icons.js';
-import { req } from './req.js';
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = [];
-export class Nav extends BaseComponent {
-    constructor(id, options = {}) {
-        super(id, {
-            items: options.items ?? [],
-            brand: options.brand,
-            variant: options.variant ?? 'default',
-            sticky: options.sticky ?? false,
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
-        this._nav = null;
-        this._setActiveStates();
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    _setActiveStates() {
-        this.state.items = this.state.items.map(item => ({
-            ...item,
-            active: req.isActiveNavItem(item.href)
-        }));
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    // ✅ Inherited from BaseComponent
-    items(value) {
-        this.state.items = value;
-        this._setActiveStates();
-        return this;
-    }
-    addItem(item) {
-        this.state.items = [...this.state.items, item];
-        this._setActiveStates();
-        return this;
-    }
-    itemClass(className) {
-        this.state.items = this.state.items.map(item => ({
-            ...item,
-            itemClass: className
-        }));
-        return this;
-    }
-    brand(value) {
-        this.state.brand = value;
-        return this;
-    }
-    variant(value) {
-        this.state.variant = value;
-        return this;
-    }
-    sticky(value) {
-        this.state.sticky = value;
-        return this;
-    }
-    update(prop, value) {
-        // No reactive updates needed
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { brand, items, variant, sticky, style, class: className } = this.state;
-        const nav = document.createElement('nav');
-        nav.className = `jux-nav jux-nav-${variant}`;
-        nav.id = this._id;
-        if (sticky)
-            nav.classList.add('jux-nav-sticky');
-        if (className)
-            nav.className += ` ${className}`;
-        if (style)
-            nav.setAttribute('style', style);
-        // Brand/Logo
-        if (brand) {
-            const brandEl = document.createElement('div');
-            brandEl.className = 'jux-nav-brand';
-            if (brand.href) {
-                const link = document.createElement('a');
-                link.href = brand.href;
-                if (brand.icon) {
-                    const icon = document.createElement('span');
-                    icon.appendChild(renderIcon(brand.icon));
-                    link.appendChild(icon);
-                }
-                if (brand.text) {
-                    const text = document.createElement('span');
-                    text.textContent = brand.text;
-                    link.appendChild(text);
-                }
-                brandEl.appendChild(link);
-            }
-            else {
-                if (brand.icon) {
-                    const icon = document.createElement('span');
-                    icon.appendChild(renderIcon(brand.icon));
-                    brandEl.appendChild(icon);
-                }
-                if (brand.text) {
-                    const text = document.createElement('span');
-                    text.textContent = brand.text;
-                    brandEl.appendChild(text);
-                }
-            }
-            nav.appendChild(brandEl);
-        }
-        // Nav items container
-        const itemsContainer = document.createElement('div');
-        itemsContainer.className = 'jux-nav-items';
-        items.forEach(item => {
-            const itemWrapper = document.createElement('div');
-            itemWrapper.className = 'jux-nav-item-wrapper';
-            if (item.itemClass) {
-                itemWrapper.className += ` ${item.itemClass}`;
-            }
-            const navLink = document.createElement('a');
-            navLink.className = 'jux-nav-link';
-            navLink.href = item.href;
-            navLink.textContent = item.label;
-            if (item.active) {
-                itemWrapper.classList.add('jux-nav-item-active');
-                navLink.classList.add('jux-nav-link-active');
-            }
-            itemWrapper.appendChild(navLink);
-            itemsContainer.appendChild(itemWrapper);
-        });
-        nav.appendChild(itemsContainer);
-        this._wireStandardEvents(nav);
-        // Wire sync bindings
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'items') {
-                const transform = toComponent || ((v) => v);
-                stateObj.subscribe((val) => {
-                    const transformed = transform(val);
-                    this.state.items = transformed;
-                    this._setActiveStates();
-                    itemsContainer.innerHTML = '';
-                    this.state.items.forEach((item) => {
-                        const itemWrapper = document.createElement('div');
-                        itemWrapper.className = 'jux-nav-item-wrapper';
-                        if (item.itemClass) {
-                            itemWrapper.className += ` ${item.itemClass}`;
-                        }
-                        const navLink = document.createElement('a');
-                        navLink.className = 'jux-nav-link';
-                        navLink.href = item.href;
-                        navLink.textContent = item.label;
-                        if (item.active) {
-                            itemWrapper.classList.add('jux-nav-item-active');
-                            navLink.classList.add('jux-nav-link-active');
-                        }
-                        itemWrapper.appendChild(navLink);
-                        itemsContainer.appendChild(itemWrapper);
-                    });
-                });
-            }
-            else if (property === 'brand') {
-                const transform = toComponent || ((v) => v);
-                stateObj.subscribe((val) => {
-                    const transformed = transform(val);
-                    const brandEl = nav.querySelector('.jux-nav-brand');
-                    if (brandEl && transformed.text) {
-                        const textEl = brandEl.querySelector('span:last-child');
-                        if (textEl) {
-                            textEl.textContent = transformed.text;
-                        }
-                    }
-                    this.state.brand = transformed;
-                });
-            }
-        });
-        container.appendChild(nav);
-        this._nav = nav;
-        requestAnimationFrame(() => {
-            if (window.lucide) {
-                window.lucide.createIcons();
-            }
-        });
-        return this;
-    }
-}
-export function nav(id, options = {}) {
-    return new Nav(id, options);
-}

package/lib/components/nav.ts

@@ -1,261 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { renderIcon } from './icons.js';
-import { req } from './req.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = [] as const;
-
-export interface NavItem {
-  label: string;
-  href: string;
-  active?: boolean;
-  itemClass?: string;
-}
-
-export interface NavBrand {
-  text?: string;
-  href?: string;
-  icon?: string;
-}
-
-export interface NavOptions {
-  items?: NavItem[];
-  brand?: NavBrand;
-  variant?: 'default' | 'pills' | 'tabs';
-  sticky?: boolean;
-  style?: string;
-  class?: string;
-}
-
-type NavState = {
-  items: NavItem[];
-  brand?: NavBrand;
-  variant: string;
-  sticky: boolean;
-  style: string;
-  class: string;
-};
-
-export class Nav extends BaseComponent<NavState> {
-  private _nav: HTMLElement | null = null;
-
-  constructor(id: string, options: NavOptions = {}) {
-    super(id, {
-      items: options.items ?? [],
-      brand: options.brand,
-      variant: options.variant ?? 'default',
-      sticky: options.sticky ?? false,
-      style: options.style ?? '',
-      class: options.class ?? ''
-    });
-
-    this._setActiveStates();
-  }
-
-  protected getTriggerEvents(): readonly string[] {
-    return TRIGGER_EVENTS;
-  }
-
-  protected getCallbackEvents(): readonly string[] {
-    return CALLBACK_EVENTS;
-  }
-
-  private _setActiveStates(): void {
-    this.state.items = this.state.items.map(item => ({
-      ...item,
-      active: req.isActiveNavItem(item.href)
-    }));
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * FLUENT API
-   * ═════════════════════════════════════════════════════════════════ */
-
-  // ✅ Inherited from BaseComponent
-
-  items(value: NavItem[]): this {
-    this.state.items = value;
-    this._setActiveStates();
-    return this;
-  }
-
-  addItem(item: NavItem): this {
-    this.state.items = [...this.state.items, item];
-    this._setActiveStates();
-    return this;
-  }
-
-  itemClass(className: string): this {
-    this.state.items = this.state.items.map(item => ({
-      ...item,
-      itemClass: className
-    }));
-    return this;
-  }
-
-  brand(value: NavBrand): this {
-    this.state.brand = value;
-    return this;
-  }
-
-  variant(value: string): this {
-    this.state.variant = value;
-    return this;
-  }
-
-  sticky(value: boolean): this {
-    this.state.sticky = value;
-    return this;
-  }
-
-  update(prop: string, value: any): void {
-    // No reactive updates needed
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * RENDER
-   * ═════════════════════════════════════════════════════════════════ */
-
-  render(targetId?: string | HTMLElement | BaseComponent<any>): this {
-    const container = this._setupContainer(targetId);
-
-    const { brand, items, variant, sticky, style, class: className } = this.state;
-
-    const nav = document.createElement('nav');
-    nav.className = `jux-nav jux-nav-${variant}`;
-    nav.id = this._id;
-    if (sticky) nav.classList.add('jux-nav-sticky');
-    if (className) nav.className += ` ${className}`;
-    if (style) nav.setAttribute('style', style);
-
-    // Brand/Logo
-    if (brand) {
-      const brandEl = document.createElement('div');
-      brandEl.className = 'jux-nav-brand';
-
-      if (brand.href) {
-        const link = document.createElement('a');
-        link.href = brand.href;
-        if (brand.icon) {
-          const icon = document.createElement('span');
-          icon.appendChild(renderIcon(brand.icon));
-          link.appendChild(icon);
-        }
-        if (brand.text) {
-          const text = document.createElement('span');
-          text.textContent = brand.text;
-          link.appendChild(text);
-        }
-        brandEl.appendChild(link);
-      } else {
-        if (brand.icon) {
-          const icon = document.createElement('span');
-          icon.appendChild(renderIcon(brand.icon));
-          brandEl.appendChild(icon);
-        }
-        if (brand.text) {
-          const text = document.createElement('span');
-          text.textContent = brand.text;
-          brandEl.appendChild(text);
-        }
-      }
-
-      nav.appendChild(brandEl);
-    }
-
-    // Nav items container
-    const itemsContainer = document.createElement('div');
-    itemsContainer.className = 'jux-nav-items';
-
-    items.forEach(item => {
-      const itemWrapper = document.createElement('div');
-      itemWrapper.className = 'jux-nav-item-wrapper';
-
-      if (item.itemClass) {
-        itemWrapper.className += ` ${item.itemClass}`;
-      }
-
-      const navLink = document.createElement('a');
-      navLink.className = 'jux-nav-link';
-      navLink.href = item.href;
-      navLink.textContent = item.label;
-      if (item.active) {
-        itemWrapper.classList.add('jux-nav-item-active');
-        navLink.classList.add('jux-nav-link-active');
-      }
-
-      itemWrapper.appendChild(navLink);
-      itemsContainer.appendChild(itemWrapper);
-    });
-
-    nav.appendChild(itemsContainer);
-
-    this._wireStandardEvents(nav);
-
-    // Wire sync bindings
-    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-      if (property === 'items') {
-        const transform = toComponent || ((v: any) => v);
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transform(val);
-          this.state.items = transformed;
-          this._setActiveStates();
-
-          itemsContainer.innerHTML = '';
-          this.state.items.forEach((item: any) => {
-            const itemWrapper = document.createElement('div');
-            itemWrapper.className = 'jux-nav-item-wrapper';
-
-            if (item.itemClass) {
-              itemWrapper.className += ` ${item.itemClass}`;
-            }
-
-            const navLink = document.createElement('a');
-            navLink.className = 'jux-nav-link';
-            navLink.href = item.href;
-            navLink.textContent = item.label;
-            if (item.active) {
-              itemWrapper.classList.add('jux-nav-item-active');
-              navLink.classList.add('jux-nav-link-active');
-            }
-
-            itemWrapper.appendChild(navLink);
-            itemsContainer.appendChild(itemWrapper);
-          });
-        });
-      }
-      else if (property === 'brand') {
-        const transform = toComponent || ((v: any) => v);
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transform(val);
-          const brandEl = nav.querySelector('.jux-nav-brand');
-          if (brandEl && transformed.text) {
-            const textEl = brandEl.querySelector('span:last-child');
-            if (textEl) {
-              textEl.textContent = transformed.text;
-            }
-          }
-          this.state.brand = transformed;
-        });
-      }
-    });
-
-    container.appendChild(nav);
-    this._nav = nav;
-
-    requestAnimationFrame(() => {
-      if ((window as any).lucide) {
-        (window as any).lucide.createIcons();
-      }
-    });
-
-    return this;
-  }
-}
-
-export function nav(id: string, options: NavOptions = {}): Nav {
-  return new Nav(id, options);
-}

package/lib/components/paragraph.d.ts

@@ -1,30 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-export interface ParagraphOptions {
-    content?: string;
-    class?: string;
-    style?: string;
-}
-type ParagraphState = {
-    content: string;
-    class: string;
-    style: string;
-};
-export declare class Paragraph extends BaseComponent<ParagraphState> {
-    constructor(id: string, options?: ParagraphOptions);
-    protected getTriggerEvents(): readonly string[];
-    protected getCallbackEvents(): readonly string[];
-    /**
-     * ✅ Reactive update implementation for Paragraph
-     * Called automatically when this.state[prop] changes via Proxy
-     */
-    update(prop: string, value: any): void;
-    content(value: string): this;
-    /**
-     * Alias for content() - more intuitive naming
-     */
-    text(value: string): this;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-}
-export declare function paragraph(id: string, options?: ParagraphOptions): Paragraph;
-export {};
-//# sourceMappingURL=paragraph.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"paragraph.d.ts","sourceRoot":"","sources":["paragraph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,gBAAgB;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,cAAc,GAAG;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,SAAU,SAAQ,aAAa,CAAC,cAAc,CAAC;gBAC5C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB;IAQtD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAIhD;;;OAGG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAwBtC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B;;OAEG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQzB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAuCrE;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS,CAE/E"}

package/lib/components/paragraph.js

@@ -1,93 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = [];
-export class Paragraph extends BaseComponent {
-    constructor(id, options = {}) {
-        super(id, {
-            content: options.content ?? '',
-            class: options.class ?? '',
-            style: options.style ?? ''
-        });
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /**
-     * ✅ Reactive update implementation for Paragraph
-     * Called automatically when this.state[prop] changes via Proxy
-     */
-    update(prop, value) {
-        const el = document.getElementById(this._id);
-        if (!el)
-            return;
-        switch (prop) {
-            case 'content':
-                el.textContent = value;
-                break;
-            default:
-                super.update(prop, value);
-                break;
-        }
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    // ✅ Inherited from BaseComponent:
-    // - style(), class()
-    // - bind(), sync(), renderTo()
-    // - All other base methods
-    content(value) {
-        this.state.content = value; // ✅ Triggers update()
-        return this;
-    }
-    /**
-     * Alias for content() - more intuitive naming
-     */
-    text(value) {
-        return this.content(value);
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { content, style, class: className } = this.state;
-        const paragraph = document.createElement('p');
-        paragraph.className = 'jux-paragraph';
-        paragraph.id = this._id;
-        paragraph.textContent = content;
-        if (className)
-            paragraph.className += ` ${className}`;
-        if (style)
-            paragraph.setAttribute('style', style);
-        this._wireStandardEvents(paragraph);
-        // 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);
-                    paragraph.textContent = transformed;
-                    this.state.content = transformed;
-                });
-            }
-            else if (property === 'class') {
-                const transform = toComponent || ((v) => String(v));
-                stateObj.subscribe((val) => {
-                    const transformed = transform(val);
-                    paragraph.className = `jux-paragraph ${transformed}`;
-                    this.state.class = transformed;
-                });
-            }
-        });
-        container.appendChild(paragraph);
-        return this;
-    }
-}
-export function paragraph(id, options = {}) {
-    return new Paragraph(id, options);
-}