juxscript 1.1.159 → 1.1.161

package/index.d.ts

@@ -48,6 +48,10 @@ import { registry } from './lib/components/registry.js';
 import { stateHistory } from './lib/components/history/StateHistory.js';
 import { watcher } from './lib/components/watcher.js';
 export { state, registry, stateHistory };
+export { tabularDriver } from './lib/storage/TabularDriver.js';
+export { DataFrame } from './lib/storage/DataFrame.js';
+export { indexedDBDriver } from './lib/storage/IndexedDBDriver.js';
+export { fileStorage } from './lib/storage/FileStorage.js';
 import { VStack, vstack } from './lib/components/stack/VStack.js';
 import { HStack, hstack } from './lib/components/stack/HStack.js';
 import { ZStack, zstack } from './lib/components/stack/ZStack.js';

package/index.d.ts.map

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

package/index.js

@@ -50,6 +50,11 @@ import { registry } from './lib/components/registry.js';
 import { stateHistory } from './lib/components/history/StateHistory.js';
 import { watcher } from './lib/components/watcher.js';
 export { state, registry, stateHistory };
+// Storage
+export { tabularDriver } from './lib/storage/TabularDriver.js';
+export { DataFrame } from './lib/storage/DataFrame.js';
+export { indexedDBDriver } from './lib/storage/IndexedDBDriver.js';
+export { fileStorage } from './lib/storage/FileStorage.js';
 // Import Stack components (already added earlier)
 import { VStack, vstack } from './lib/components/stack/VStack.js';
 import { HStack, hstack } from './lib/components/stack/HStack.js';

package/lib/components/checkbox.js

@@ -156,7 +156,7 @@ export class Checkbox extends BaseComponent {
                 this.setValue(transformed);
             });
             // Component → State
