juxscript 1.1.10 → 1.1.13

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

@@ -29,6 +29,12 @@ export declare abstract class BaseComponent<TState extends Record<string, any>>
     protected abstract getTriggerEvents(): readonly string[];
     protected abstract getCallbackEvents(): readonly string[];
     abstract render(targetId?: string): this;
+    /**
+     * REACTIVE UPDATE HOOK
+     * Called automatically when this.state[prop] changes.
+     * Override this in components to update the DOM without full re-render.
+     */
+    protected update(prop: string, value: any): void;
     /**
      * Set component style
      */
@@ -127,15 +133,6 @@ export declare abstract class BaseComponent<TState extends Record<string, any>>
     renderTo(juxComponent: any): this;
     /**
      * ✅ Read-only accessor for component state
-     * Provides clear separation between setters (fluent methods) and getters
-     *
-     * @example
-     * const myCard = card('example')
-     *   .title('Hello')      // ✅ SETTER (fluent)
-     *   .content('World');   // ✅ SETTER (fluent)
-     *
-     * console.log(myCard.props.title);    // ✅ GETTER: 'Hello'
-     * console.log(myCard.props.content);  // ✅ GETTER: 'World'
      */
     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":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAGlD;;;;;;;;GAQG;AACH,8BAAsB,aAAa,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAElE,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,WAAW,GAAG,IAAI,CAAQ;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,EAAE,MAAM,CAAC;IAGX,SAAS,CAAC,SAAS,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,QAAQ,CAAA;KAAE,CAAC,CAAM;IACtE,SAAS,CAAC,aAAa,EAAE,KAAK,CAAC;QAC3B,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;QACrB,OAAO,CAAC,EAAE,QAAQ,CAAC;QACnB,WAAW,CAAC,EAAE,QAAQ,CAAA;KACzB,CAAC,CAAM;IACR,SAAS,CAAC,gBAAgB,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAa;IAC9D,SAAS,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAa;gBAEnD,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM;IAU5C,SAAS,CAAC,QAAQ,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IACxD,SAAS,CAAC,QAAQ,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IACzD,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;IAMxC;;OAEG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B;;OAEG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAS1B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAW7B;;OAEG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQhC;;OAEG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAUhC;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAY7B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,gBAAgB,IAAI,IAAI;IASxB;;OAEG;IACH,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAOvC;;OAEG;IACH,KAAK,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI;IAO/C;;OAEG;IACH,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAW9B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAY9B;;OAEG;IACH,MAAM,IAAI,IAAI;IAId;;OAEG;IACH,OAAO,IAAI,IAAI;IAQf;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAkB7B;;OAEG;IACH,KAAK,IAAI,IAAI;IAQb;;OAEG;IACH,IAAI,IAAI,IAAI;IAYZ;;OAEG;IACH,MAAM,IAAI,IAAI;IAYd,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,GAAG,IAAI;IAW5C;;;;;;OAMG;IACH,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,kBAAkB,CAAC,EAAE,QAAQ,EAAE,WAAW,CAAC,EAAE,QAAQ,GAAG,IAAI;IAkBzG,SAAS,CAAC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAIjD,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAIlD,SAAS,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI;IAcnE,SAAS,CAAC,eAAe,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW;IAwBzD,SAAS,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAMzD;;;OAGG;IACH,SAAS,CAAC,aAAa,IAAI,IAAI;IA0B/B,QAAQ,CAAC,YAAY,EAAE,GAAG,GAAG,IAAI;IAWjC;;;;;;;;;;;OAWG;IACH,IAAI,KAAK,IAAI,QAAQ,CAAC,MAAM,CAAC,CAE5B;CACJ"}
