juxscript 1.0.20 → 1.0.21

package/lib/components/nav.ts

@@ -1,12 +1,16 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
+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 {
@@ -33,41 +37,30 @@ type NavState = {
   class: string;
 };
 
-export class Nav {
-  state: NavState;
-  container: HTMLElement | null = null;
-  _id: string;
-  id: string;
-
-  // CRITICAL: Store bind/sync instructions for deferred wiring
-  private _bindings: Array<{ event: string, handler: Function }> = [];
-  private _syncBindings: Array<{
-    property: string,
-    stateObj: State<any>,
-    toState?: Function,
-    toComponent?: Function
-  }> = [];
+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,
@@ -75,9 +68,11 @@ export class Nav {
     }));
   }
 
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from BaseComponent
 
   items(value: NavItem[]): this {
     this.state.items = value;
@@ -91,6 +86,14 @@ export class Nav {
     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;
@@ -106,51 +109,15 @@ export class Nav {
     return this;
   }
 
-  style(value: string): this {
-    this.state.style = value;
-    return this;
-  }
-
-  class(value: string): this {
-    this.state.class = value;
-    return this;
-  }
-
-  bind(event: string, handler: Function): this {
-    this._bindings.push({ event, handler });
-    return this;
-  }
-
-  sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
-    if (!stateObj || typeof stateObj.subscribe !== 'function') {
-      throw new Error(`Nav.sync: Expected a State object for property "${property}"`);
-    }
-    this._syncBindings.push({ property, stateObj, toState, toComponent });
-    return this;
-  }
-
-  /* -------------------------
-   * Render (5-Step Pattern)
-   * ------------------------- */
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
 
   render(targetId?: string): this {
-    // === 1. SETUP: Get or create container ===
-    let container: HTMLElement;
-    if (targetId) {
-      const target = document.querySelector(targetId);
-      if (!target || !(target instanceof HTMLElement)) {
-        throw new Error(`Nav: Target "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      container = getOrCreateContainer(this._id);
-    }
-    this.container = container;
+    const container = this._setupContainer(targetId);
 
-    // === 2. PREPARE: Destructure state ===
     const { brand, items, variant, sticky, style, class: className } = this.state;
 
-    // === 3. BUILD: Create DOM elements ===
     const nav = document.createElement('nav');
     nav.className = `jux-nav jux-nav-${variant}`;
     nav.id = this._id;
@@ -193,55 +160,73 @@ export class Nav {
       nav.appendChild(brandEl);
     }
 
-    // Nav items
+    // Nav items container
     const itemsContainer = document.createElement('div');
     itemsContainer.className = 'jux-nav-items';
 
     items.forEach(item => {
-      const navItem = document.createElement('a');
-      navItem.className = 'jux-nav-item';
-      navItem.href = item.href;
-      navItem.textContent = item.label;
-      if (item.active) navItem.classList.add('jux-nav-item-active');
-      itemsContainer.appendChild(navItem);
-    });
+      const itemWrapper = document.createElement('div');
+      itemWrapper.className = 'jux-nav-item-wrapper';
 
-    nav.appendChild(itemsContainer);
+      if (item.itemClass) {
+        itemWrapper.className += ` ${item.itemClass}`;
+      }
 
-    // === 4. WIRE: Attach event listeners and sync bindings ===
+      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');
+      }
 
-    // Wire custom bindings from .bind() calls
-    this._bindings.forEach(({ event, handler }) => {
-      nav.addEventListener(event, handler as EventListener);
+      itemWrapper.appendChild(navLink);
+      itemsContainer.appendChild(itemWrapper);
     });
 
-    // Wire sync bindings from .sync() calls
+    nav.appendChild(itemsContainer);
+
+    this._wireStandardEvents(nav);
+
+    // Wire sync bindings
     this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
       if (property === 'items') {
-        const transformToComponent = toComponent || ((v: any) => v);
+        const transform = toComponent || ((v: any) => v);
 
         stateObj.subscribe((val: any) => {
-          const transformed = transformToComponent(val);
+          const transformed = transform(val);
           this.state.items = transformed;
           this._setActiveStates();
 
-          // Re-render items
           itemsContainer.innerHTML = '';
           this.state.items.forEach((item: any) => {
-            const navItem = document.createElement('a');
-            navItem.className = 'jux-nav-item';
-            navItem.href = item.href;
-            navItem.textContent = item.label;
-            if (item.active) navItem.classList.add('jux-nav-item-active');
-            itemsContainer.appendChild(navItem);
+            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 transformToComponent = toComponent || ((v: any) => v);
+        const transform = toComponent || ((v: any) => v);
 
         stateObj.subscribe((val: any) => {
-          const transformed = transformToComponent(val);
+          const transformed = transform(val);
           const brandEl = nav.querySelector('.jux-nav-brand');
           if (brandEl && transformed.text) {
             const textEl = brandEl.querySelector('span:last-child');
@@ -254,8 +239,8 @@ export class Nav {
       }
     });
 
-    // === 5. RENDER: Append to DOM and finalize ===
     container.appendChild(nav);
+    this._nav = nav;
 
     requestAnimationFrame(() => {
       if ((window as any).lucide) {
@@ -265,13 +250,6 @@ export class Nav {
 
     return this;
   }
-
-  renderTo(juxComponent: any): this {
-    if (!juxComponent?._id) {
-      throw new Error('Nav.renderTo: Invalid component');
-    }
-    return this.render(`#${juxComponent._id}`);
-  }
 }
 
 export function nav(id: string, options: NavOptions = {}): Nav {

package/lib/components/paragraph.ts

@@ -1,118 +1,61 @@
-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
- */
-export class Paragraph {
-    state: ParagraphState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-
-    // CRITICAL: Store bind/sync instructions for deferred wiring
-    private _bindings: Array<{ event: string, handler: Function }> = [];
-    private _syncBindings: Array<{
-        property: string,
-        stateObj: State<any>,
-        toState?: Function,
-        toComponent?: 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 handler (stores for wiring in render)
-     * DOM events only: click, mouseenter, etc.
-     */
-    bind(event: string, handler: Function): this {
-        this._bindings.push({ event, handler });
-        return this;
-    }
+    // ✅ Inherited from BaseComponent:
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - All other base methods
 
-    /**
-     * Sync with state (one-way: State → Component)
-     * 
-     * @param property - Component property to sync ('text', 'class', 'style')
-     * @param stateObj - State object to sync with
-     * @param transform - Optional transform function from state to component
-     */
-    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
-        if (!stateObj || typeof stateObj.subscribe !== 'function') {
-            throw new Error(`Paragraph.sync: Expected a State object for property "${property}"`);
-        }
-        this._syncBindings.push({ property, stateObj, toState, toComponent });
+    text(value: string): this {
+        this.state.text = value;
         return this;
     }
 
-    /* -------------------------
-     * Render
-     * ------------------------- */
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
 
     render(targetId?: string): this {
-        // === 1. SETUP: Get or create container ===
-        let container: HTMLElement;
-        if (targetId) {
-            const target = document.querySelector(targetId);
-            if (!target || !(target instanceof HTMLElement)) {
-                throw new Error(`Paragraph: Target "${targetId}" not found`);
-            }
-            container = target;
-        } else {
-            container = getOrCreateContainer(this._id);
-        }
-        this.container = container;
+        const container = this._setupContainer(targetId);
 
-        // === 2. PREPARE: Destructure state ===
         const { text, style, class: className } = this.state;
 
-        // === 3. BUILD: Create DOM elements ===
         const paragraph = document.createElement('p');
         paragraph.className = 'jux-paragraph';
         paragraph.id = this._id;
@@ -120,42 +63,35 @@ export class Paragraph {
         if (className) paragraph.className += ` ${className}`;
         if (style) paragraph.setAttribute('style', style);
 
-        // === 4. WIRE: Attach event listeners and sync bindings ===
-
-        // Wire custom bindings from .bind() calls
-        this._bindings.forEach(({ event, handler }) => {
-            paragraph.addEventListener(event, handler as EventListener);
-        });
+        this._wireStandardEvents(paragraph);
 
-        // Wire sync bindings from .sync() calls
+        // Wire sync bindings
         this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
             if (property === 'text') {
-                const transformToComponent = toComponent || ((v: any) => String(v));
+                const transform = toComponent || ((v: any) => String(v));
 
                 stateObj.subscribe((val: any) => {
-                    const transformed = transformToComponent(val);
+                    const transformed = transform(val);
                     paragraph.textContent = transformed;
                     this.state.text = transformed;
                 });
             }
+            else if (property === 'class') {
+                const transform = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform(val);
+                    paragraph.className = `jux-paragraph ${transformed}`;
+                    this.state.class = transformed;
+                });
+            }
         });
 
-        // === 5. RENDER: Append to DOM and finalize ===
         container.appendChild(paragraph);
         return this;
     }
-
-    renderTo(juxComponent: any): this {
-        if (!juxComponent?._id) {
-            throw new Error('Paragraph.renderTo: Invalid component');
-        }
-        return this.render(`#${juxComponent._id}`);
-    }
 }
 
-/**
- * Factory helper
- */
 export function paragraph(id: string, options: ParagraphOptions = {}): Paragraph {
     return new Paragraph(id, options);
 }