ziko 1.1.1 → 1.2.0

package/dist/ziko.mjs

@@ -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 14:31:45 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
@@ -1874,115 +1874,134 @@ class UseIPC {
 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(!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);
+        // 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(!import.meta.env.SSR && import.meta.env.DEV){
-            this.session_storage.add({[index] : value});
-        } 
+    //    if(!import.meta?.env?.SSR && import.meta?.env?.DEV){
+    //         this.session_storage.add({[index] : value})
+    //     } 
     },
 
 };
@@ -2159,57 +2178,61 @@ var LifecycleMethods = /*#__PURE__*/Object.freeze({
    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());
@@ -4884,4 +4907,4 @@ if(globalThis?.document){
     document?.addEventListener("DOMContentLoaded", __Ziko__.__Config__.init());
 }
 
-export { App, ClickAwayEvent, ClickListeners, Clock, CloneElement, Complex, E, EPSILON, EventController, FileBasedRouting, Flex, HTMLWrapper, KeyListeners, Matrix, PI$1 as PI, PtrListeners, Random, SPA, SVGWrapper, Scheduler, Suspense, SwipeEvent, Switch, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement$1 as UIElement, UIFlex, UIHTMLWrapper, UINode, UISVGWrapper, UISwitch, UIView, UseRoot, UseThread, View, ViewEvent, ViewListeners, ZikoApp, ZikoSPA, ZikoUISuspense, ZikoUIText, abs, accum_prod, accum_sum, acos$1 as acos, acosh, acot, add, add_class, add_vendor_prefix, and, animation, apply_fun, arc, asin, asinh, atan, atan2, atanh, back, binomial, call_with_optional_props, cbrt, ceil, clamp, clock, cloneUI, complex, cos$3 as cos, cosh$2 as cosh, coth, croot, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, discret, div, elastic, exp$1 as exp, floor, fract, hypot, in_back, in_bounce, in_circ, in_cubic, in_elastic, in_expo, in_out_back, in_out_bounce, in_out_circ, in_out_cubic, in_out_elastic, in_out_expo, in_out_quad, in_out_quart, in_out_quint, in_out_sin, in_quad, in_quart, in_quint, in_sin, isPrimitive, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linear, linkStyle, ln, loop, map$1 as map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, mean, median, min, modulo, mul, nand, nor, norm, normalize_css_value, nthr, or, out_back, out_bounce, out_circ, out_cubic, out_elastic, out_expo, out_quad, out_quart, out_quint, out_sin, percentile, pow$1 as pow, rad2deg, register_click_away_event, register_swipe_event, register_view_event, remove_class, round, script, sec, sig, sign, sin$3 as sin, sinh$1 as sinh, sleep, sqrt$2 as sqrt, std, step, step_fps, style, sub, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, trunc, useDerived, useEventEmitter, useIPC, useLocaleStorage, useMediaQuery, useQueryParams, useReactive, useRoot, useSessionStorage, useState, useThread, useTitle, variance, wait, waitElm, waitForUIElm, waitForUIElmSync, watchQueryParams, xnor, xor };
+export { App, ClickAwayEvent, ClickListeners, Clock, CloneElement, Complex, E, EPSILON, EventController, FileBasedRouting, Flex, HTMLWrapper, KeyListeners, Matrix, PI$1 as PI, PtrListeners, Random, SPA, SVGWrapper, Scheduler, Suspense, SwipeEvent, Switch, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement$1 as UIElement, UIFlex, UIHTMLWrapper, UINode, UISVGWrapper, UISwitch, UIView, UseRoot, UseThread, View, ViewEvent, ViewListeners, ZikoApp, ZikoSPA, ZikoUISuspense, ZikoUIText, abs, accum_prod, accum_sum, acos$1 as acos, acosh, acot, add, add_class, add_vendor_prefix, and, animation, apply_fun, arc, asin, asinh, atan, atan2, atanh, back, binomial, call_with_optional_props, cbrt, ceil, clamp, clock, cloneUI, complex, cos$3 as cos, cosh$2 as cosh, coth, croot, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, discret, div, elastic, exp$1 as exp, floor, fract, hypot, in_back, in_bounce, in_circ, in_cubic, in_elastic, in_expo, in_out_back, in_out_bounce, in_out_circ, in_out_cubic, in_out_elastic, in_out_expo, in_out_quad, in_out_quart, in_out_quint, in_out_sin, in_quad, in_quart, in_quint, in_sin, isPrimitive, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linear, linkStyle, ln, loop, map$1 as map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, mean, median, min, modulo, mul, nand, nor, norm, normalize_css_value, nthr, or, out_back, out_bounce, out_circ, out_cubic, out_elastic, out_expo, out_quad, out_quart, out_quint, out_sin, percentile, pow$1 as pow, rad2deg, register_click_away_event, register_swipe_event, register_view_event, remove_class, round, script, sec, sig, sign, sin$3 as sin, sinh$1 as sinh, sleep, sqrt$2 as sqrt, std, step, step_fps, style, sub, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, trunc, useDerived, useEventEmitter, useIPC, useLocalStorage, useMediaQuery, useQueryParams, useReactive, useRoot, useSessionStorage, useState, useThread, useTitle, variance, wait, waitElm, waitForUIElm, waitForUIElmSync, watchQueryParams, xnor, xor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A versatile JavaScript library offering a rich set of Hyperscript Based UI components, advanced mathematical utilities, interactivity ,animations, client side routing and more ...",
   "keywords": [
     "front-end",

package/src/__ziko__/__state__.js

@@ -4,18 +4,18 @@ export var __State__ = {
     index : 0,
     session_storage : null,
     register: function(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)
+        // 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(!import.meta.env.SSR && import.meta.env.DEV){
-            this.session_storage.add({[index] : value})
-        } 
+    //    if(!import.meta?.env?.SSR && import.meta?.env?.DEV){
+    //         this.session_storage.add({[index] : value})
+    //     } 
     },
 
 }

package/src/hooks/use-state.js

@@ -1,54 +1,56 @@
-import { __init__global__ } from "../__ziko__/index.js";
+// import { __init__global__ } from "../__ziko__/index.js";
 
-if(!globalThis.__Ziko__) __init__global__()
+// if (!globalThis.__Ziko__) __init__global__();
 
 export 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];
 }
 
