juxscript 1.1.18 → 1.1.19

package/lib/components/base/BaseComponent.d.ts

@@ -42,28 +42,12 @@ export declare abstract class BaseComponent<TState extends BaseState = BaseState
     protected abstract getCallbackEvents(): readonly string[];
     abstract render(targetId?: string): this;
     /**
-     * REACTIVE UPDATE HOOK (REQUIRED - PUBLIC)
-     * Called automatically when this.state[prop] changes via the Proxy.
-     * Every component MUST implement this to handle state changes.
-     *
-     * This is PUBLIC because:
-     * - Components may need to call it manually
-     * - Allows external updates without full re-render
-     * - Part of the component's public API
-     *
-     * @param prop - The state property that changed
-     * @param value - The new value
-     *
-     * @example
-     * update(prop: string, value: any): void {
-     *   const el = document.getElementById(this._id);
-     *   if (!el) return;
-     *
-     *   if (prop === 'label') el.textContent = value;
-     *   if (prop === 'visible') el.style.display = value ? '' : 'none';
-     * }
+     * REACTIVE UPDATE HOOK (PUBLIC, CONCRETE)
+     * Called automatically when this.state[prop] changes via Proxy.
+     * Default implementation handles base properties.
+     * Children can override to add component-specific logic.
      */
-    abstract update(prop: string, value: any): void;
+    update(prop: string, value: any): void;
     /**
      * Set component style
      */

package/lib/components/base/BaseComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseComponent.d.ts","sourceRoot":"","sources":["BaseComponent.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseComponent.d.ts","sourceRoot":"","sources":["BaseComponent.ts"],"names":[],"mappings":"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"}

package/lib/components/base/BaseComponent.js

@@ -40,6 +40,44 @@ export class BaseComponent {
             }
         });
     }
+    /**
+     * REACTIVE UPDATE HOOK (PUBLIC, CONCRETE)
+     * Called automatically when this.state[prop] changes via Proxy.
+     * Default implementation handles base properties.
+     * Children can override to add component-specific logic.
+     */
+    update(prop, value) {
+        if (!this.container)
+            return;
+        const el = this.container.querySelector(`#${this._id}`);
+        if (!el)
+            return;
+        // Handle base properties
+        switch (prop) {
+            case 'visible':
+                el.style.display = value ? '' : 'none';
+                break;
+            case 'class':
+                const baseClasses = el.className.split(' ').filter(c => c.startsWith('jux-'));
+                const userClasses = value.split(' ').filter((c) => c);
+                el.className = [...baseClasses, ...userClasses].join(' ');
+                break;
+            case 'style':
+                el.setAttribute('style', value);
+                break;
+            case 'disabled':
+                el.setAttribute('aria-disabled', String(value));
+                const inputs = el.querySelectorAll('input, button, select, textarea');
+                inputs.forEach(input => {
+                    input.disabled = value;
+                });
+                break;
+            case 'loading':
+                el.classList.toggle('jux-loading', value);
+                el.setAttribute('aria-busy', String(value));
+                break;
+        }
+    }
     /* ═════════════════════════════════════════════════════════════════
      * COMMON FLUENT API (Inherited by all components)
      * ═════════════════════════════════════════════════════════════════ */

package/lib/components/base/BaseComponent.ts

