juxscript 1.0.18 → 1.0.20

package/lib/components/heading.ts

@@ -1,4 +1,5 @@
 import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
 
 /**
  * Heading options
@@ -33,6 +34,15 @@ export class Heading {
     _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
+    }> = [];
+
     constructor(id: string, options: HeadingOptions = {}) {
         this._id = id;
         this.id = id;
@@ -69,46 +79,79 @@ export class Heading {
         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(`Heading.sync: Expected a State object for property "${property}"`);
+        }
+        this._syncBindings.push({ property, stateObj, toState, toComponent });
+        return this;
+    }
+
     /* -------------------------
      * Render
      * ------------------------- */
 
-    render(targetId?: string | HTMLElement): this {
+    render(targetId?: string): this {
+        // === 1. SETUP: Get or create container ===
         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(`Heading: Target element "${targetId}" not found`);
-                }
-                container = target;
+            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 { level, text, class: className, style } = this.state;
 
+        // === 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;
         heading.textContent = text;
+        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);
+        });
+
+        // Wire sync bindings from .sync() calls
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'text') {
+                const transformToComponent = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    heading.textContent = transformed;
+                    this.state.text = transformed;
+                });
+            }
+        });
 
-        if (className) {
-            heading.className = className;
-        }
-
-        if (style) {
-            heading.setAttribute('style', style);
-        }
-
+        // === 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}`);
+    }
 }
 
 /**

package/lib/components/hero.ts

@@ -1,4 +1,5 @@
 import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
 
 /**
  * Hero component options
@@ -26,6 +27,9 @@ type HeroState = {
   variant: string;
   style: string;
   class: string;
+  content: string;
+  backgroundOverlay: boolean;
+  centered: boolean;
 };
 
 /**
@@ -45,6 +49,15 @@ export class Hero {
   _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
+  }> = [];
+
   constructor(id: string, options: HeroOptions = {}) {
     this._id = id;
     this.id = id;
@@ -57,7 +70,10 @@ export class Hero {
       backgroundImage: options.backgroundImage ?? '',
       variant: options.variant ?? 'default',
       style: options.style ?? '',
-      class: options.class ?? ''
+      class: options.class ?? '',
+      content: '',
+      backgroundOverlay: false,
+      centered: false
     };
   }
 
@@ -105,70 +121,134 @@ export class Hero {
     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(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 element "${targetId}" not found`);
+        throw new Error(`Hero: Target "${targetId}" not found`);
       }
       container = target;
     } else {
       container = getOrCreateContainer(this._id);
     }
-
     this.container = container;
-    const { title, subtitle, cta, ctaLink, backgroundImage, variant, style, class: className } = this.state;
 
-    const hero = document.createElement('div');
-    hero.className = `jux-hero jux-hero-${variant}`;
-    hero.id = this._id;
+    // === 2. PREPARE: Destructure state ===
+    const { title, subtitle, content, backgroundImage, backgroundOverlay, centered, style, class: className } = this.state;
 
-    if (className) {
-      hero.className += ` ${className}`;
-    }
-
-    if (style) {
-      hero.setAttribute('style', style);
-    }
+    // === 3. BUILD: Create DOM elements ===
+    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) {
       hero.style.backgroundImage = `url(${backgroundImage})`;
+      if (backgroundOverlay) {
+        const overlay = document.createElement('div');
+        overlay.className = 'jux-hero-overlay';
+        hero.appendChild(overlay);
+      }
     }
 
-    const content = document.createElement('div');
-    content.className = 'jux-hero-content';
+    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;
-      content.appendChild(titleEl);
+      contentContainer.appendChild(titleEl);
     }
 
     if (subtitle) {
       const subtitleEl = document.createElement('p');
       subtitleEl.className = 'jux-hero-subtitle';
+      subtitleEl.id = `${this._id}-subtitle`;
       subtitleEl.textContent = subtitle;
-      content.appendChild(subtitleEl);
+      contentContainer.appendChild(subtitleEl);
     }
 
-    if (cta) {
-      const ctaEl = document.createElement('a');
-      ctaEl.className = 'jux-hero-cta jux-button jux-button-primary';
-      ctaEl.href = ctaLink;
-      ctaEl.textContent = cta;
-      content.appendChild(ctaEl);
+    if (content) {
+      const contentEl = document.createElement('div');
+      contentEl.className = 'jux-hero-body';
+      contentEl.innerHTML = content;
+      contentContainer.appendChild(contentEl);
     }
 
-    hero.appendChild(content);
-    container.appendChild(hero);
+    hero.appendChild(contentContainer);
+
+    // === 4. WIRE: Attach event listeners and sync bindings ===
+
+    // Wire custom bindings from .bind() calls
+    this._bindings.forEach(({ event, handler }) => {
+      hero.addEventListener(event, handler as EventListener);
+    });
+
+    // Wire sync bindings from .sync() calls
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'title') {
+        const transformToComponent = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          const titleEl = document.getElementById(`${this._id}-title`);
+          if (titleEl) {
+            titleEl.textContent = transformed;
+          }
+          this.state.title = transformed;
+        });
+      }
+      else if (property === 'subtitle') {
+        const transformToComponent = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          const subtitleEl = document.getElementById(`${this._id}-subtitle`);
+          if (subtitleEl) {
+            subtitleEl.textContent = transformed;
+          }
+          this.state.subtitle = transformed;
+        });
+      }
+      else if (property === 'content') {
+        const transformToComponent = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          const contentEl = hero.querySelector('.jux-hero-body');
+          if (contentEl) {
+            contentEl.innerHTML = transformed;
+          }
+          this.state.content = transformed;
+        });
+      }
+    });
 
+    // === 5. RENDER: Append to DOM and finalize ===
+    container.appendChild(hero);
     return this;
   }
 
@@ -176,14 +256,9 @@ export class Hero {
    * Render to another Jux component's container
    */
   renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Hero.renderTo: Invalid component - not an object');