-            inputEl.addEventListener('change', () => {
+            inputEl.addEventListener('change', (e) => {
                 if (isUpdating)
                     return;
                 isUpdating = true;
@@ -166,17 +166,17 @@ export class Checkbox extends BaseComponent {
                 const transformed = transformToState(checked);
                 stateObj.set(transformed);
                 // 🎯 Fire the change callback event
-                this._triggerCallback('change', checked);
+                this._triggerCallback('change', checked, e, this);
                 setTimeout(() => { isUpdating = false; }, 0);
             });
         }
         else {
             // Default behavior without sync
-            inputEl.addEventListener('change', () => {
+            inputEl.addEventListener('change', (e) => {
                 this.state.checked = inputEl.checked;
                 this._clearError();
                 // 🎯 Fire the change callback event
-                this._triggerCallback('change', inputEl.checked);
+                this._triggerCallback('change', inputEl.checked, e, this);
             });
         }
         // Always add blur validation

package/lib/components/checkbox.ts

@@ -207,11 +207,11 @@ export class Checkbox extends BaseComponent<CheckboxState> {
             });
 
             // Component → State
-            inputEl.addEventListener('change', () => {
+            inputEl.addEventListener('change', (e) => {
                 if (isUpdating) return;
                 isUpdating = true;
 
-                const checked = inputEl.checked;
+                const checked = (inputEl as HTMLInputElement).checked;
                 this.state.checked = checked;
                 this._clearError();
 
@@ -219,18 +219,18 @@ export class Checkbox extends BaseComponent<CheckboxState> {
                 stateObj.set(transformed);
 
                 // 🎯 Fire the change callback event
-                this._triggerCallback('change', checked);
+                this._triggerCallback('change', checked, e, this);
 
                 setTimeout(() => { isUpdating = false; }, 0);
             });
         } else {
             // Default behavior without sync
-            inputEl.addEventListener('change', () => {
+            inputEl.addEventListener('change', (e) => {
                 this.state.checked = inputEl.checked;
                 this._clearError();
 
                 // 🎯 Fire the change callback event
-                this._triggerCallback('change', inputEl.checked);
+                this._triggerCallback('change', inputEl.checked, e, this);
             });
         }
 

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

@@ -1 +1 @@
-{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAQnE,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,MAAM,CAAC;CACpD;AAED,UAAU,eAAgB,SAAQ,SAAS;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,qBAAa,UAAW,SAAQ,aAAa,CAAC,eAAe,CAAC;gBAC9C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB;IAuBvD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI1B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKhC,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKxB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IASxB,QAAQ,IAAI,MAAM;IAIlB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQ7B,OAAO,IAAI,IAAI,GAAG,IAAI;IAMtB,QAAQ,IAAI,OAAO;IAcnB,OAAO,IAAI,OAAO;IAKlB,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM;IAuCzD,SAAS,CAAC,kBAAkB,IAAI,WAAW;IAuB3C,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA0DrE;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB,GAAG,UAAU,CAElF"}
+{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAQnE,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,MAAM,CAAC;CACpD;AAED,UAAU,eAAgB,SAAQ,SAAS;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,qBAAa,UAAW,SAAQ,aAAa,CAAC,eAAe,CAAC;gBAC9C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB;IAuBvD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI1B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKhC,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKxB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IASxB,QAAQ,IAAI,MAAM;IAIlB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQ7B,OAAO,IAAI,IAAI,GAAG,IAAI;IAMtB,QAAQ,IAAI,OAAO;IAcnB,OAAO,IAAI,OAAO;IAKlB,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM;IAuCzD,SAAS,CAAC,kBAAkB,IAAI,WAAW;IAuB3C,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA2DrE;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB,GAAG,UAAU,CAElF"}

package/lib/components/datepicker.js

@@ -170,10 +170,11 @@ export class DatePicker extends BaseComponent {
         // Wire events
         this._wireStandardEvents(wrapper);
         this._wireFormSync(inputEl, 'change');
-        // 🎯 Fire change event when date changes
-        inputEl.addEventListener('change', () => {
-            const input = inputEl;
-            this._triggerCallback('change', input.value);
+        // Find the existing change listener and replace with:
+        inputEl.addEventListener('change', (e) => {
+            const date = inputEl.value;
+            this.state.value = date;
+            this._triggerCallback('change', date, e, this);
         });
         // Sync label changes
         const labelSync = this._syncBindings.find(b => b.property === 'label');

package/lib/components/datepicker.ts

@@ -225,10 +225,11 @@ export class DatePicker extends BaseComponent<DatePickerState> {
         this._wireStandardEvents(wrapper);
         this._wireFormSync(inputEl, 'change');
 
-        // 🎯 Fire change event when date changes
-        inputEl.addEventListener('change', () => {
-            const input = inputEl as HTMLInputElement;
-            this._triggerCallback('change', input.value);
+        // Find the existing change listener and replace with:
+        inputEl.addEventListener('change', (e) => {
+            const date = (inputEl as HTMLInputElement).value;
+            this.state.value = date;
+            this._triggerCallback('change', date, e, this);
         });
 
         // Sync label changes

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,aAAa;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,WAAW,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,MAAO,SAAQ,aAAa,CAAC,WAAW,CAAC;IAClD,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,QAAQ,CAA4B;gBAEhC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB;IAanD,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,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKhC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK/B,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,IAAI;IAKtD,IAAI,IAAI,IAAI;IAQZ,KAAK,IAAI,IAAI;IAQb,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAQtC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAkErE;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAEtE"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,aAAa;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,WAAW,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,MAAO,SAAQ,aAAa,CAAC,WAAW,CAAC;IAClD,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,QAAQ,CAA4B;gBAEhC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB;IAanD,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,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKhC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK/B,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,IAAI;IAKtD,IAAI,IAAI,IAAI;IASZ,KAAK,IAAI,IAAI;IASb,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAQtC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAkErE;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAEtE"}

package/lib/components/dialog.js

@@ -51,6 +51,7 @@ export class Dialog extends BaseComponent {
         if (this._overlay) {
             this._overlay.style.display = 'flex';
         }
+        this._triggerCallback('open', true, null, this);
         return this;
     }
     close() {
@@ -58,6 +59,7 @@ export class Dialog extends BaseComponent {
         if (this._overlay) {
             this._overlay.style.display = 'none';
         }
+        this._triggerCallback('close', false, null, this);
         return this;
     }
     update(prop, value) {

package/lib/components/dialog.ts

@@ -84,6 +84,7 @@ export class Dialog extends BaseComponent<DialogState> {
         if (this._overlay) {
             this._overlay.style.display = 'flex';
         }
+        this._triggerCallback('open', true, null, this);
         return this;
     }
 
@@ -92,6 +93,7 @@ export class Dialog extends BaseComponent<DialogState> {
         if (this._overlay) {
             this._overlay.style.display = 'none';
         }
+        this._triggerCallback('close', false, null, this);
         return this;
     }
 

package/lib/components/dropdown.d.ts

@@ -4,6 +4,7 @@ export interface DropdownItem {
     icon?: string;
     divider?: boolean;
     click?: () => void;
+    value?: string;
 }
 export interface DropdownOptions {
     triggerLabel?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAOxD,MAAM,WAAW,YAAY;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,aAAa,GAAG,cAAc,GAAG,UAAU,GAAG,WAAW,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,aAAa,GAAG;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,QAAS,SAAQ,aAAa,CAAC,aAAa,CAAC;IACtD,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,KAAK,CAA4B;gBAE7B,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB;IAWrD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKjC,KAAK,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,IAAI;IAKlC,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,cAAc,GAAG,UAAU,GAAG,WAAW,GAAG,IAAI;IAKhF,IAAI,IAAI,IAAI;IAQZ,KAAK,IAAI,IAAI;IAQb,MAAM,IAAI,IAAI;IAQd,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IAsFlE,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;CAGzC;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB,GAAG,QAAQ,CAE5E"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAOxD,MAAM,WAAW,YAAY;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,aAAa,GAAG,cAAc,GAAG,UAAU,GAAG,WAAW,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,aAAa,GAAG;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,QAAS,SAAQ,aAAa,CAAC,aAAa,CAAC;IACtD,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,KAAK,CAA4B;gBAE7B,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB;IAWrD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKjC,KAAK,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,IAAI;IAKlC,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,cAAc,GAAG,UAAU,GAAG,WAAW,GAAG,IAAI;IAKhF,IAAI,IAAI,IAAI;IAQZ,KAAK,IAAI,IAAI;IAQb,MAAM,IAAI,IAAI;IAQd,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IAkFlE,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;CAGzC;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB,GAAG,QAAQ,CAE5E"}

package/lib/components/dropdown.js

@@ -98,13 +98,12 @@ export class Dropdown extends BaseComponent {
                     label.textContent = item.label;
                     menuItem.appendChild(label);
                 }
-                menuItem.addEventListener('click', () => {
-                    // 🎯 Fire the select callback event
-                    this._triggerCallback('select', item);
-                    // Then fire item-specific click handler
-                    if (item.click) {
+                // For each item click handler in the dropdown, replace with:
+                menuItem.addEventListener('click', (e) => {
+                    const value = item.value || item.label || '';
+                    if (item.click)
                         item.click();
-                    }
+                    this._triggerCallback('select', value, e, this);
                     this.close();
                 });
                 menu.appendChild(menuItem);

package/lib/components/dropdown.ts

@@ -10,6 +10,7 @@ export interface DropdownItem {
     icon?: string;
     divider?: boolean;
     click?: () => void;
+    value?: string;
 }
 
 export interface DropdownOptions {
@@ -141,15 +142,11 @@ export class Dropdown extends BaseComponent<DropdownState> {
                     menuItem.appendChild(label);
                 }
 
-                menuItem.addEventListener('click', () => {
-                    // 🎯 Fire the select callback event
-                    this._triggerCallback('select', item);
-
-                    // Then fire item-specific click handler
-                    if (item.click) {
-                        item.click();
-                    }
-
+                // For each item click handler in the dropdown, replace with:
+                menuItem.addEventListener('click', (e) => {
+                    const value = item.value || item.label || '';
+                    if (item.click) item.click();
+                    this._triggerCallback('select', value, e, this);
                     this.close();
                 });
 

package/lib/components/fileupload.d.ts

@@ -1,4 +1,5 @@
 import { BaseComponent, BaseState } from './base/BaseComponent.js';
+import { FileStorage } from '../storage/FileStorage.js';
 export interface FileUploadOptions {
     label?: string;
     accept?: string;
@@ -10,6 +11,8 @@ export interface FileUploadOptions {
     style?: string;
     class?: string;
     onValidate?: (files: File[]) => boolean | string;
+    storage?: FileStorage;
+    metadata?: Record<string, any>;
 }
 interface FileUploadState extends BaseState {
     files: File[];
@@ -19,12 +22,15 @@ interface FileUploadState extends BaseState {
 }
 export declare class FileUpload extends BaseComponent<FileUploadState> {
     private _fileListElement;
+    private _storage;
+    private _metadata;
     constructor(id: string, options?: FileUploadOptions);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
     accept(value: string): this;
     multiple(value: boolean): this;
     icon(value: string): this;
+    storage(store: FileStorage, metadata?: Record<string, any>): this;
     clear(): this;
     getValue(): File[];
     setValue(files: File[]): this;

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

@@ -1 +1 @@
-{"version":3,"file":"fileupload.d.ts","sourceRoot":"","sources":["fileupload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAQnE,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,GAAG,MAAM,CAAC;CACpD;AAED,UAAU,eAAgB,SAAQ,SAAS;IACvC,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,qBAAa,UAAW,SAAQ,aAAa,CAAC,eAAe,CAAC;IAC1D,OAAO,CAAC,gBAAgB,CAA4B;gBAExC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB;IAuBvD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK3B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK9B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB,KAAK,IAAI,IAAI;IAgBb,QAAQ,IAAI,IAAI,EAAE;IAIlB,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI;IAM7B,QAAQ,IAAI,OAAO;IAcnB,OAAO,IAAI,OAAO;IAKlB,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,OAAO,GAAG,MAAM;IAiBzD,SAAS,CAAC,kBAAkB,IAAI,WAAW;IAiB3C,OAAO,CAAC,eAAe;IA6BvB,OAAO,CAAC,eAAe;IAYvB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAsIrE;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB,GAAG,UAAU,CAElF"}
+{"version":3,"file":"fileupload.d.ts","sourceRoot":"","sources":["fileupload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGnE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAMxD,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,GAAG,MAAM,CAAC;IACjD,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAClC;AAED,UAAU,eAAgB,SAAQ,SAAS;IACvC,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,qBAAa,UAAW,SAAQ,aAAa,CAAC,eAAe,CAAC;IAC1D,OAAO,CAAC,gBAAgB,CAA4B;IACpD,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,SAAS,CAAkC;gBAEvC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB;IA0BvD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK3B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK9B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB,OAAO,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI;IAMjE,KAAK,IAAI,IAAI;IAgBb,QAAQ,IAAI,IAAI,EAAE;IAIlB,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI;IAM7B,QAAQ,IAAI,OAAO;IAcnB,OAAO,IAAI,OAAO;IAKlB,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,OAAO,GAAG,MAAM;IAiBzD,SAAS,CAAC,kBAAkB,IAAI,WAAW;IAiB3C,OAAO,CAAC,eAAe;IA6BvB,OAAO,CAAC,eAAe;IAYvB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA2FrE;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB,GAAG,UAAU,CAElF"}

package/lib/components/fileupload.js

@@ -1,9 +1,9 @@
 import { BaseComponent } from './base/BaseComponent.js';
 import { renderIcon } from './icons.js';
-import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import
+import { formatIdAsLabel } from '../utils/formatId.js';
 // Event definitions
 const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = ['change', 'filesSelected', 'clear'];
+const CALLBACK_EVENTS = ['change', 'filesSelected', 'clear', 'stored'];
 export class FileUpload extends BaseComponent {
     constructor(id, options = {}) {
         super(id, {
@@ -13,7 +13,7 @@ export class FileUpload extends BaseComponent {
             class: options.class ?? '',
             style: options.style ?? '',
             attributes: {},
-            label: options.label ?? formatIdAsLabel(id), // ✅ Auto-generate
+            label: options.label ?? formatIdAsLabel(id),
             required: options.required ?? false,
             name: options.name ?? id,
             errorMessage: undefined,
@@ -23,9 +23,12 @@ export class FileUpload extends BaseComponent {
             icon: options.icon ?? 'upload'
         });
         this._fileListElement = null;
+        this._storage = null;
         if (options.onValidate) {
             this._onValidate = options.onValidate;
         }
+        this._storage = options.storage ?? null;
+        this._metadata = options.metadata;
     }
     getTriggerEvents() {
         return TRIGGER_EVENTS;
@@ -48,6 +51,11 @@ export class FileUpload extends BaseComponent {
         this.state.icon = value;
         return this;
     }
+    storage(store, metadata) {
+        this._storage = store;
+        this._metadata = metadata;
+        return this;
+    }
     clear() {
         this.state.files = [];
         if (this._inputElement) {
@@ -56,7 +64,7 @@ export class FileUpload extends BaseComponent {
         if (this._fileListElement) {
             this._fileListElement.innerHTML = '';
         }
-        this._triggerCallback('clear');
+        this._triggerCallback('clear', null, null, this);
         return this;
     }
     /* ═════════════════════════════════════════════════════════════════
@@ -111,12 +119,12 @@ export class FileUpload extends BaseComponent {
         input.multiple = multiple;
         input.required = required;
         input.disabled = disabled;
-        input.style.display = 'none'; // Hidden, triggered by button
+        input.style.display = 'none';
         return input;
     }
     _updateFileList() {
         if (!this._fileListElement)
-            return; // Safety check
+            return;
         this._fileListElement.innerHTML = '';
         if (this.state.files.length === 0) {
             return;
@@ -133,9 +141,9 @@ export class FileUpload extends BaseComponent {
             removeBtn?.addEventListener('click', () => {
                 this.state.files = this.state.files.filter((_, i) => i !== index);
                 this._updateFileList();
-                this._triggerCallback('change', this.state.files);
+                this._triggerCallback('change', this.state.files, null, this);
             });
-            this._fileListElement.appendChild(fileItem); // ✅ Non-null assertion safe here
+            this._fileListElement.appendChild(fileItem);
         });
     }
     _formatFileSize(bytes) {
@@ -152,7 +160,6 @@ export class FileUpload extends BaseComponent {
     render(targetId) {
         const container = this._setupContainer(targetId);
         const { icon, style, class: className } = this.state;
-        // Build wrapper
         const wrapper = document.createElement('div');
         wrapper.className = 'jux-input jux-fileupload';
         wrapper.id = this._id;
@@ -160,15 +167,12 @@ export class FileUpload extends BaseComponent {
             wrapper.className += ` ${className}`;
         if (style)
             wrapper.setAttribute('style', style);
-        // Label
         if (this.state.label) {
             wrapper.appendChild(this._renderLabel());
         }
-        // Hidden file input
         const inputEl = this._buildInputElement();
         this._inputElement = inputEl;
         wrapper.appendChild(inputEl);
-        // Button container
         const buttonContainer = document.createElement('div');
         buttonContainer.className = 'jux-fileupload-button-container';
         if (icon) {
@@ -184,67 +188,33 @@ export class FileUpload extends BaseComponent {
         button.disabled = this.state.disabled;
         buttonContainer.appendChild(button);
         wrapper.appendChild(buttonContainer);
-        // File list
         const fileList = document.createElement('div');
         fileList.className = 'jux-fileupload-list';
         this._fileListElement = fileList;
         wrapper.appendChild(fileList);
-        // Error element
         wrapper.appendChild(this._renderError());
-        // Button click triggers file input
         button.addEventListener('click', () => inputEl.click());
-        // Wire events
+        inputEl.addEventListener('change', (e) => {
+            const files = Array.from(inputEl.files || []);
+            this.state.files = files;
+            this._updateFileList();
+            this._clearError();
+            this._triggerCallback('change', files, e, this);
+            this._triggerCallback('filesSelected', files, e, this);
+            if (this._storage && files.length > 0) {
+                this._storage.storeAll(files, this._metadata).then((stored) => {
+                    this._triggerCallback('stored', stored, e, this);
+                }).catch((err) => {
+                    console.error('[FileUpload] Storage error:', err);
+                });
+            }
+        });
         this._wireStandardEvents(wrapper);
-        // Wire file-specific sync
-        const filesSync = this._syncBindings.find(b => b.property === 'files' || b.property === 'value');
-        if (filesSync) {
-            const { stateObj, toState, toComponent } = filesSync;
-            const transformToState = toState || ((v) => v);
-            const transformToComponent = toComponent || ((v) => v);
-            let isUpdating = false;
-            // State → Component
-            stateObj.subscribe((val) => {
-                if (isUpdating)
-                    return;
-                const transformed = transformToComponent(val);
-                this.setValue(transformed);
-            });
-            // Component → State
-            inputEl.addEventListener('change', () => {
-                if (isUpdating)
-                    return;
-                isUpdating = true;
-                const files = Array.from(inputEl.files || []);
-                this.state.files = files;
-                this._updateFileList();
-                this._clearError();
-                const transformed = transformToState(files);
-                stateObj.set(transformed);
-                // 🎯 Fire the callback events
-                this._triggerCallback('change', files);
-                this._triggerCallback('filesSelected', files);
-                setTimeout(() => { isUpdating = false; }, 0);
-            });
-        }
-        else {
-            // Default behavior without sync
-            inputEl.addEventListener('change', () => {
-                const files = Array.from(inputEl.files || []);
-                this.state.files = files;
-                this._updateFileList();
-                this._clearError();
-                // 🎯 Fire the callback events
-                this._triggerCallback('change', files);
-                this._triggerCallback('filesSelected', files);
-            });
-        }
-        // Always add blur validation
         inputEl.addEventListener('blur', () => {
             if (this._hasBeenValidated) {
                 this.validate();
             }
         });
-        // Sync label changes
         const labelSync = this._syncBindings.find(b => b.property === 'label');
         if (labelSync) {
             const transform = labelSync.toComponent || ((v) => String(v));