ziko 0.36.0 → 0.36.2

package/{README.md → README.dep.md}

@@ -1,6 +1,6 @@
 <img src="docs/assets/logo-200.svg" width="100" align="right" alt="zikojs logo">
 
-*💡 **Zikojs** a versatile JavaScript library offering a rich set of UI components, advanced mathematical utilities,Reactivity,animations,client side routing and graphics capabilities* 
+*💡 **Zikojs** a versatile JavaScript library offering a rich set of UI components, advanced mathematical utilities, interactivity ,animations, client side routing and graphics capabilities* 
 
 ## Install 
 ```bash

package/dist/ziko.cjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Tue Aug 12 2025 11:00:20 GMT+0100 (UTC+01:00)
+  Date : Thu Aug 14 2025 10:09:49 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
@@ -3293,52 +3293,16 @@ class ZikoUseMediaQuery {
 
 const useMediaQuery = (mediaQueryRules,fallback) => new ZikoUseMediaQuery(mediaQueryRules,fallback);
 
-class ZikoUseRoot{
-    constructor(props){
-        this.props={};
-        props && this.set(props);
-    }
-    get(prop){
-        return this.props[prop]
-    }
-    // getStaticValue(){
-    //     return document.documentElement.style.getPropertyValue("--primary-col")
-    // }
-    set(props){
-        Object.entries(props).forEach(([key,value])=>this.#setOneProp(key, value));
-        return this;
-    }
-    #setOneProp(prop, value){
-        const CssProp = `--${Str.camel2hyphencase(prop)}`;
-        document.documentElement.style.setProperty(CssProp,value);
-        Object.assign(this.props, {[prop]: `var(${CssProp})`});
-        Object.assign(this, {[prop] : `var(${CssProp})`});
-    }
-}
-
-const useRootValue=CssVar=>{
-    if(!CssVar.startsWith("--")) CssVar = `--${Str.camel2hyphencase(CssVar)}`;
-    return `var(${CssVar})`
-};
-// const useRootStaticValue=CssVar=>{
-//     if(!CssVar.startsWith("--")) CssVar = `--${Str.camel2hyphencase(CssVar)}`
-//     return globalThis.document.documentElement.style.getPropertyValue(CssVar)  
-// }
-const useRoot=(props)=>new ZikoUseRoot(props);
-
 // export * from "./window"
 
 var Hooks = /*#__PURE__*/Object.freeze({
   __proto__: null,
   ZikoHead: ZikoHead$1,
-  ZikoUseRoot: ZikoUseRoot,
   ZikoUseStyle: ZikoUseStyle,
   useFavIcon: useFavIcon$1,
   useHead: useHead$1,
   useMediaQuery: useMediaQuery,
   useMeta: useMeta$1,
-  useRoot: useRoot,
-  useRootValue: useRootValue,
   useStyle: useStyle,
   useSuccesifKeys: useSuccesifKeys,
   useTitle: useTitle$1
@@ -8119,6 +8083,123 @@ class ZikoUseChannel{
 }
 const useChannel = name => new ZikoUseChannel(name);
 
+class ZikoUseThreed {
+    #workerContent;
+    constructor() {
+        this.#workerContent = (
+            function (msg) {
+                try {
+                    const func = new Function("return " + msg.data.fun)();
+                    let result = func();
+                    postMessage({ result });
+                } catch (error) {
+                    postMessage({ error: error.message });
+                } finally {
+                    if (msg.data.close) self.close();
+                }
+            }
+        ).toString();
+        this.blob = new Blob(["this.onmessage = " + this.#workerContent], { type: "text/javascript" });
+        this.worker = new Worker(window.URL.createObjectURL(this.blob));
+    }
+    call(func, callback, close = true) {
+        this.worker.postMessage({
+            fun: func.toString(),
+            close
+        });
+        this.worker.onmessage = function (e) {
+            if (e.data.error) {
+                console.error(e.data.error);
+            } else {
+                callback(e.data.result);
+            }
+        };
+        return this;
+    }
+}
+
+const useThread = (func, callback , close) => {
+    const T = new ZikoUseThreed();
+    if (func) {
+        T.call(func, callback , close);
+    }
+    return T;
+};
+
+class ZikoUseRoot {
+    constructor(PropsMap, {namespace = 'Ziko', register, ValidateCssProps = false} = {}){
+        this.currentPropsMap = PropsMap;
+        this.namespace = namespace;
+        this.ValidateCssProps = ValidateCssProps;
+        // this.pairs = {};
+        // this.#maintain()
+        this.use(PropsMap);
+    }
+    use(PropsMap){
+        if(this.ValidateCssProps) ValidateCssProps(PropsMap);
+        this.currentPropsMap = PropsMap;
+        this.#maintain();
+        return this;
+    }
+    #maintain(){
+       const root = globalThis?.document?.documentElement?.style;
+       for(let prop in this.currentPropsMap){
+        const cssProp = this.namespace ? `--${this.namespace}-${prop}` : `--${prop}`;
+           root.setProperty(
+            cssProp, 
+            this.currentPropsMap[prop]
+            ); 
+            console.log({cssProp});
+        //    Object.assign(this.pairs, {
+        //     [prop] : `var(--${this.namespace}-${prop})`
+        //    })
+           Object.defineProperty(this, prop, {
+                value: `var(${cssProp})`,
+                writable: true,
+                configurable: true,
+                enumerable: false 
+           });
+       }
+    }
+}
+
+function ValidateCssProps(PropsMap){
+    const validProps = new Set(Object.keys(document.documentElement.style));
+    for (let key in PropsMap) {
+        if (!validProps.has(key)) {
+            throw new Error(`Invalid CSS property: "${key}"`);
+        }
+    }
+}
+
+const useRoot = (PropsMap, {namespace, register, ValidateCssProps} = {}) => new ZikoUseRoot(PropsMap, {namespace, register, ValidateCssProps});
+
+// Usage 
+
+/*
+const Styles = {
+ S1 : {
+  background : 'white',
+  color : 'darkblue'
+  border : '2px darkblue solid"'
+ },
+ S2 : {
+  background : 'darkblue',
+  color : 'white'
+  border : '2px green solid"'
+ }
+}
+const {use, border, background, color} = useRoot(Style.S1)
+
+tags.p("Test useRoot ").style({
+  border,
+  color,
+  background,
+  padding : '10px'
+})
+
+*/
+
 // To do : remove old items
 class ZikoUseStorage{
     constructor(storage, globalKey, initialValue){
@@ -8188,49 +8269,6 @@ class ZikoUseStorage{
 const useLocaleStorage=(key,initialValue)=>new ZikoUseStorage(localStorage,key,initialValue);
 const useSessionStorage=(key,initialValue)=>new ZikoUseStorage(sessionStorage,key,initialValue);
 
-class ZikoUseThreed {
-    #workerContent;
-    constructor() {
-        this.#workerContent = (
-            function (msg) {
-                try {
-                    const func = new Function("return " + msg.data.fun)();
-                    let result = func();
-                    postMessage({ result });
-                } catch (error) {
-                    postMessage({ error: error.message });
-                } finally {
-                    if (msg.data.close) self.close();
-                }
-            }
-        ).toString();
-        this.blob = new Blob(["this.onmessage = " + this.#workerContent], { type: "text/javascript" });
-        this.worker = new Worker(window.URL.createObjectURL(this.blob));
-    }
-    call(func, callback, close = true) {
-        this.worker.postMessage({
-            fun: func.toString(),
-            close
-        });
-        this.worker.onmessage = function (e) {
-            if (e.data.error) {
-                console.error(e.data.error);
-            } else {
-                callback(e.data.result);
-            }
-        };
-        return this;
-    }
-}
-
-const useThread = (func, callback , close) => {
-    const T = new ZikoUseThreed();
-    if (func) {
-        T.call(func, callback , close);
-    }
-    return T;
-};
-
 [
     App,
     Math$1,
@@ -8578,7 +8616,6 @@ exports.useLocaleStorage = useLocaleStorage;
 exports.useMediaQuery = useMediaQuery;
 exports.useMeta = useMeta$1;
 exports.useRoot = useRoot;
-exports.useRootValue = useRootValue;
 exports.useSessionStorage = useSessionStorage;
 exports.useStyle = useStyle;
 exports.useSuccesifKeys = useSuccesifKeys;

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Tue Aug 12 2025 11:00:20 GMT+0100 (UTC+01:00)
+  Date : Thu Aug 14 2025 10:09:49 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
@@ -3295,52 +3295,16 @@
 
   const useMediaQuery = (mediaQueryRules,fallback) => new ZikoUseMediaQuery(mediaQueryRules,fallback);
 
-  class ZikoUseRoot{
-      constructor(props){
-          this.props={};
-          props && this.set(props);
-      }
-      get(prop){
-          return this.props[prop]
-      }
-      // getStaticValue(){
-      //     return document.documentElement.style.getPropertyValue("--primary-col")
-      // }
-      set(props){
-          Object.entries(props).forEach(([key,value])=>this.#setOneProp(key, value));
-          return this;
-      }
-      #setOneProp(prop, value){
-          const CssProp = `--${Str.camel2hyphencase(prop)}`;
-          document.documentElement.style.setProperty(CssProp,value);
-          Object.assign(this.props, {[prop]: `var(${CssProp})`});
-          Object.assign(this, {[prop] : `var(${CssProp})`});
-      }
-  }
-
-  const useRootValue=CssVar=>{
-      if(!CssVar.startsWith("--")) CssVar = `--${Str.camel2hyphencase(CssVar)}`;
-      return `var(${CssVar})`
-  };
-  // const useRootStaticValue=CssVar=>{
-  //     if(!CssVar.startsWith("--")) CssVar = `--${Str.camel2hyphencase(CssVar)}`
-  //     return globalThis.document.documentElement.style.getPropertyValue(CssVar)  
-  // }
-  const useRoot=(props)=>new ZikoUseRoot(props);
-
   // export * from "./window"
 
   var Hooks = /*#__PURE__*/Object.freeze({
     __proto__: null,
     ZikoHead: ZikoHead$1,
-    ZikoUseRoot: ZikoUseRoot,
     ZikoUseStyle: ZikoUseStyle,
     useFavIcon: useFavIcon$1,
     useHead: useHead$1,
     useMediaQuery: useMediaQuery,
     useMeta: useMeta$1,
-    useRoot: useRoot,
-    useRootValue: useRootValue,
     useStyle: useStyle,
     useSuccesifKeys: useSuccesifKeys,
     useTitle: useTitle$1
@@ -8121,6 +8085,123 @@
   }
   const useChannel = name => new ZikoUseChannel(name);
 
+  class ZikoUseThreed {
+      #workerContent;
+      constructor() {
+          this.#workerContent = (
+              function (msg) {
+                  try {
+                      const func = new Function("return " + msg.data.fun)();
+                      let result = func();
+                      postMessage({ result });
+                  } catch (error) {
+                      postMessage({ error: error.message });
+                  } finally {
+                      if (msg.data.close) self.close();
+                  }
+              }
+          ).toString();
+          this.blob = new Blob(["this.onmessage = " + this.#workerContent], { type: "text/javascript" });
+          this.worker = new Worker(window.URL.createObjectURL(this.blob));
+      }
+      call(func, callback, close = true) {
+          this.worker.postMessage({
+              fun: func.toString(),
+              close
+          });
+          this.worker.onmessage = function (e) {
+              if (e.data.error) {
+                  console.error(e.data.error);
+              } else {
+                  callback(e.data.result);
+              }
+          };
+          return this;
+      }
+  }
+
+  const useThread = (func, callback , close) => {
+      const T = new ZikoUseThreed();
+      if (func) {
+          T.call(func, callback , close);
+      }
+      return T;
+  };
+
+  class ZikoUseRoot {
+      constructor(PropsMap, {namespace = 'Ziko', register, ValidateCssProps = false} = {}){
+          this.currentPropsMap = PropsMap;
+          this.namespace = namespace;
+          this.ValidateCssProps = ValidateCssProps;
+          // this.pairs = {};
+          // this.#maintain()
+          this.use(PropsMap);
+      }
+      use(PropsMap){
+          if(this.ValidateCssProps) ValidateCssProps(PropsMap);
+          this.currentPropsMap = PropsMap;
+          this.#maintain();
+          return this;
+      }
+      #maintain(){
+         const root = globalThis?.document?.documentElement?.style;
+         for(let prop in this.currentPropsMap){
+          const cssProp = this.namespace ? `--${this.namespace}-${prop}` : `--${prop}`;
+             root.setProperty(
+              cssProp, 
+              this.currentPropsMap[prop]
+              ); 
+              console.log({cssProp});
+          //    Object.assign(this.pairs, {
+          //     [prop] : `var(--${this.namespace}-${prop})`
+          //    })
+             Object.defineProperty(this, prop, {
+                  value: `var(${cssProp})`,
+                  writable: true,
+                  configurable: true,
+                  enumerable: false 
+             });
+         }
+      }
+  }
+
+  function ValidateCssProps(PropsMap){
+      const validProps = new Set(Object.keys(document.documentElement.style));
+      for (let key in PropsMap) {
+          if (!validProps.has(key)) {
+              throw new Error(`Invalid CSS property: "${key}"`);
+          }
+      }
+  }
+
+  const useRoot = (PropsMap, {namespace, register, ValidateCssProps} = {}) => new ZikoUseRoot(PropsMap, {namespace, register, ValidateCssProps});
+
+  // Usage 
+
+  /*
+  const Styles = {
+   S1 : {
+    background : 'white',
+    color : 'darkblue'
+    border : '2px darkblue solid"'
+   },
+   S2 : {
+    background : 'darkblue',
+    color : 'white'
+    border : '2px green solid"'
+   }
+  }
+  const {use, border, background, color} = useRoot(Style.S1)
+
+  tags.p("Test useRoot ").style({
+    border,
+    color,
+    background,
+    padding : '10px'
+  })
+
+  */
+
   // To do : remove old items
   class ZikoUseStorage{
       constructor(storage, globalKey, initialValue){
@@ -8190,49 +8271,6 @@
   const useLocaleStorage=(key,initialValue)=>new ZikoUseStorage(localStorage,key,initialValue);
   const useSessionStorage=(key,initialValue)=>new ZikoUseStorage(sessionStorage,key,initialValue);
 
-  class ZikoUseThreed {
-      #workerContent;
-      constructor() {
-          this.#workerContent = (
-              function (msg) {
-                  try {
-                      const func = new Function("return " + msg.data.fun)();
-                      let result = func();
-                      postMessage({ result });
-                  } catch (error) {
-                      postMessage({ error: error.message });
-                  } finally {
-                      if (msg.data.close) self.close();
-                  }
-              }
-          ).toString();
-          this.blob = new Blob(["this.onmessage = " + this.#workerContent], { type: "text/javascript" });
-          this.worker = new Worker(window.URL.createObjectURL(this.blob));
-      }
-      call(func, callback, close = true) {
-          this.worker.postMessage({
-              fun: func.toString(),
-              close
-          });
-          this.worker.onmessage = function (e) {
-              if (e.data.error) {
-                  console.error(e.data.error);
-              } else {
-                  callback(e.data.result);
-              }
-          };
-          return this;
-      }
-  }
-
-  const useThread = (func, callback , close) => {
-      const T = new ZikoUseThreed();
-      if (func) {
-          T.call(func, callback , close);
-      }
-      return T;
-  };
-
   [
       App,
       Math$1,
@@ -8580,7 +8618,6 @@
   exports.useMediaQuery = useMediaQuery;
   exports.useMeta = useMeta$1;
   exports.useRoot = useRoot;
-  exports.useRootValue = useRootValue;
   exports.useSessionStorage = useSessionStorage;
   exports.useStyle = useStyle;
   exports.useSuccesifKeys = useSuccesifKeys;