+{"version":3,"file":"BaseComponent.d.ts","sourceRoot":"","sources":["BaseComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAGlD;;;;;;;;GAQG;AACH,8BAAsB,aAAa,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAElE,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,WAAW,GAAG,IAAI,CAAQ;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,EAAE,MAAM,CAAC;IAGX,SAAS,CAAC,SAAS,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,QAAQ,CAAA;KAAE,CAAC,CAAM;IACtE,SAAS,CAAC,aAAa,EAAE,KAAK,CAAC;QAC3B,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;QACrB,OAAO,CAAC,EAAE,QAAQ,CAAC;QACnB,WAAW,CAAC,EAAE,QAAQ,CAAA;KACzB,CAAC,CAAM;IACR,SAAS,CAAC,gBAAgB,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAa;IAC9D,SAAS,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAa;gBAEnD,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM;IAqB5C,SAAS,CAAC,QAAQ,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IACxD,SAAS,CAAC,QAAQ,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IACzD,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;IAExC;;;;OAIG;IACH,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAShD;;OAEG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B;;OAEG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAS1B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAW7B;;OAEG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQhC;;OAEG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAUhC;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAY7B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,gBAAgB,IAAI,IAAI;IASxB;;OAEG;IACH,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAOvC;;OAEG;IACH,KAAK,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI;IAO/C;;OAEG;IACH,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAW9B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAY9B;;OAEG;IACH,MAAM,IAAI,IAAI;IAId;;OAEG;IACH,OAAO,IAAI,IAAI;IAQf;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAkB7B;;OAEG;IACH,KAAK,IAAI,IAAI;IAQb;;OAEG;IACH,IAAI,IAAI,IAAI;IAYZ;;OAEG;IACH,MAAM,IAAI,IAAI;IAYd,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,GAAG,IAAI;IAW5C;;;;;;OAMG;IACH,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,kBAAkB,CAAC,EAAE,QAAQ,EAAE,WAAW,CAAC,EAAE,QAAQ,GAAG,IAAI;IAkBzG,SAAS,CAAC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAIjD,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAIlD,SAAS,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI;IAcnE,SAAS,CAAC,eAAe,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW;IAwBzD,SAAS,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAMzD;;;OAGG;IACH,SAAS,CAAC,aAAa,IAAI,IAAI;IA0B/B,QAAQ,CAAC,YAAY,EAAE,GAAG,GAAG,IAAI;IAWjC;;OAEG;IACH,IAAI,KAAK,IAAI,QAAQ,CAAC,MAAM,CAAC,CAE5B;CACJ"}

package/lib/components/base/BaseComponent.js

@@ -18,7 +18,26 @@ export class BaseComponent {
         this._callbackHandlers = new Map();
         this._id = id;
         this.id = id;
-        this.state = initialState;
+        // ✨ REACTIVE PROXY: Intercept state changes to trigger view updates automatically
+        this.state = new Proxy(initialState, {
+            set: (target, prop, value) => {
+                const key = prop;
+                if (target[key] !== value) {
+                    target[key] = value;
+                    this.update(prop, value);
+                }
+                return true;
+            }
+        });
+    }
+    /**
+     * REACTIVE UPDATE HOOK
+     * Called automatically when this.state[prop] changes.
+     * Override this in components to update the DOM without full re-render.
+     */
+    update(prop, value) {
+        // Default no-op. Children implement granular DOM updates here.
+        // Example: if (prop === 'title') document.getElementById(...).textContent = value;
     }
     /* ═════════════════════════════════════════════════════════════════
      * COMMON FLUENT API (Inherited by all components)
@@ -277,7 +296,7 @@ export class BaseComponent {
             handler(...args);
         }
         else {
-            console.warn(`🔍 No handler found for "${eventName}"`);
+            // console.warn(`🔍 No handler found for "${eventName}"`);
         }
     }
     /* ═════════════════════════════════════════════════════════════════
@@ -347,15 +366,6 @@ export class BaseComponent {
      * ═════════════════════════════════════════════════════════════════ */
     /**
      * ✅ Read-only accessor for component state
-     * Provides clear separation between setters (fluent methods) and getters
-     *
-     * @example
-     * const myCard = card('example')
-     *   .title('Hello')      // ✅ SETTER (fluent)
-     *   .content('World');   // ✅ SETTER (fluent)
-     *
-     * console.log(myCard.props.title);    // ✅ GETTER: 'Hello'
-     * console.log(myCard.props.content);  // ✅ GETTER: 'World'
      */
     get props() {
         return this.state;

package/lib/components/base/BaseComponent.ts

@@ -31,7 +31,18 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
     constructor(id: string, initialState: TState) {
         this._id = id;
         this.id = id;
-        this.state = initialState;
+
+        // ✨ REACTIVE PROXY: Intercept state changes to trigger view updates automatically
+        this.state = new Proxy(initialState, {
+            set: (target, prop, value) => {
+                const key = prop as keyof TState;
+                if (target[key] !== value) {
+                    target[key] = value;
+                    this.update(prop as string, value);
+                }
+                return true;
+            }
+        });
     }
 
     /* ═════════════════════════════════════════════════════════════════
@@ -42,6 +53,16 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
     protected abstract getCallbackEvents(): readonly string[];
     abstract render(targetId?: string): this;
 
+    /**
+     * REACTIVE UPDATE HOOK
+     * Called automatically when this.state[prop] changes.
+     * Override this in components to update the DOM without full re-render.
+     */
+    protected update(prop: string, value: any): void {
+        // Default no-op. Children implement granular DOM updates here.
+        // Example: if (prop === 'title') document.getElementById(...).textContent = value;
+    }
+
     /* ═════════════════════════════════════════════════════════════════
      * COMMON FLUENT API (Inherited by all components)
      * ═════════════════════════════════════════════════════════════════ */
@@ -324,7 +345,7 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
             const handler = this._callbackHandlers.get(eventName)!;
             handler(...args);
         } else {
-            console.warn(`🔍 No handler found for "${eventName}"`);
+            // console.warn(`🔍 No handler found for "${eventName}"`);
         }
     }
 
