juxscript 1.0.20 → 1.0.21

package/lib/components/heading.ts

@@ -1,9 +1,9 @@
-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;  // Headings are display-only, no events
 
-/**
- * Heading options
- */
 export interface HeadingOptions {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     text?: string;
@@ -11,9 +11,6 @@ export interface HeadingOptions {
     style?: string;
 }
 
-/**
- * Heading state
- */
 type HeadingState = {
     level: 1 | 2 | 3 | 4 | 5 | 6;
     text: string;
@@ -21,99 +18,52 @@ type HeadingState = {
     style: string;
 };
 
-/**
- * Heading component - semantic heading elements (h1-h6)
- * 
- * Usage:
- *   jux.heading('title', { level: 1, text: 'Welcome' }).render('#app');
- *   jux.heading('subtitle').level(2).text('Getting Started').render('#app');
- */
-export class Heading {
-    state: HeadingState;
-    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 Heading extends BaseComponent<HeadingState> {
     constructor(id: string, options: HeadingOptions = {}) {
-        this._id = id;
-        this.id = id;
-
-        this.state = {
+        super(id, {
             level: options.level ?? 1,
             text: options.text ?? '',
             class: options.class ?? '',
             style: options.style ?? ''
-        };
+        });
     }
 
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
-
-    level(value: 1 | 2 | 3 | 4 | 5 | 6): this {
-        this.state.level = value;
-        return this;
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
     }
 
-    text(value: string): this {
-        this.state.text = value;
-        return this;
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
     }
 
-    class(value: string): this {
-        this.state.class = value;
-        return this;
-    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
 
-    style(value: string): this {
-        this.state.style = value;
-        return this;
-    }
+    // ✅ Inherited from BaseComponent:
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - All other base methods
 
-    bind(event: string, handler: Function): this {
-        this._bindings.push({ event, handler });
+    level(value: 1 | 2 | 3 | 4 | 5 | 6): this {
+        this.state.level = value;
         return this;
     }
 
-    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
-        if (!stateObj || typeof stateObj.subscribe !== 'function') {
-            throw new Error(`Heading.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(`Heading: 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, level, style, class: className } = this.state;
 
-        // === 3. BUILD: Create DOM elements ===
         const heading = document.createElement(`h${level}`) as HTMLHeadingElement;
         heading.className = `jux-heading jux-heading-${level}`;
         heading.id = this._id;
@@ -121,42 +71,26 @@ export class Heading {
         if (className) heading.className += ` ${className}`;
         if (style) heading.setAttribute('style', style);
 
-        // === 4. WIRE: Attach event listeners and sync bindings ===
-
-        // Wire custom bindings from .bind() calls
-        this._bindings.forEach(({ event, handler }) => {
-            heading.addEventListener(event, handler as EventListener);
-        });
+        this._wireStandardEvents(heading);
 
-        // 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);
                     heading.textContent = transformed;
                     this.state.text = transformed;
                 });
             }
         });
 
-        // === 5. RENDER: Append to DOM and finalize ===
         container.appendChild(heading);
         return this;
     }
-
-    renderTo(juxComponent: any): this {
-        if (!juxComponent?._id) {
-            throw new Error('Heading.renderTo: Invalid component');
-        }
-        return this.render(`#${juxComponent._id}`);
-    }
 }
 
-/**
- * Factory helper
- */
 export function heading(id: string, options: HeadingOptions = {}): Heading {
     return new Heading(id, options);
 }

package/lib/components/helpers.ts

@@ -22,12 +22,19 @@ export function getOrCreateContainer(id: string): HTMLElement {
     container = document.createElement('div');
     container.id = id;
 
-    // Find appropriate parent
-    let parent: HTMLElement;
-    // Page components go inside #appmain (or [data-jux-page] if no layout)
-    const appmain = document.getElementById('appmain');
-    const dataJuxPage = document.querySelector('[data-jux-page]');
-    parent = (appmain || dataJuxPage || document.body) as HTMLElement;
+    // 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.ts

@@ -1,9 +1,9 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions - Hero is display-only, but CTA button can trigger actions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['ctaClick'] as const;  // ✅ When CTA button is clicked
 
-/**
- * Hero component options
- */
 export interface HeroOptions {
   title?: string;
   subtitle?: string;
@@ -15,9 +15,6 @@ export interface HeroOptions {
   class?: string;
 }
 
-/**
- * Hero component state
- */
 type HeroState = {
   title: string;
   subtitle: string;
@@ -25,61 +22,43 @@ type HeroState = {
   ctaLink: string;
   backgroundImage: string;
   variant: string;
-  style: string;
-  class: string;
   content: string;
   backgroundOverlay: boolean;
   centered: boolean;
+  style: string;
+  class: string;
 };
 
-/**
- * Hero component
- * 
- * Usage:
- *   const hero = jux.hero('myHero', {
- *     title: 'Welcome',
- *     subtitle: 'Get started today',
- *     cta: 'Learn More'
- *   });
- *   hero.render();
- */
-export class Hero {
-  state: HeroState;
-  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 Hero extends BaseComponent<HeroState> {
   constructor(id: string, options: HeroOptions = {}) {
-    this._id = id;
-    this.id = id;
-
-    this.state = {
+    super(id, {
       title: options.title ?? '',
       subtitle: options.subtitle ?? '',
       cta: options.cta ?? '',
       ctaLink: options.ctaLink ?? '#',
       backgroundImage: options.backgroundImage ?? '',
       variant: options.variant ?? 'default',
-      style: options.style ?? '',
-      class: options.class ?? '',
       content: '',
       backgroundOverlay: false,
-      centered: false
-    };
+      centered: false,
+      style: options.style ?? '',
+      class: options.class ?? ''
+    });
   }
 
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
+  }
+
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from BaseComponent
 
   title(value: string): this {
     this.state.title = value;
@@ -111,51 +90,15 @@ export class Hero {
     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(`Hero.sync: Expected a State object for property "${property}"`);
-    }
-    this._syncBindings.push({ property, stateObj, toState, toComponent });
-    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(`Hero: Target "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      container = getOrCreateContainer(this._id);
-    }
-    this.container = container;
+    const container = this._setupContainer(targetId);
 
-    // === 2. PREPARE: Destructure state ===
     const { title, subtitle, content, backgroundImage, backgroundOverlay, centered, style, class: className } = this.state;
 
-    // === 3. BUILD: Create DOM elements ===
     const hero = document.createElement('section');
     hero.className = 'jux-hero';
     hero.id = this._id;
@@ -198,22 +141,30 @@ export class Hero {
       contentContainer.appendChild(contentEl);
     }
 
-    hero.appendChild(contentContainer);
+    if (this.state.cta) {
+      const ctaButton = document.createElement('a');
+      ctaButton.className = 'jux-hero-cta';
+      ctaButton.href = this.state.ctaLink;
+      ctaButton.textContent = this.state.cta;
 
-    // === 4. WIRE: Attach event listeners and sync bindings ===
+      // ✅ Fire callback when CTA is clicked
+      ctaButton.addEventListener('click', (e) => {
+        this._triggerCallback('ctaClick', e);
+      });
 
-    // Wire custom bindings from .bind() calls
-    this._bindings.forEach(({ event, handler }) => {
-      hero.addEventListener(event, handler as EventListener);
-    });
+      contentContainer.appendChild(ctaButton);
+    }
+
+    hero.appendChild(contentContainer);
+
+    this._wireStandardEvents(hero);
 
-    // Wire sync bindings from .sync() calls
     this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
       if (property === 'title') {
-        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);
           const titleEl = document.getElementById(`${this._id}-title`);
           if (titleEl) {
             titleEl.textContent = transformed;
@@ -222,10 +173,10 @@ export class Hero {
         });
       }
       else if (property === 'subtitle') {
-        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);
           const subtitleEl = document.getElementById(`${this._id}-subtitle`);
           if (subtitleEl) {
             subtitleEl.textContent = transformed;
@@ -234,10 +185,10 @@ export class Hero {
         });
       }
       else if (property === 'content') {
-        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);
           const contentEl = hero.querySelector('.jux-hero-body');
           if (contentEl) {
             contentEl.innerHTML = transformed;
@@ -247,25 +198,11 @@ export class Hero {
       }
     });
 
-    // === 5. RENDER: Append to DOM and finalize ===
     container.appendChild(hero);
     return this;
   }
-
-  /**
-   * Render to another Jux component's container
-   */
-  renderTo(juxComponent: any): this {
-    if (!juxComponent?._id) {
-      throw new Error('Hero.renderTo: Invalid component');
-    }
-    return this.render(`#${juxComponent._id}`);
-  }
 }
 
-/**
- * Factory helper
- */
 export function hero(id: string, options: HeroOptions = {}): Hero {
   return new Hero(id, options);
 }