@@ -78,28 +78,47 @@ export abstract class BaseComponent<TState extends BaseState = BaseState> {
     abstract render(targetId?: string): this;
 
     /**
-     * REACTIVE UPDATE HOOK (REQUIRED - PUBLIC)
-     * Called automatically when this.state[prop] changes via the Proxy.
-     * Every component MUST implement this to handle state changes.
-     * 
-     * This is PUBLIC because:
-     * - Components may need to call it manually
-     * - Allows external updates without full re-render
-     * - Part of the component's public API
-     * 
-     * @param prop - The state property that changed
-     * @param value - The new value
-     * 
-     * @example
-     * update(prop: string, value: any): void {
-     *   const el = document.getElementById(this._id);
-     *   if (!el) return;
-     *   
-     *   if (prop === 'label') el.textContent = value;
-     *   if (prop === 'visible') el.style.display = value ? '' : 'none';
-     * }
+     * REACTIVE UPDATE HOOK (PUBLIC, CONCRETE)
+     * Called automatically when this.state[prop] changes via Proxy.
+     * Default implementation handles base properties.
+     * Children can override to add component-specific logic.
      */
-    abstract update(prop: string, value: any): void;
+    update(prop: string, value: any): void {
+        if (!this.container) return;
+
+        const el = this.container.querySelector(`#${this._id}`) as HTMLElement;
+        if (!el) return;
+
+        // Handle base properties
+        switch (prop) {
+            case 'visible':
+                el.style.display = value ? '' : 'none';
+                break;
+
+            case 'class':
+                const baseClasses = el.className.split(' ').filter(c => c.startsWith('jux-'));
+                const userClasses = value.split(' ').filter((c: string) => c);
+                el.className = [...baseClasses, ...userClasses].join(' ');
+                break;
+
+            case 'style':
+                el.setAttribute('style', value);
+                break;
+
+            case 'disabled':
+                el.setAttribute('aria-disabled', String(value));
+                const inputs = el.querySelectorAll('input, button, select, textarea');
+                inputs.forEach(input => {
+                    (input as HTMLInputElement).disabled = value;
+                });
+                break;
+
+            case 'loading':
+                el.classList.toggle('jux-loading', value);
+                el.setAttribute('aria-busy', String(value));
+                break;
+        }
+    }
 
     /* ═════════════════════════════════════════════════════════════════
      * COMMON FLUENT API (Inherited by all components)

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

@@ -1 +1 @@
-{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAMnE,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3E,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG,SAAS,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,iBAAiB,EAAE,OAAO,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAoBjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD;;;OAGG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IA8CtC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKxB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAatF,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKvC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAS9B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAsEhC;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}
+{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAMnE,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3E,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG,SAAS,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,iBAAiB,EAAE,OAAO,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAoBjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD;;;OAGG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAoGtC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKxB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAatF,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKvC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAS9B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAsEhC;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}

package/lib/components/hero.js

@@ -35,32 +35,80 @@ export class Hero extends BaseComponent {
      * Centralizes DOM manipulation so setters don't have to drill/repeat logic.
      */
     update(prop, value) {
+        super.update(prop, value); // Handle base properties
         const hero = document.getElementById(this._id);
         if (!hero)
             return;
+        const contentContainer = hero.querySelector('.jux-hero-content');
+        if (!contentContainer)
+            return;
         switch (prop) {
             case 'title':
-                const titleEl = document.getElementById(`${this._id}-title`);
-                if (titleEl)
-                    titleEl.textContent = value;
+                let titleEl = document.getElementById(`${this._id}-title`);
+                if (!titleEl) {
+                    // ✅ Create title element if it doesn't exist
+                    titleEl = document.createElement('h1');
+                    titleEl.className = 'jux-hero-title';
+                    titleEl.id = `${this._id}-title`;
+                    contentContainer.insertBefore(titleEl, contentContainer.firstChild);
+                }
+                titleEl.textContent = value;
                 break;
             case 'subtitle':
-                const subtitleEl = document.getElementById(`${this._id}-subtitle`);
-                if (subtitleEl)
-                    subtitleEl.textContent = value;
+                let subtitleEl = document.getElementById(`${this._id}-subtitle`);
+                if (!subtitleEl) {
+                    // ✅ Create subtitle element if it doesn't exist
+                    subtitleEl = document.createElement('p');
+                    subtitleEl.className = 'jux-hero-subtitle';
+                    subtitleEl.id = `${this._id}-subtitle`;
+                    // Insert after title if exists, otherwise at start
+                    const titleEl = document.getElementById(`${this._id}-title`);
+                    if (titleEl) {
+                        titleEl.after(subtitleEl);
+                    }
+                    else {
+                        contentContainer.insertBefore(subtitleEl, contentContainer.firstChild);
+                    }
+                }
+                subtitleEl.textContent = value;
                 break;
             case 'content':
-                const contentEl = hero.querySelector('.jux-hero-body'); // ✅ BEM naming
-                if (contentEl)
-                    contentEl.innerHTML = value;
+                let contentEl = hero.querySelector('.jux-hero-body');
+                if (!contentEl) {
+                    // ✅ Create content element if it doesn't exist
+                    contentEl = document.createElement('div');
+                    contentEl.className = 'jux-hero-body';
+                    // Insert after subtitle if exists, otherwise after title, otherwise at start
+                    const subtitleEl = document.getElementById(`${this._id}-subtitle`);
+                    const titleEl = document.getElementById(`${this._id}-title`);
+                    if (subtitleEl) {
+                        subtitleEl.after(contentEl);
+                    }
+                    else if (titleEl) {
+                        titleEl.after(contentEl);
+                    }
+                    else {
+                        contentContainer.insertBefore(contentEl, contentContainer.firstChild);
+                    }
+                }
+                contentEl.innerHTML = value;
                 break;
             case 'cta':
-                const ctaEl = hero.querySelector('.jux-hero-cta'); // ✅ BEM naming
-                if (ctaEl)
-                    ctaEl.textContent = value;
+                let ctaEl = hero.querySelector('.jux-hero-cta');
+                if (!ctaEl) {
+                    // ✅ Create CTA element if it doesn't exist
+                    ctaEl = document.createElement('a');
+                    ctaEl.className = 'jux-hero-cta';
+                    ctaEl.href = this.state.ctaLink;
+                    ctaEl.addEventListener('click', (e) => {
+                        this._triggerCallback('ctaClick', e);
+                    });
+                    contentContainer.appendChild(ctaEl);
+                }
+                ctaEl.textContent = value;
                 break;
             case 'ctaLink':
-                const ctaLinkEl = hero.querySelector('.jux-hero-cta'); // ✅ BEM naming
+                const ctaLinkEl = hero.querySelector('.jux-hero-cta');
                 if (ctaLinkEl)
                     ctaLinkEl.href = value;
                 break;
@@ -70,7 +118,7 @@ export class Hero extends BaseComponent {
                 hero.style.backgroundRepeat = value.repeat;
                 break;
             case 'centered':
-                hero.classList.toggle('jux-hero-centered', value); // ✅ BEM modifier
+                hero.classList.toggle('jux-hero-centered', value);
                 break;
         }
     }

package/lib/components/hero.ts

@@ -68,32 +68,86 @@ export class Hero extends BaseComponent<HeroState> {
    * Centralizes DOM manipulation so setters don't have to drill/repeat logic.
    */
   update(prop: string, value: any): void {
+    super.update(prop, value); // Handle base properties
+
     const hero = document.getElementById(this._id);
     if (!hero) return;
 
+    const contentContainer = hero.querySelector('.jux-hero-content');
+    if (!contentContainer) return;
+
     switch (prop) {
       case 'title':
-        const titleEl = document.getElementById(`${this._id}-title`);
-        if (titleEl) titleEl.textContent = value;
+        let titleEl = document.getElementById(`${this._id}-title`);
+        if (!titleEl) {
+          // ✅ Create title element if it doesn't exist
+          titleEl = document.createElement('h1');
+          titleEl.className = 'jux-hero-title';
+          titleEl.id = `${this._id}-title`;
+          contentContainer.insertBefore(titleEl, contentContainer.firstChild);
+        }
+        titleEl.textContent = value;
         break;
 
       case 'subtitle':
-        const subtitleEl = document.getElementById(`${this._id}-subtitle`);
-        if (subtitleEl) subtitleEl.textContent = value;
+        let subtitleEl = document.getElementById(`${this._id}-subtitle`);
+        if (!subtitleEl) {
+          // ✅ Create subtitle element if it doesn't exist
+          subtitleEl = document.createElement('p');
+          subtitleEl.className = 'jux-hero-subtitle';
+          subtitleEl.id = `${this._id}-subtitle`;
+
+          // Insert after title if exists, otherwise at start
+          const titleEl = document.getElementById(`${this._id}-title`);
+          if (titleEl) {
+            titleEl.after(subtitleEl);
+          } else {
+            contentContainer.insertBefore(subtitleEl, contentContainer.firstChild);
+          }
+        }
+        subtitleEl.textContent = value;
         break;
 
       case 'content':
-        const contentEl = hero.querySelector('.jux-hero-body'); // ✅ BEM naming
-        if (contentEl) contentEl.innerHTML = value;
+        let contentEl = hero.querySelector('.jux-hero-body');
+        if (!contentEl) {
+          // ✅ Create content element if it doesn't exist
+          contentEl = document.createElement('div');
+          contentEl.className = 'jux-hero-body';
+
+          // Insert after subtitle if exists, otherwise after title, otherwise at start
+          const subtitleEl = document.getElementById(`${this._id}-subtitle`);
+          const titleEl = document.getElementById(`${this._id}-title`);
+          if (subtitleEl) {
+            subtitleEl.after(contentEl);
+          } else if (titleEl) {
+            titleEl.after(contentEl);
+          } else {
+            contentContainer.insertBefore(contentEl, contentContainer.firstChild);
+          }
+        }
+        contentEl.innerHTML = value;
         break;
 
       case 'cta':
-        const ctaEl = hero.querySelector('.jux-hero-cta') as HTMLElement; // ✅ BEM naming
-        if (ctaEl) ctaEl.textContent = value;
+        let ctaEl = hero.querySelector('.jux-hero-cta') as HTMLAnchorElement;
+        if (!ctaEl) {
+          // ✅ Create CTA element if it doesn't exist
+          ctaEl = document.createElement('a');
+          ctaEl.className = 'jux-hero-cta';
+          ctaEl.href = this.state.ctaLink;
+
+          ctaEl.addEventListener('click', (e) => {
+            this._triggerCallback('ctaClick', e);
+          });
+
+          contentContainer.appendChild(ctaEl);
+        }
+        ctaEl.textContent = value;
         break;
 
       case 'ctaLink':
-        const ctaLinkEl = hero.querySelector('.jux-hero-cta') as HTMLAnchorElement; // ✅ BEM naming
+        const ctaLinkEl = hero.querySelector('.jux-hero-cta') as HTMLAnchorElement;
         if (ctaLinkEl) ctaLinkEl.href = value;
         break;
 
@@ -104,7 +158,7 @@ export class Hero extends BaseComponent<HeroState> {
         break;
 
       case 'centered':
-        hero.classList.toggle('jux-hero-centered', value); // ✅ BEM modifier
+        hero.classList.toggle('jux-hero-centered', value);
         break;
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.18",
+  "version": "1.1.19",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",