ziko 1.1.1 → 1.3.0

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Tue Jul 28 2026 17:04:51 GMT+0100 (UTC+01:00)
+  Date : Thu Jul 30 2026 19:50:38 GMT+0100 (UTC+01:00)
   Git-Repo : https://github.com/zakarialaoui10/ziko.js
   Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
   Released under MIT License
@@ -1880,115 +1880,134 @@
    const useIPC = (name) => new UseIPC(name);
 
    class UseStorage {
-       constructor(storage, globalKey, initialValue, use_channel = true) {
-           this.cache = {
-               storage,
-               globalKey,
-               channel: use_channel ? useIPC(`Ziko:useStorage-${globalKey}`) : null,
-               oldItemKeys: new Set()
-           };
+     static RESERVED_KEYS = new Set([
+       "cache", "items", "set", "add", "remove", "get", "clear", "onStorageUpdated"
+     ]);
 
-           this.#init(initialValue, use_channel);
-       }
+     constructor(storage, globalKey, initialValue, use_channel = true) {
+       this.cache = {
+         storage,
+         globalKey,
+         channel: use_channel ? useIPC(`Ziko:useStorage-${globalKey}`) : null,
+         oldItemKeys: new Set()
+       };
 
-       get items() {
-           const raw = this.cache.storage.getItem(this.cache.globalKey);
-           if (!raw) return {};
-           try {
-               return JSON.parse(raw);
-           } catch {
-               return {};
-           }
-       }
+       this.#init(initialValue, use_channel);
+     }
 
-       #maintain() {
-           const items = this.items;
-           this.cache.oldItemKeys.forEach(k => delete this[k]);
-           for (const key in items) {
-               this[key] = items[key];
-               this.cache.oldItemKeys.add(key);
-           }
-       }
-       #init(initialValue, use_channel) {
-           if (use_channel && this.cache.channel) this.cache.channel.on("Ziko-Storage-Updated", () => this.#maintain());
-           if (!initialValue) {
-               this.#maintain();
-               return;
-           }
-           if (this.cache.storage.getItem(this.cache.globalKey)) {
-               const existing = this.items;
-               Object.keys(existing).forEach(k => this.cache.oldItemKeys.add(k));
-               this.#maintain();
-           } 
-           else this.set(initialValue);
+     get items() {
+       const raw = this.cache.storage.getItem(this.cache.globalKey);
+       if (!raw) return {};
+       try {
+         return JSON.parse(raw);
+       } catch {
+         return {};
        }
+     }
 
-       set(data) {
-           this.cache.storage.setItem(this.cache.globalKey, JSON.stringify(data));
-           if (this.cache.channel) this.cache.channel.emit("Ziko-Storage-Updated", data);
-           this.#maintain();
-           return this;
-       }
+     #maintain() {
+       const currentItems = this.items;
+       const currentKeys = new Set(Object.keys(currentItems));
 
-       add(data) {
-           this.set({
-               ...this.items,
-               ...data
-           });
-           return this;
+       // Cleanup keys that were removed
+       this.cache.oldItemKeys.forEach(key => {
+         if (!currentKeys.has(key)) {
+           delete this[key];
+           this.cache.oldItemKeys.delete(key);
+         }
+       });
+
+       // Populate keys from storage onto `this`
+       for (const key in currentItems) {
+         if (!UseStorage.RESERVED_KEYS.has(key)) {
+           this[key] = currentItems[key];
+           this.cache.oldItemKeys.add(key);
+         }
        }
-       remove(...keys) {
-           const items = { ...this.items };
-           keys.forEach(key => {
-               delete items[key];
-               delete this[key];
-               this.cache.oldItemKeys.delete(key);
-           });
-           this.set(items);
-           return this;
+     }
+
+     #init(initialValue, use_channel) {
+       if (use_channel && this.cache.channel) {
+         this.cache.channel.on("Ziko-Storage-Updated", () => this.#maintain());
        }
-       get(key) {
-           return this.items[key];
+
+       const hasStoredData = this.cache.storage.getItem(this.cache.globalKey) !== null;
+
+       if (hasStoredData) {
+         // Key already exists in storage -> Restore data to instance
+         this.#maintain();
+       } else if (initialValue !== undefined) {
+         // Key doesn't exist -> Seed with initialValue
+         this.set(initialValue);
+       } else {
+         // Key doesn't exist and no initialValue provided -> Default to empty
+         this.#maintain();
        }
-       clear() {
-           this.cache.storage.removeItem(this.cache.globalKey);
-           this.cache.oldItemKeys.forEach(k => delete this[k]);
-           this.cache.oldItemKeys.clear();
-           this.#maintain();
-           return this;
+     }
+
+     set(data) {
+       this.cache.storage.setItem(this.cache.globalKey, JSON.stringify(data));
+       if (this.cache.channel) {
+         this.cache.channel.emit("Ziko-Storage-Updated", data);
        }
-       onStorageUpdated(callback) {
-           if (this.cache.channel) {
-               this.cache.channel.on("Ziko-Storage-Updated", callback);
-           }
-           return this;
+       this.#maintain();
+       return this;
+     }
+
+     add(data) {
+       return this.set({
+         ...this.items,
+         ...data
+       });
+     }
+
+     remove(...keys) {
+       const items = { ...this.items };
+       keys.forEach(key => delete items[key]);
+       return this.set(items);
+     }
+
+     get(key) {
+       return this.items[key];
+     }
+
+     clear() {
+       this.cache.storage.removeItem(this.cache.globalKey);
+       this.#maintain();
+       return this;
+     }
+
+     onStorageUpdated(callback) {
+       if (this.cache.channel) {
+         this.cache.channel.on("Ziko-Storage-Updated", callback);
        }
+       return this;
+     }
    }
 
-   // factory functions
-   const useLocaleStorage = (key, initialValue, use_channel = true) =>
-       new UseStorage(localStorage, key, initialValue, use_channel);
+   const useLocalStorage = (key, initialValue, use_channel = true) =>
+     new UseStorage(localStorage, key, initialValue, use_channel);
 
    const useSessionStorage = (key, initialValue, use_channel = true) =>
-       new UseStorage(sessionStorage, key, initialValue, use_channel);
+     new UseStorage(sessionStorage, key, initialValue, use_channel);
 
    var __State__ = {
        store : new Map(),
        index : 0,
        session_storage : null,
        register: function(state){
-           if(!undefined.SSR && undefined.DEV){
-               if(!this.session) this.session_storage = useSessionStorage('ziko-state', {});
-               const savedValue = this.session_storage.get(this.index);
-               if(!savedValue) this.session_storage.add({[this.index] : state.value});
-               else state.value = savedValue;
-           }
-           this.store.set(this.index++, state);
+           // if(!import.meta?.env?.SSR && import.meta?.env?.DEV){
+           //     if(!this.session) this.session_storage = useSessionStorage('ziko-state', {})
+           //     const savedValue = this.session_storage.get(this.index)
+           //     if(!savedValue) this.session_storage.add({[this.index] : state.value});
+           //     else state.value = savedValue
+           // }
+           // this.store.set(this.index++, state)
        },
        update: function(index, value){
-          if(!undefined.SSR && undefined.DEV){
-               this.session_storage.add({[index] : value});
-           } 
+       //    if(!import.meta?.env?.SSR && import.meta?.env?.DEV){
+       //         this.session_storage.add({[index] : value})
+       //     } 
        },
 
    };
@@ -2165,57 +2184,61 @@
       unmount: unmount
    });
 
-   if(!globalThis.__Ziko__) __init__global__();
+   // import { __init__global__ } from "../__ziko__/index.js";
+
+   // if (!globalThis.__Ziko__) __init__global__();
 
    function useState(initialValue) {
        
-       const {store, index} = __Ziko__.__State__;
-       __Ziko__.__State__.register({
-               value : initialValue,
-               subscribers : new Set(),
-               paused : false
-       });
-
-       let current = store.get(index);
+       const state = {
+           value: initialValue,
+           subscribers: new Set(),
+           paused: false,
+       };
 
        function getValue() {
            return {
-               value: current.value,
+               value: state.value,
                isStateGetter: () => true,
-               _subscribe: (fn) => current.subscribers.add(fn),
+               _subscribe: (fn) => {
+                   state.subscribers.add(fn);
+                   return () => state.subscribers.delete(fn);
+               },
            };
        }
 
        function setValue(newValue) {
-           if (current.paused) return;
+           if (state.paused) return;
+
            if (typeof newValue === "function") {
-               newValue = newValue(current.value);
+               newValue = newValue(state.value);
            }
-           if (newValue !== current.value) {
-               current.value = newValue;
-               current.subscribers.forEach(fn => fn(current.value));
-               __Ziko__.__State__.update(index, newValue);
+
+           if (!Object.is(newValue, state.value)) {
+               state.value = newValue;
+               state.subscribers.forEach((fn) => fn(state.value));
            }
        }
 
        const controller = {
-           pause: () => { current.paused = true; },
-           resume: () => { current.paused = false; },
-           clear: () => { current.subscribers.clear(); },
+           pause: () => { state.paused = true; },
+           resume: () => { state.paused = false; },
+           clear: () => { state.subscribers.clear(); },
            force: (newValue) => {
-               if (typeof newValue === "function") newValue = newValue(current.value);
-               current.value = newValue;
-               current.subscribers.forEach(fn => fn(current.value));
+               if (typeof newValue === "function") {
+                   newValue = newValue(state.value);
+               }
+               state.value = newValue;
+               state.subscribers.forEach((fn) => fn(state.value));
            },
-           getSubscribers: () => new Set(current.subscribers),
+           getSubscribers: () => new Set(state.subscribers),
        };
 
        return [getValue, setValue, controller];
    }
 
-
    const isStateGetter = (arg) => {
-       return typeof arg === 'function' && arg?.()?.isStateGetter?.();
+       return typeof arg === "function" && arg?.()?.isStateGetter?.() === true;
    };
 
    const camel2hyphencase = (text = '') => text.replace(/[A-Z]/g, match => '-' + match.toLowerCase());
@@ -3485,6 +3508,63 @@
    //     return this.cases[matched]()
    // }
 
+   class UISwap extends UIElement$1 {
+       #DISPLAYS_MAP = new WeakMap()
+       constructor({ activeIndex = 0 } = {}, ...items) {
+           super({ element: 'div' });
+           this.style({ display: 'contents' });
+           
+           this.states = {
+               activeIndex
+           };
+           
+           this.append(...items);
+           this.#setup();
+       }
+       get activeItem(){
+           return this.items[this.states.activeIndex]
+       }
+       #setup() {
+           this.items.forEach((n, i) => {
+               // Store initial display style (fallback to empty string or default)
+               const initialDisplay = n.element?.style?.display || '';
+               this.#DISPLAYS_MAP.set(n, initialDisplay);
+
+               if (i !== this.states.activeIndex) {
+                   n.style({ display: 'none' });
+               }
+           });
+       }
+       next(n = 1) {
+           return this.activate(this.states.activeIndex + n);
+       }
+       previous(n = 1) {
+           return this.activate(this.states.activeIndex - n);
+       }
+       activate(index) {
+           if (!this.items.length) return this;
+
+           const currentItem = this.items.at(this.states.activeIndex);
+
+           if (currentItem) {
+               currentItem.style({ display: 'none' });
+           }
+
+           const len = this.items.length;
+           this.states.activeIndex = ((index % len) + len) % len;
+
+           const activeItem = this.items.at(this.states.activeIndex);
+           if (activeItem) {
+               const restoredDisplay = this.#DISPLAYS_MAP.get(activeItem) || 'block';
+               activeItem.style({ display: restoredDisplay === 'none' ? 'block' : restoredDisplay });
+           }
+
+           return this;
+       }
+   }
+
+   const Swap = call_with_optional_props(UISwap);
+
    const { PI, sqrt: sqrt$1, cos: cos$2, sin: sin$2, acos, pow } = Math;
 
    const linear = t => t;
@@ -4911,6 +4991,7 @@
    exports.SVGWrapper = SVGWrapper;
    exports.Scheduler = Scheduler;
    exports.Suspense = Suspense;
+   exports.Swap = Swap;
    exports.SwipeEvent = SwipeEvent;
    exports.Switch = Switch;
    exports.Tick = Tick;
@@ -4922,6 +5003,7 @@
    exports.UIHTMLWrapper = UIHTMLWrapper;
    exports.UINode = UINode;
    exports.UISVGWrapper = UISVGWrapper;
+   exports.UISwap = UISwap;
    exports.UISwitch = UISwitch;
    exports.UIView = UIView;
    exports.UseRoot = UseRoot;
@@ -5081,7 +5163,7 @@
    exports.useDerived = useDerived;
    exports.useEventEmitter = useEventEmitter;
    exports.useIPC = useIPC;
-   exports.useLocaleStorage = useLocaleStorage;
+   exports.useLocalStorage = useLocalStorage;
    exports.useMediaQuery = useMediaQuery;
    exports.useQueryParams = useQueryParams;
    exports.useReactive = useReactive;