@@ -405,15 +426,6 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
 
     /**
      * ✅ Read-only accessor for component state
-     * Provides clear separation between setters (fluent methods) and getters
-     * 
-     * @example
-     * const myCard = card('example')
-     *   .title('Hello')      // ✅ SETTER (fluent)
-     *   .content('World');   // ✅ SETTER (fluent)
-     * 
-     * console.log(myCard.props.title);    // ✅ GETTER: 'Hello'
-     * console.log(myCard.props.content);  // ✅ GETTER: 'World'
      */
     get props(): Readonly<TState> {
         return this.state as Readonly<TState>;

package/lib/components/chart.d.ts

@@ -32,7 +32,10 @@ export declare class ChartComponent extends BaseComponent<ChartState> {
     title(text: string, display?: boolean): this;
     legend(display?: boolean, position?: 'top' | 'bottom' | 'left' | 'right'): this;
     tooltip(enabled?: boolean): this;
-    update(mode?: 'resize' | 'reset' | 'none' | 'hide' | 'show' | 'default'): this;
+    /**
+     * Update chart with new data or configuration
+     */
+    updateChart(mode?: 'resize' | 'reset' | 'none' | 'hide' | 'show' | 'default'): this;
     reset(): this;
     destroy(): this;
     getChart(): Chart | null;

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

@@ -1 +1 @@
-{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAsB,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAI9F,MAAM,WAAW,UAAU;IACvB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;GAGG;AACH,qBAAa,cAAe,SAAQ,aAAa,CAAC,UAAU,CAAC;IACzD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAyB;IAC/D,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAsD;IAC7F,OAAO,CAAC,aAAa,CAAsB;gBAE/B,EAAE,EAAE,MAAM,EAAE,IAAI,GAAE,SAAiB,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC;IAS9E,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAoB5B,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAS5B,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI;IAS7B,QAAQ,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI;IAS5B,UAAU,CAAC,OAAO,EAAE,GAAG,GAAG,IAAI;IAa9B,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI;IASlC,UAAU,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IAIvC,mBAAmB,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IAIhD,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,OAAc,GAAG,IAAI;IASlD,MAAM,CAAC,OAAO,GAAE,OAAc,EAAE,QAAQ,GAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAe,GAAG,IAAI;IAS5F,OAAO,CAAC,OAAO,GAAE,OAAc,GAAG,IAAI;IAatC,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI;IAQ9E,KAAK,IAAI,IAAI;IAOb,OAAO,IAAI,IAAI;IASf,QAAQ,IAAI,KAAK,GAAG,IAAI;IAQxB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAqClC;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,GAAE,SAAiB,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,cAAc,CAExG"}
+{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAsB,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAI9F,MAAM,WAAW,UAAU;IACvB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;GAGG;AACH,qBAAa,cAAe,SAAQ,aAAa,CAAC,UAAU,CAAC;IACzD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAyB;IAC/D,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAsD;IAC7F,OAAO,CAAC,aAAa,CAAsB;gBAE/B,EAAE,EAAE,MAAM,EAAE,IAAI,GAAE,SAAiB,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC;IAS9E,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAoB5B,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAS5B,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI;IAS7B,QAAQ,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI;IAS5B,UAAU,CAAC,OAAO,EAAE,GAAG,GAAG,IAAI;IAa9B,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI;IASlC,UAAU,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IAIvC,mBAAmB,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IAIhD,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,OAAc,GAAG,IAAI;IASlD,MAAM,CAAC,OAAO,GAAE,OAAc,EAAE,QAAQ,GAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAe,GAAG,IAAI;IAS5F,OAAO,CAAC,OAAO,GAAE,OAAc,GAAG,IAAI;IAatC;;OAEG;IACH,WAAW,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI;IAOnF,KAAK,IAAI,IAAI;IAOb,OAAO,IAAI,IAAI;IASf,QAAQ,IAAI,KAAK,GAAG,IAAI;IAQxB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAsDlC;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,GAAE,SAAiB,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,cAAc,CAExG"}

package/lib/components/chart.js

@@ -117,10 +117,12 @@ export class ChartComponent extends BaseComponent {
     /* ═════════════════════════════════════════════════════════════════
      * CHART OPERATIONS
      * ═════════════════════════════════════════════════════════════════ */
-    update(mode) {
+    /**
+     * Update chart with new data or configuration
+     */
+    updateChart(mode) {
         if (this.chartInstance) {
             this.chartInstance.update(mode);
-            this._triggerCallback('update', this.chartInstance);
         }
         return this;
     }
@@ -169,6 +171,20 @@ export class ChartComponent extends BaseComponent {
             options: this.state.options
         };
         this.chartInstance = new Chart(canvas, config);
+        // Wire sync for data
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'data') {
+                const transform = toComponent || ((v) => v);
+                stateObj.subscribe((val) => {
+                    const transformed = transform(val);
+                    this.state.data = transformed;
+                    if (this.chartInstance) {
+                        this.chartInstance.data = transformed;
+                        this.chartInstance.update();
+                    }
+                });
+            }
+        });
         // Wire events and syncs
         this._wireStandardEvents(container);
         this._wireAllSyncs();

package/lib/components/chart.ts

@@ -152,10 +152,12 @@ export class ChartComponent extends BaseComponent<ChartState> {
      * CHART OPERATIONS
      * ═════════════════════════════════════════════════════════════════ */
 
-    update(mode?: 'resize' | 'reset' | 'none' | 'hide' | 'show' | 'default'): this {
+    /**
+     * Update chart with new data or configuration
+     */
+    updateChart(mode?: 'resize' | 'reset' | 'none' | 'hide' | 'show' | 'default'): this {
         if (this.chartInstance) {
             this.chartInstance.update(mode);
-            this._triggerCallback('update', this.chartInstance);
         }
         return this;
     }
@@ -213,6 +215,23 @@ export class ChartComponent extends BaseComponent<ChartState> {
 
         this.chartInstance = new Chart(canvas, config);
 
+        // Wire sync for data
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'data') {
+                const transform = toComponent || ((v: any) => v);
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform(val);
+                    this.state.data = transformed;
+
+                    if (this.chartInstance) {
+                        this.chartInstance.data = transformed;
+                        this.chartInstance.update();
+                    }
+                });
+            }
+        });
+
         // Wire events and syncs
         this._wireStandardEvents(container);
         this._wireAllSyncs();

package/lib/components/hero.d.ts

@@ -5,7 +5,11 @@ export interface HeroOptions {
     content?: string;
     cta?: string;
     ctaLink?: string;
-    backgroundImage?: string;
+    backgroundImage?: string | {
+        url: string;
+        size?: string;
+        repeat?: string;
+    };
     backgroundOverlay?: boolean;
     variant?: 'default' | 'centered' | 'split';
     centered?: boolean;
@@ -18,7 +22,11 @@ type HeroState = {
     content: string;
     cta: string;
     ctaLink: string;
-    backgroundImage: string;
+    backgroundImage: {
+        url: string;
+        size: string;
+        repeat: string;
+    };
     backgroundOverlay: boolean;
     variant: string;
     centered: boolean;
@@ -29,12 +37,21 @@ export declare class Hero extends BaseComponent<HeroState> {
     constructor(id: string, options?: HeroOptions);
     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.
+     */
+    protected update(prop: string, value: any): void;
     title(value: string): this;
     subtitle(value: string): this;
     content(value: string): this;
     cta(value: string): this;
     ctaLink(value: string): this;
-    backgroundImage(value: string): this;
+    backgroundImage(value: string | {
+        url: string;
+        size?: string;
+        repeat?: string;
+    }): this;
     backgroundOverlay(value: boolean): this;
     variant(value: string): this;
     centered(value: boolean): 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,MAAM,yBAAyB,CAAC;AAMxD,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,CAAC;IACzB,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;IACf,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,MAAM,CAAC;IACxB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAgBjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,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,IAAI;IAKpC,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;CA2GhC;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,MAAM,yBAAyB,CAAC;AAMxD,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;IACf,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;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,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,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IA+ChD,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"}

package/lib/components/hero.js

@@ -1,19 +1,22 @@
 import { BaseComponent } from './base/BaseComponent.js';
 // Event definitions - Hero is display-only, but CTA button can trigger actions
 const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = ['ctaClick']; // ✅ When CTA button is clicked
+const CALLBACK_EVENTS = ['ctaClick'];
 export class Hero extends BaseComponent {
     constructor(id, options = {}) {
+        const bgImage = typeof options.backgroundImage === 'string'
+            ? { url: options.backgroundImage, size: 'cover', repeat: 'no-repeat' }
+            : options.backgroundImage || { url: '', size: 'cover', repeat: 'no-repeat' };
         super(id, {
             title: options.title ?? '',
             subtitle: options.subtitle ?? '',
-            content: options.content ?? '', // ✅ ADD
+            content: options.content ?? '',
             cta: options.cta ?? '',
             ctaLink: options.ctaLink ?? '#',
-            backgroundImage: options.backgroundImage ?? '',
-            backgroundOverlay: options.backgroundOverlay ?? false, // ✅ ADD
+            backgroundImage: { url: bgImage.url, size: bgImage.size || 'cover', repeat: bgImage.repeat || 'no-repeat' },
+            backgroundOverlay: options.backgroundOverlay ?? false,
             variant: options.variant ?? 'default',
-            centered: options.centered ?? false, // ✅ ADD
+            centered: options.centered ?? false,
             style: options.style ?? '',
             class: options.class ?? ''
         });
@@ -25,10 +28,60 @@ export class Hero extends BaseComponent {
         return CALLBACK_EVENTS;
     }
     /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
+     * REACTIVE DOM UPDATES
+     * ═════════════════════════════════════════════════════════════════ */
+    /**
+     * Called automatically by BaseComponent when state changes.
+     * Centralizes DOM manipulation so setters don't have to drill/repeat logic.
+     */
+    update(prop, value) {
+        const hero = document.getElementById(this._id);
+        if (!hero)
+            return; // Component not mounted/rendered yet
+        switch (prop) {
+            case 'title':
+                const titleEl = document.getElementById(`${this._id}-title`);
+                if (titleEl)
+                    titleEl.textContent = value;
+                break;
+            case 'subtitle':
+                const subtitleEl = document.getElementById(`${this._id}-subtitle`);
+                if (subtitleEl)
+                    subtitleEl.textContent = value;
+                break;
+            case 'content':
+                const contentEl = hero.querySelector('.jux-hero-body');
+                if (contentEl)
+                    contentEl.innerHTML = value;
+                break;
+            case 'cta':
+                const ctaEl = hero.querySelector('.jux-hero-cta');
+                if (ctaEl)
+                    ctaEl.textContent = value;
+                break;
+            case 'ctaLink':
+                const ctaLinkEl = hero.querySelector('.jux-hero-cta');
+                if (ctaLinkEl)
+                    ctaLinkEl.href = value;
+                break;
+            case 'backgroundImage':
+                hero.style.backgroundImage = `url(${value.url})`;
+                hero.style.backgroundSize = value.size;
+                hero.style.backgroundRepeat = value.repeat;
+                break;
+            case 'centered':
+                if (value)
+                    hero.classList.add('jux-hero-centered');
+                else
+                    hero.classList.remove('jux-hero-centered');
+                break;
+        }
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API (Simplified - just updates state)
      * ═════════════════════════════════════════════════════════════════ */
     title(value) {
-        this.state.title = value;
+        this.state.title = value; // Triggers update('title', value) via Proxy
         return this;
     }
     subtitle(value) {
@@ -48,7 +101,16 @@ export class Hero extends BaseComponent {
         return this;
     }
     backgroundImage(value) {
-        this.state.backgroundImage = value;
+        if (typeof value === 'string') {
+            this.state.backgroundImage = { url: value, size: 'cover', repeat: 'no-repeat' };
+        }
+        else {
+            this.state.backgroundImage = {
+                url: value.url,
+                size: value.size || 'cover',
+                repeat: value.repeat || 'no-repeat'
+            };
+        }
         return this;
     }
     backgroundOverlay(value) {
@@ -78,8 +140,10 @@ export class Hero extends BaseComponent {
             hero.className += ` ${className}`;
         if (style)
             hero.setAttribute('style', style);
-        if (backgroundImage) {
-            hero.style.backgroundImage = `url(${backgroundImage})`;
+        if (backgroundImage.url) {
+            hero.style.backgroundImage = `url(${backgroundImage.url})`;
+            hero.style.backgroundSize = backgroundImage.size;
+            hero.style.backgroundRepeat = backgroundImage.repeat;
             if (backgroundOverlay) {
                 const overlay = document.createElement('div');
                 overlay.className = 'jux-hero-overlay';
@@ -121,41 +185,7 @@ export class Hero extends BaseComponent {
         }
         hero.appendChild(contentContainer);
         this._wireStandardEvents(hero);
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'title') {
-                const transform = toComponent || ((v) => String(v));
-                stateObj.subscribe((val) => {
-                    const transformed = transform(val);
-                    const titleEl = document.getElementById(`${this._id}-title`);
-                    if (titleEl) {
-                        titleEl.textContent = transformed;
-                    }
-                    this.state.title = transformed;
-                });
-            }
-            else if (property === 'subtitle') {
-                const transform = toComponent || ((v) => String(v));
-                stateObj.subscribe((val) => {
-                    const transformed = transform(val);
-                    const subtitleEl = document.getElementById(`${this._id}-subtitle`);
-                    if (subtitleEl) {
-                        subtitleEl.textContent = transformed;
-                    }
-                    this.state.subtitle = transformed;
-                });
-            }
-            else if (property === 'content') {
-                const transform = toComponent || ((v) => String(v));
-                stateObj.subscribe((val) => {
-                    const transformed = transform(val);
-                    const contentEl = hero.querySelector('.jux-hero-body');
-                    if (contentEl) {
-                        contentEl.innerHTML = transformed;
-                    }
-                    this.state.content = transformed;
-                });
-            }
-        });
+        this._wireAllSyncs(); // Use base method
         container.appendChild(hero);
         return this;
     }

package/lib/components/hero.ts

@@ -2,18 +2,18 @@ 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
+const CALLBACK_EVENTS = ['ctaClick'] as const;
 
 export interface HeroOptions {
   title?: string;
   subtitle?: string;
-  content?: string;          // ✅ ADD: Generates jux-hero-body div
-  cta?: string;              // ✅ KEEP: Generates jux-hero-cta anchor
+  content?: string;
+  cta?: string;
   ctaLink?: string;
-  backgroundImage?: string;
-  backgroundOverlay?: boolean; // ✅ ADD: Generates jux-hero-overlay div
+  backgroundImage?: string | { url: string; size?: string; repeat?: string };
+  backgroundOverlay?: boolean;
   variant?: 'default' | 'centered' | 'split';
-  centered?: boolean;        // ✅ ADD: Affects container class
+  centered?: boolean;
   style?: string;
   class?: string;
 }
@@ -21,29 +21,33 @@ export interface HeroOptions {
 type HeroState = {
   title: string;
   subtitle: string;
-  content: string;           // ✅ ADD: For jux-hero-body
+  content: string;
   cta: string;
   ctaLink: string;
-  backgroundImage: string;
-  backgroundOverlay: boolean; // ✅ ADD: For overlay div
+  backgroundImage: { url: string; size: string; repeat: string };
+  backgroundOverlay: boolean;
   variant: string;
-  centered: boolean;         // ✅ ADD: For layout variant
+  centered: boolean;
   style: string;
   class: string;
 };
 
 export class Hero extends BaseComponent<HeroState> {
   constructor(id: string, options: HeroOptions = {}) {
+    const bgImage = typeof options.backgroundImage === 'string'
+      ? { url: options.backgroundImage, size: 'cover', repeat: 'no-repeat' }
+      : options.backgroundImage || { url: '', size: 'cover', repeat: 'no-repeat' };
+
     super(id, {
       title: options.title ?? '',
       subtitle: options.subtitle ?? '',
-      content: options.content ?? '',           // ✅ ADD
+      content: options.content ?? '',
       cta: options.cta ?? '',
       ctaLink: options.ctaLink ?? '#',
-      backgroundImage: options.backgroundImage ?? '',
-      backgroundOverlay: options.backgroundOverlay ?? false, // ✅ ADD
+      backgroundImage: { url: bgImage.url, size: bgImage.size || 'cover', repeat: bgImage.repeat || 'no-repeat' },
+      backgroundOverlay: options.backgroundOverlay ?? false,
       variant: options.variant ?? 'default',
-      centered: options.centered ?? false,     // ✅ ADD
+      centered: options.centered ?? false,
       style: options.style ?? '',
       class: options.class ?? ''
     });
@@ -58,11 +62,62 @@ export class Hero extends BaseComponent<HeroState> {
   }
 
   /* ═════════════════════════════════════════════════════════════════
-   * FLUENT API
+   * REACTIVE DOM UPDATES
+   * ═════════════════════════════════════════════════════════════════ */
+
+  /**
+   * Called automatically by BaseComponent when state changes.
+   * Centralizes DOM manipulation so setters don't have to drill/repeat logic.
+   */
+  protected update(prop: string, value: any): void {
+    const hero = document.getElementById(this._id);
+    if (!hero) return; // Component not mounted/rendered yet
+
+    switch (prop) {
+      case 'title':
+        const titleEl = document.getElementById(`${this._id}-title`);
+        if (titleEl) titleEl.textContent = value;
+        break;
+
+      case 'subtitle':
+        const subtitleEl = document.getElementById(`${this._id}-subtitle`);
+        if (subtitleEl) subtitleEl.textContent = value;
+        break;
+
+      case 'content':
+        const contentEl = hero.querySelector('.jux-hero-body');
+        if (contentEl) contentEl.innerHTML = value;
+        break;
+
+      case 'cta':
+        const ctaEl = hero.querySelector('.jux-hero-cta') as HTMLElement;
+        if (ctaEl) ctaEl.textContent = value;
+        break;
+
+      case 'ctaLink':
+        const ctaLinkEl = hero.querySelector('.jux-hero-cta') as HTMLAnchorElement;
+        if (ctaLinkEl) ctaLinkEl.href = value;
+        break;
+
+      case 'backgroundImage':
+        hero.style.backgroundImage = `url(${value.url})`;
+        hero.style.backgroundSize = value.size;
+        hero.style.backgroundRepeat = value.repeat;
+        break;
+
+      case 'centered':
+        if (value) hero.classList.add('jux-hero-centered');
+        else hero.classList.remove('jux-hero-centered');
+        break;
+    }
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API (Simplified - just updates state)
    * ═════════════════════════════════════════════════════════════════ */
 
   title(value: string): this {
-    this.state.title = value;
+    this.state.title = value; // Triggers update('title', value) via Proxy
     return this;
   }
 
@@ -71,7 +126,7 @@ export class Hero extends BaseComponent<HeroState> {
     return this;
   }
 
-  content(value: string): this {     // ✅ ADD: Fluent method for content
+  content(value: string): this {
     this.state.content = value;
     return this;
   }
@@ -86,12 +141,20 @@ export class Hero extends BaseComponent<HeroState> {
     return this;
   }
 
-  backgroundImage(value: string): this {
-    this.state.backgroundImage = value;
+  backgroundImage(value: string | { url: string; size?: string; repeat?: string }): this {
+    if (typeof value === 'string') {
+      this.state.backgroundImage = { url: value, size: 'cover', repeat: 'no-repeat' };
+    } else {
+      this.state.backgroundImage = {
+        url: value.url,
+        size: value.size || 'cover',
+        repeat: value.repeat || 'no-repeat'
+      };
+    }
     return this;
   }
 
-  backgroundOverlay(value: boolean): this { // ✅ ADD: Fluent method for overlay
+  backgroundOverlay(value: boolean): this {
     this.state.backgroundOverlay = value;
     return this;
   }
@@ -101,7 +164,7 @@ export class Hero extends BaseComponent<HeroState> {
     return this;
   }
 
-  centered(value: boolean): this {   // ✅ ADD: Fluent method for centered
+  centered(value: boolean): this {
     this.state.centered = value;
     return this;
   }
@@ -122,8 +185,10 @@ export class Hero extends BaseComponent<HeroState> {
     if (className) hero.className += ` ${className}`;
     if (style) hero.setAttribute('style', style);
 
-    if (backgroundImage) {
-      hero.style.backgroundImage = `url(${backgroundImage})`;
+    if (backgroundImage.url) {
+      hero.style.backgroundImage = `url(${backgroundImage.url})`;
+      hero.style.backgroundSize = backgroundImage.size;
+      hero.style.backgroundRepeat = backgroundImage.repeat;
       if (backgroundOverlay) {
         const overlay = document.createElement('div');
         overlay.className = 'jux-hero-overlay';
@@ -174,45 +239,7 @@ export class Hero extends BaseComponent<HeroState> {
     hero.appendChild(contentContainer);
 
     this._wireStandardEvents(hero);
-
-    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-      if (property === 'title') {
-        const transform = toComponent || ((v: any) => String(v));
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transform(val);
-          const titleEl = document.getElementById(`${this._id}-title`);
-          if (titleEl) {
-            titleEl.textContent = transformed;
-          }
-          this.state.title = transformed;
-        });
-      }
-      else if (property === 'subtitle') {
-        const transform = toComponent || ((v: any) => String(v));
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transform(val);
-          const subtitleEl = document.getElementById(`${this._id}-subtitle`);
-          if (subtitleEl) {
-            subtitleEl.textContent = transformed;
-          }
-          this.state.subtitle = transformed;
-        });
-      }
-      else if (property === 'content') {
-        const transform = toComponent || ((v: any) => String(v));
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transform(val);
-          const contentEl = hero.querySelector('.jux-hero-body');
-          if (contentEl) {
-            contentEl.innerHTML = transformed;
-          }
-          this.state.content = transformed;
-        });
-      }
-    });
+    this._wireAllSyncs(); // Use base method
 
     container.appendChild(hero);
     return this;
@@ -222,3 +249,4 @@ export class Hero extends BaseComponent<HeroState> {
 export function hero(id: string, options: HeroOptions = {}): Hero {
   return new Hero(id, options);
 }
+

package/package.json

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