+    if (!juxComponent?._id) {
+      throw new Error('Hero.renderTo: Invalid component');
     }
-
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Hero.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
-
     return this.render(`#${juxComponent._id}`);
   }
 }

package/lib/components/icon.ts

@@ -0,0 +1,247 @@
+import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
+import { renderIcon, renderEmoji } from './icons.js';
+
+/**
+ * Icon component options
+ */
+export interface IconOptions {
+    value: string;
+    size?: string;
+    color?: string;
+    useEmoji?: boolean;
+    style?: string;
+    class?: string;
+}
+
+/**
+ * Icon component state
+ */
+type IconState = {
+    value: string;
+    size: string;
+    color: string;
+    useEmoji: boolean;
+    style: string;
+    class: string;
+};
+
+/**
+ * Icon component - Render an icon from emoji, icon name, or image path
+ * 
+ * Usage:
+ *   // Render Lucide icon from emoji
+ *   jux.icon('myIcon', { value: '🚀' }).render('#container');
+ *   
+ *   // Render Lucide icon from name
+ *   jux.icon('myIcon', { value: 'rocket', size: '32px', color: 'red' }).render('#container');
+ *   
+ *   // Render image icon
+ *   jux.icon('myIcon', { value: '/path/icon.png' }).render('#container');
+ *   
+ *   // Force emoji rendering (skip conversion)
+ *   jux.icon('myIcon', { value: '🚀', useEmoji: true }).render('#container');
+ */
+export class Icon {
+    state: IconState;
+    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
+    }> = [];
+
+    constructor(id: string, options: IconOptions) {
+        this._id = id;
+        this.id = id;
+
+        this.state = {
+            value: options.value,
+            size: options.size ?? '24px',
+            color: options.color ?? '',
+            useEmoji: options.useEmoji ?? false,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        };
+    }
+
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+
+    value(value: string): this {
+        this.state.value = value;
+        return this;
+    }
+
+    size(value: string): this {
+        this.state.size = value;
+        return this;
+    }
+
+    color(value: string): this {
+        this.state.color = value;
+        return this;
+    }
+
+    useEmoji(value: boolean): this {
+        this.state.useEmoji = value;
+        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(`Icon.sync: Expected a State object for property "${property}"`);
+        }
+        this._syncBindings.push({ property, stateObj, toState, toComponent });
+        return this;
+    }
+
+    /* -------------------------
+     * Render (5-Step Pattern)
+     * ------------------------- */
+
+    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(`Icon: Target element "${targetId}" not found`);
+            }
+            container = target;
+        } else {
+            container = getOrCreateContainer(this._id);
+        }
+        this.container = container;
+
+        // === 2. PREPARE: Destructure state ===
+        const { value, size, color, useEmoji, style, class: className } = this.state;
+
+        // === 3. BUILD: Create DOM elements ===
+        const wrapper = document.createElement('span');
+        wrapper.className = 'jux-icon';
+        wrapper.id = this._id;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
+
+        const iconElement = useEmoji ? renderEmoji(value) : renderIcon(value);
+        iconElement.style.width = size;
+        iconElement.style.height = size;
+        if (color) iconElement.style.color = color;
+
+        wrapper.appendChild(iconElement);
+
+        // === 4. WIRE: Attach event listeners and sync bindings ===
+
+        // Wire custom bindings from .bind() calls
+        this._bindings.forEach(({ event, handler }) => {
+            wrapper.addEventListener(event, handler as EventListener);
+        });
+
+        // Wire sync bindings from .sync() calls
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'value') {
+                const transformToComponent = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    this.state.value = transformed;
+
+                    // Re-render icon
+                    wrapper.innerHTML = '';
+                    const newIcon = this.state.useEmoji ? renderEmoji(transformed) : renderIcon(transformed);
+                    newIcon.style.width = this.state.size;
+                    newIcon.style.height = this.state.size;
+                    if (this.state.color) newIcon.style.color = this.state.color;
+                    wrapper.appendChild(newIcon);
+
+                    requestAnimationFrame(() => {
+                        if ((window as any).lucide) {
+                            (window as any).lucide.createIcons();
+                        }
+                    });
+                });
+            }
+            else if (property === 'size') {
+                const transformToComponent = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    const icon = wrapper.querySelector('img, svg, span');
+                    if (icon instanceof HTMLElement) {
+                        icon.style.width = transformed;
+                        icon.style.height = transformed;
+                    }
+                    this.state.size = transformed;
+                });
+            }
+            else if (property === 'color') {
+                const transformToComponent = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    const icon = wrapper.querySelector('img, svg, span');
+                    if (icon instanceof HTMLElement) {
+                        icon.style.color = transformed;
+                    }
+                    this.state.color = transformed;
+                });
+            }
+        });
+
+        // === 5. RENDER: Append to DOM and finalize ===
+        container.appendChild(wrapper);
+
+        requestAnimationFrame(() => {
+            if ((window as any).lucide) {
+                (window as any).lucide.createIcons();
+            }
+        });
+
+        return this;
+    }
+
+    /**
+     * Render to another Jux component's container
+     */
+    renderTo(juxComponent: any): this {
+        if (!juxComponent || typeof juxComponent !== 'object') {
+            throw new Error('Icon.renderTo: Invalid component - not an object');
+        }
+
+        if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+            throw new Error('Icon.renderTo: Invalid component - missing _id (not a Jux component)');
+        }
+
+        return this.render(`#${juxComponent._id}`);
+    }
+}
+
+/**
+ * Factory helper
+ */
+export function icon(id: string, options: IconOptions): Icon {
+    return new Icon(id, options);
+}