juxscript 1.0.19 → 1.0.21

package/lib/components/nav.ts

@@ -1,72 +1,66 @@
-import { getOrCreateContainer } from './helpers.js';
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
 import { req } from './req.js';
 
-/**
- * Nav item configuration
- */
+// 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;
 }
 
-/**
- * Nav component options
- */
 export interface NavOptions {
   items?: NavItem[];
+  brand?: NavBrand;
   variant?: 'default' | 'pills' | 'tabs';
+  sticky?: boolean;
   style?: string;
   class?: string;
 }
 
-/**
- * Nav component state
- */
 type NavState = {
   items: NavItem[];
+  brand?: NavBrand;
   variant: string;
+  sticky: boolean;
   style: string;
   class: string;
 };
 
-/**
- * Nav component
- *
- * Usage:
- *   const nav = jux.nav('myNav', {
- *     variant: 'pills',
- *     items: [
- *       { label: 'Home', href: '/', active: true },
- *       { label: 'About', href: '/about' }
- *     ]
- *   });
- *   nav.render();
- */
-export class Nav {
-  state: NavState;
-  container: HTMLElement | null = null;
-  _id: string;
-  id: string;
+export class Nav extends BaseComponent<NavState> {
+  private _nav: HTMLElement | null = null;
 
   constructor(id: string, options: NavOptions = {}) {
-    this._id = id;
-    this.id = id;
-
-    this.state = {
+    super(id, {
       items: options.items ?? [],
+      brand: options.brand,
       variant: options.variant ?? 'default',
+      sticky: options.sticky ?? false,
       style: options.style ?? '',
       class: options.class ?? ''
-    };
+    });
 
-    // Auto-set active state based on current path
     this._setActiveStates();
   }
 
-  /**
-   * Set active state on items based on current request path
-   */
+  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,
@@ -74,9 +68,11 @@ export class Nav {
     }));
   }
 
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from BaseComponent
 
   items(value: NavItem[]): this {
     this.state.items = value;
@@ -90,89 +86,172 @@ export class Nav {
     return this;
   }
 
-  variant(value: string): this {
-    this.state.variant = value;
+  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;
   }
 
-  style(value: string): this {
-    this.state.style = value;
+  variant(value: string): this {
+    this.state.variant = value;
     return this;
   }
 
-  class(value: string): this {
-    this.state.class = value;
+  sticky(value: boolean): this {
+    this.state.sticky = value;
     return this;
   }
 
-  /* -------------------------
-   * Render
-   * ------------------------- */
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
 
   render(targetId?: string): this {
-    let container: HTMLElement;
-
-    if (targetId) {
-      const target = document.querySelector(targetId);
-      if (!target || !(target instanceof HTMLElement)) {
-        throw new Error(`Nav: Target element "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      container = getOrCreateContainer(this._id);
-    }
+    const container = this._setupContainer(targetId);
 
-    this.container = container;
-    const { items, variant, style, class: className } = this.state;
+    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);
 
-    if (className) {
-      nav.className += ` ${className}`;
-    }
+    // Brand/Logo
+    if (brand) {
+      const brandEl = document.createElement('div');
+      brandEl.className = 'jux-nav-brand';
 
-    if (style) {
-      nav.setAttribute('style', style);
+      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 link = document.createElement('a');
-      link.className = 'jux-nav-item';
-      link.href = item.href;
-      link.textContent = item.label;
+      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) {
-        link.classList.add('jux-nav-item-active');
+        itemWrapper.classList.add('jux-nav-item-active');
+        navLink.classList.add('jux-nav-link-active');
       }
 
-      nav.appendChild(link);
+      itemWrapper.appendChild(navLink);
+      itemsContainer.appendChild(itemWrapper);
     });
 
-    container.appendChild(nav);
-    return this;
-  }
+    nav.appendChild(itemsContainer);
 
-  /**
-   * Render to another Jux component's container
-   */
-  renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Nav.renderTo: Invalid component - not an object');
-    }
+    this._wireStandardEvents(nav);
 
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Nav.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
+    // 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}`;
+            }
 
-    return this.render(`#${juxComponent._id}`);
+            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;
   }
 }
 
-/**
- * Factory helper
- */
 export function nav(id: string, options: NavOptions = {}): Nav {
   return new Nav(id, options);
 }

package/lib/components/paragraph.ts

@@ -1,198 +1,97 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
 
-/**
- * Paragraph options
- */
 export interface ParagraphOptions {
     text?: string;
     class?: string;
     style?: string;
 }
 
-/**
- * Paragraph state
- */
 type ParagraphState = {
     text: string;
     class: string;
     style: string;
 };
 
-/**
- * Paragraph component - semantic paragraph element
- * 
- * Usage:
- *   jux.paragraph('intro', { text: 'Welcome to JUX' }).render('#app');
- *   jux.paragraph('description').text('A simple framework').render('#app');
- *   
- *   // With state binding
- *   jux.paragraph('counter')
- *     .text('Count: 0')
- *     .bind('text', count, (val) => `Count: ${val}`)
- *     .render('#app');
- *   
- *   // With sync (one-way for paragraph)
- *   jux.paragraph('display')
- *     .sync('text', count, (val) => `Count: ${val}`)
- *     .render('#app');
- */
-export class Paragraph {
-    state: ParagraphState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-
-    // Store bind() instructions
-    private _bindings: Array<{ event: string, handler: Function, stateObj?: State<any>, transform?: Function }> = [];
-
-    // Store sync() instructions
-    private _syncBindings: Array<{ property: string, stateObj: State<any>, transform?: Function }> = [];
-
+export class Paragraph extends BaseComponent<ParagraphState> {
     constructor(id: string, options: ParagraphOptions = {}) {
-        this._id = id;
-        this.id = id;
-
-        this.state = {
+        super(id, {
             text: options.text ?? '',
             class: options.class ?? '',
             style: options.style ?? ''
-        };
+        });
     }
 
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
-
-    text(value: string): this {
-        this.state.text = value;
-        return this;
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
     }
 
-    class(value: string): this {
-        this.state.class = value;
-        return this;
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
     }
 
-    style(value: string): this {
-        this.state.style = value;
-        return this;
-    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
 
-    /**
-     * Bind event or state (stores for wiring in render)
-     */
-    bind(property: string, source: State<any> | Function, transform?: Function): this {
-        if (typeof source === 'function') {
-            // Event binding
-            this._bindings.push({ event: property, handler: source });
-        } else {
-            // Validate it's a State object
-            if (!source || typeof source.subscribe !== 'function') {
-                throw new Error(`Paragraph.bind: Expected a State object, got ${typeof source}. Did you pass 'state.value' instead of 'state'?`);
-            }
-            // State binding
-            this._bindings.push({ event: property, handler: () => { }, stateObj: source, transform });
-        }
-        return this;
-    }
+    // ✅ Inherited from BaseComponent:
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - All other base methods
 
-    /**
-     * Sync with state (one-way for paragraph: State → Component)
-     * 
-     * @param property - Component property to sync ('text', 'class', 'style')
-     * @param stateObj - State object to sync with
-     * @param transform - Optional transform function when going from state to component
-     */
-    sync(property: string, stateObj: State<any>, transform?: Function): this {
-        // Validate it's a State object
-        if (!stateObj || typeof stateObj.subscribe !== 'function') {
-            throw new Error(`Paragraph.sync: Expected a State object, got ${typeof stateObj}. Did you pass 'state.value' instead of 'state'?`);
-        }
-        this._syncBindings.push({ property, stateObj, transform });
+    text(value: string): this {
+        this.state.text = value;
         return this;
     }
 
-    /* -------------------------
-     * Render
-     * ------------------------- */
-
-    render(targetId?: string | HTMLElement): this {
-        let container: HTMLElement;
-
-        if (targetId) {
-            if (targetId instanceof HTMLElement) {
-                container = targetId;
-            } else {
-                const target = document.querySelector(targetId);
-                if (!target || !(target instanceof HTMLElement)) {
-                    throw new Error(`Paragraph: Target element "${targetId}" not found`);
-                }
-                container = target;
-            }
-        } else {
-            container = getOrCreateContainer(this._id);
-        }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
 
-        this.container = container;
-        const { text, class: className, style } = this.state;
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
 
-        const p = document.createElement('p');
-        p.id = this._id;
-        p.textContent = text;
+        const { text, style, class: className } = this.state;
 
-        if (className) {
-            p.className = className;
-        }
+        const paragraph = document.createElement('p');
+        paragraph.className = 'jux-paragraph';
+        paragraph.id = this._id;
+        paragraph.textContent = text;
+        if (className) paragraph.className += ` ${className}`;
+        if (style) paragraph.setAttribute('style', style);
 
-        if (style) {
-            p.setAttribute('style', style);
-        }
+        this._wireStandardEvents(paragraph);
 
-        container.appendChild(p);
+        // Wire sync bindings
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'text') {
+                const transform = toComponent || ((v: any) => String(v));
 
-        // Wire up bind() bindings after DOM element is created
-        this._bindings.forEach(({ event, handler, stateObj, transform }) => {
-            if (stateObj) {
-                // State binding - subscribe to state changes
                 stateObj.subscribe((val: any) => {
-                    const transformed = transform ? transform(val) : val;
-                    if (event === 'text') {
-                        p.textContent = transformed;
-                        this.state.text = transformed;
-                    }
+                    const transformed = transform(val);
+                    paragraph.textContent = transformed;
+                    this.state.text = transformed;
                 });
-            } else {
-                // Event binding
-                p.addEventListener(event, handler as EventListener);
             }
-        });
-
-        // Wire up sync() bindings (State → Component)
-        this._syncBindings.forEach(({ property, stateObj, transform }) => {
-            stateObj.subscribe((val: any) => {
-                const transformed = transform ? transform(val) : val;
+            else if (property === 'class') {
+                const transform = toComponent || ((v: any) => String(v));
 
-                if (property === 'text') {
-                    p.textContent = transformed;
-                    this.state.text = transformed;
-                } else if (property === 'class') {
-                    p.className = transformed;
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform(val);
+                    paragraph.className = `jux-paragraph ${transformed}`;
                     this.state.class = transformed;
-                } else if (property === 'style') {
-                    p.setAttribute('style', transformed);
-                    this.state.style = transformed;
-                }
-            });
+                });
+            }
         });
 
+        container.appendChild(paragraph);
         return this;
     }
 }
 
-/**
- * Factory helper
- */
 export function paragraph(id: string, options: ParagraphOptions = {}): Paragraph {
     return new Paragraph(id, options);
 }