-
 export const isStateGetter = (arg) => {
-    return typeof arg === 'function' && arg?.()?.isStateGetter?.();
-};
+    return typeof arg === "function" && arg?.()?.isStateGetter?.() === true;
+};

package/src/hooks/use-storage.js

@@ -1,99 +1,118 @@
 import { useIPC } from "./use-ipc.js";
 
 class UseStorage {
-    constructor(storage, globalKey, initialValue, use_channel = true) {
-        this.cache = {
-            storage,
-            globalKey,
-            channel: use_channel ? useIPC(`Ziko:useStorage-${globalKey}`) : null,
-            oldItemKeys: new Set()
-        };
-
-        this.#init(initialValue, use_channel);
-    }
+  static RESERVED_KEYS = new Set([
+    "cache", "items", "set", "add", "remove", "get", "clear", "onStorageUpdated"
+  ]);
 
-    get items() {
-        const raw = this.cache.storage.getItem(this.cache.globalKey);
-        if (!raw) return {};
-        try {
-            return JSON.parse(raw);
-        } catch {
-            return {};
-        }
-    }
+  constructor(storage, globalKey, initialValue, use_channel = true) {
+    this.cache = {
+      storage,
+      globalKey,
+      channel: use_channel ? useIPC(`Ziko:useStorage-${globalKey}`) : null,
+      oldItemKeys: new Set()
+    };
 
-    #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);
-    }
+    this.#init(initialValue, use_channel);
+  }
 
-    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;
+  get items() {
+    const raw = this.cache.storage.getItem(this.cache.globalKey);
+    if (!raw) return {};
+    try {
+      return JSON.parse(raw);
+    } catch {
+      return {};
     }
+  }
 
-    add(data) {
-        this.set({
-            ...this.items,
-            ...data
-        });
-        return this;
+  #maintain() {
+    const currentItems = this.items;
+    const currentKeys = new Set(Object.keys(currentItems));
+
+    // 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);
 
 export {
-    useLocaleStorage,
-    useSessionStorage
-};
+  useLocalStorage,
+  useSessionStorage
+};