juxscript 1.1.15 → 1.1.17

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
      */
@@ -161,7 +145,11 @@ export declare abstract class BaseComponent<TState extends BaseState = BaseState
     protected _wireAllSyncs(): void;
     renderTo(juxComponent: any): this;
     /**
-     * ✅ Read-only accessor for component state
+     * ✅ Read-only accessor for component state (getter, not a method)
+     *
+     * Usage:
+     *   const myState = component.props;  // ✅ Correct
+     *   const myState = component.props(); // ❌ Error: props is not a function
      */
     get props(): Readonly<TState>;
 }

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)
      * ═════════════════════════════════════════════════════════════════ */
@@ -336,7 +374,11 @@ export class BaseComponent {
      * PROPS ACCESSOR - Read-only access to component state
      * ═════════════════════════════════════════════════════════════════ */
     /**
-     * ✅ Read-only accessor for component state
+     * ✅ Read-only accessor for component state (getter, not a method)
+     *
+     * Usage:
+     *   const myState = component.props;  // ✅ Correct
+     *   const myState = component.props(); // ❌ Error: props is not a function
      */
     get props() {
         return this.state;

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)
@@ -436,7 +455,11 @@ export abstract class BaseComponent<TState extends BaseState = BaseState> {
      * ═════════════════════════════════════════════════════════════════ */
 
     /**
-     * ✅ Read-only accessor for component state
+     * ✅ Read-only accessor for component state (getter, not a method)
+     * 
+     * Usage:
+     *   const myState = component.props;  // ✅ Correct
+     *   const myState = component.props(); // ❌ Error: props is not a function
      */
     get props(): Readonly<TState> {
         return this.state as Readonly<TState>;

package/lib/components/hero.d.ts

@@ -36,8 +36,8 @@ export declare class Hero extends BaseComponent<HeroState> {
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
     /**
-     * Called automatically by BaseComponent when state changes.
-     * Centralizes DOM manipulation so setters don't have to drill/repeat logic.
+     * Called automatically when state changes.
+     * Extends BaseComponent's update() to handle Hero-specific properties.
      */
     update(prop: string, value: any): void;
     title(value: string): this;

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;IA+CtC,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;CAuEhC;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;IAIhD;;;OAGG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAkDtC,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

@@ -27,14 +27,14 @@ export class Hero extends BaseComponent {
     getCallbackEvents() {
         return CALLBACK_EVENTS;
     }
-    /* ═════════════════════════════════════════════════════════════════
-     * REACTIVE DOM UPDATES
-     * ═════════════════════════════════════════════════════════════════ */
     /**
-     * Called automatically by BaseComponent when state changes.
-     * Centralizes DOM manipulation so setters don't have to drill/repeat logic.
+     * Called automatically when state changes.
+     * Extends BaseComponent's update() to handle Hero-specific properties.
      */
     update(prop, value) {
+        // First, call parent to handle base properties (visible, class, style, etc.)
+        super.update(prop, value);
+        // Then handle Hero-specific properties
         const hero = document.getElementById(this._id);
         if (!hero)
             return;
@@ -70,10 +70,7 @@ export class Hero extends BaseComponent {
                 hero.style.backgroundRepeat = value.repeat;
                 break;
             case 'centered':
-                if (value)
-                    hero.classList.add('jux-hero-centered');
-                else
-                    hero.classList.remove('jux-hero-centered');
+                hero.classList.toggle('jux-hero-centered', value);
                 break;
         }
     }
@@ -177,7 +174,6 @@ export class Hero extends BaseComponent {
             ctaButton.className = 'jux-hero-cta';
             ctaButton.href = this.state.ctaLink;
             ctaButton.textContent = this.state.cta;
-            // ✅ Fire callback when CTA is clicked
             ctaButton.addEventListener('click', (e) => {
                 this._triggerCallback('ctaClick', e);
             });
@@ -185,7 +181,7 @@ export class Hero extends BaseComponent {
         }
         hero.appendChild(contentContainer);
         this._wireStandardEvents(hero);
-        this._wireAllSyncs(); // Use base method
+        this._wireAllSyncs();
         container.appendChild(hero);
         return this;
     }

package/lib/components/hero.ts

@@ -59,15 +59,15 @@ export class Hero extends BaseComponent<HeroState> {
     return CALLBACK_EVENTS;
   }
 
-  /* ═════════════════════════════════════════════════════════════════
-   * REACTIVE DOM UPDATES
-   * ═════════════════════════════════════════════════════════════════ */
-
   /**
-   * Called automatically by BaseComponent when state changes.
-   * Centralizes DOM manipulation so setters don't have to drill/repeat logic.
+   * Called automatically when state changes.
+   * Extends BaseComponent's update() to handle Hero-specific properties.
    */
   update(prop: string, value: any): void {
+    // First, call parent to handle base properties (visible, class, style, etc.)
+    super.update(prop, value);
+
+    // Then handle Hero-specific properties
     const hero = document.getElementById(this._id);
     if (!hero) return;
 
@@ -104,8 +104,7 @@ export class Hero extends BaseComponent<HeroState> {
         break;
 
       case 'centered':
-        if (value) hero.classList.add('jux-hero-centered');
-        else hero.classList.remove('jux-hero-centered');
+        hero.classList.toggle('jux-hero-centered', value);
         break;
     }
   }
@@ -226,7 +225,6 @@ export class Hero extends BaseComponent<HeroState> {
       ctaButton.href = this.state.ctaLink;
       ctaButton.textContent = this.state.cta;
 
-      // ✅ Fire callback when CTA is clicked
       ctaButton.addEventListener('click', (e) => {
         this._triggerCallback('ctaClick', e);
       });
@@ -237,7 +235,7 @@ export class Hero extends BaseComponent<HeroState> {
     hero.appendChild(contentContainer);
 
     this._wireStandardEvents(hero);
-    this._wireAllSyncs(); // Use base method
+    this._wireAllSyncs();
 
     container.appendChild(hero);
     return this;

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["sidebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAQnE,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,YAAY,GAAG,SAAS,GAAG;IAC9B,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBAAa,OAAQ,SAAQ,aAAa,CAAC,YAAY,CAAC;IACtD,OAAO,CAAC,QAAQ,CAA4B;gBAEhC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB;IA4BpD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,WAAW;IAiGnB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAsCtC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQ1B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAKvC,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKjC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKhC,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKnC,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK/B,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI;IAKjC,OAAO,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAKhC,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK3B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK3B,MAAM,IAAI,IAAI;IAKd,mBAAmB,IAAI,IAAI;IAU3B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAgGhC;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB,GAAG,OAAO,CAEzE"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["sidebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAQnE,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,YAAY,GAAG,SAAS,GAAG;IAC9B,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBAAa,OAAQ,SAAQ,aAAa,CAAC,YAAY,CAAC;IACtD,OAAO,CAAC,QAAQ,CAA4B;gBAEhC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB;IA4BpD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,WAAW;IA+FnB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAsCtC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQ1B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAKvC,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKjC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKhC,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKnC,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK/B,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI;IAKjC,OAAO,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAKhC,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK3B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK3B,MAAM,IAAI,IAAI;IAKd,mBAAmB,IAAI,IAAI;IAU3B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CA2FhC;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB,GAAG,OAAO,CAEzE"}

package/lib/components/sidebar.js

@@ -102,7 +102,6 @@ export class Sidebar extends BaseComponent {
             });
             itemEl.appendChild(button);
         }
-        // Handle sub-items
         if (item.items && item.items.length > 0) {
             itemEl.classList.add('jux-sidebar-item-has-submenu');
             const submenu = document.createElement('div');
@@ -111,7 +110,6 @@ export class Sidebar extends BaseComponent {
                 submenu.appendChild(this._renderItem(subItem));
             });
             itemEl.appendChild(submenu);
-            // Toggle submenu expansion
             const clickTarget = itemEl.querySelector('a, button');
             if (clickTarget) {
                 clickTarget.addEventListener('click', (e) => {
@@ -235,28 +233,24 @@ export class Sidebar extends BaseComponent {
             sidebar.setAttribute('style', style);
         if (width)
             sidebar.style.width = width;
-        // Header
         if (header) {
             const headerEl = document.createElement('div');
             headerEl.className = 'jux-sidebar-header';
             headerEl.textContent = header;
             sidebar.appendChild(headerEl);
         }
-        // Navigation
         const nav = document.createElement('nav');
         nav.className = 'jux-sidebar-nav';
         items.forEach(item => {
             nav.appendChild(this._renderItem(item));
         });
         sidebar.appendChild(nav);
-        // Footer
         if (footer) {
             const footerEl = document.createElement('div');
             footerEl.className = 'jux-sidebar-footer';
             footerEl.textContent = footer;
             sidebar.appendChild(footerEl);
         }
-        // Toggle button
         if (this.state.collapsible || this.state.showToggle) {
             const toggleBtn = document.createElement('button');
             toggleBtn.className = 'jux-sidebar-toggle';
@@ -275,7 +269,6 @@ export class Sidebar extends BaseComponent {
             });
             sidebar.appendChild(toggleBtn);
         }
-        // Expand on hover
         if (expandOnHover) {
             sidebar.addEventListener('mouseenter', () => {
                 if (this.state.collapsed) {

package/lib/components/sidebar.ts

@@ -161,7 +161,6 @@ export class Sidebar extends BaseComponent<SidebarState> {
       itemEl.appendChild(button);
     }
 
-    // Handle sub-items
     if (item.items && item.items.length > 0) {
       itemEl.classList.add('jux-sidebar-item-has-submenu');
 
@@ -174,7 +173,6 @@ export class Sidebar extends BaseComponent<SidebarState> {
 
       itemEl.appendChild(submenu);
 
-      // Toggle submenu expansion
       const clickTarget = itemEl.querySelector('a, button');
       if (clickTarget) {
         clickTarget.addEventListener('click', (e) => {
@@ -316,7 +314,6 @@ export class Sidebar extends BaseComponent<SidebarState> {
     if (style) sidebar.setAttribute('style', style);
     if (width) sidebar.style.width = width;
 
-    // Header
     if (header) {
       const headerEl = document.createElement('div');
       headerEl.className = 'jux-sidebar-header';
@@ -324,7 +321,6 @@ export class Sidebar extends BaseComponent<SidebarState> {
       sidebar.appendChild(headerEl);
     }
 
-    // Navigation
     const nav = document.createElement('nav');
     nav.className = 'jux-sidebar-nav';
 
@@ -334,7 +330,6 @@ export class Sidebar extends BaseComponent<SidebarState> {
 
     sidebar.appendChild(nav);
 
-    // Footer
     if (footer) {
       const footerEl = document.createElement('div');
       footerEl.className = 'jux-sidebar-footer';
@@ -342,7 +337,6 @@ export class Sidebar extends BaseComponent<SidebarState> {
       sidebar.appendChild(footerEl);
     }
 
-    // Toggle button
     if (this.state.collapsible || this.state.showToggle) {
       const toggleBtn = document.createElement('button');
       toggleBtn.className = 'jux-sidebar-toggle';
@@ -366,7 +360,6 @@ export class Sidebar extends BaseComponent<SidebarState> {
       sidebar.appendChild(toggleBtn);
     }
 
-    // Expand on hover
     if (expandOnHover) {
       sidebar.addEventListener('mouseenter', () => {
         if (this.state.collapsed) {

package/package.json

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