ziko 0.37.0 → 0.38.0

package/src/math/functions/proxy.js

@@ -0,0 +1,58 @@
+let {abs, sqrt, cos, sin, tan, exp, log, cosh, sinh, tanh} = Math;
+// Math.abs = new Proxy(Math.abs, {
+//   apply(target, thisArg, args) {
+//     const x = args[0]
+//       if(typeof x === 'number') return target.apply(thisArg, args);
+//       if(x?.isComplex?.()){
+//         const {a, b, z, phi} = x
+//         const complex = (a, b) => new x.constructor(a, b) 
+//         switch(target.name){
+//           case 'abs' : return a.z;
+//           case 'sqrt' : return complex(sqrt(z)*cos(phi/2),sqrt(z)*sin(phi/2));
+//         }
+//       }
+      
+//   }
+// });
+
+
+for (const key of Object.getOwnPropertyNames(Math)) {
+  const fn = Math[key];
+  if (typeof fn === "function") {
+    Math[key] = new Proxy(fn, {
+      apply(target, thisArg, args) {
+        // console.log(target)
+        const x = args[0]
+        if(typeof x === 'number' || args.length === 0) return target.apply(thisArg, args);
+        if(x?.isComplex?.()){
+            const {a, b, z, phi} = x
+            const complex = (a, b) => new x.constructor(a, b);
+            switch(target.name){
+                case 'abs' : return x.z;
+                case 'sqrt' : return complex(sqrt(z)*cos(phi/2),sqrt(z)*sin(phi/2));
+                case 'log' : return complex(log(z), phi);
+                case 'exp' : return complex(exp(a)*cos(b),exp(a)*sin(b));
+                case 'cos' : return complex(cos(a)*cosh(b),-(sin(a)*sinh(b)));
+                case 'sin' : return complex(sin(a)*cosh(b),cos(a)*sinh(b));
+                case 'tan' : {
+                    const DEN = cos(2*a)+cosh(2*b);
+                    return complex(sin(2*a) /DEN, sinh(2*b)/DEN);
+                }
+                case 'cosh' : return complex(cosh(a)*cos(b),sinh(a)*sin(b));
+                case 'sinh' : return complex(sinh(a)*cos(b),cosh(a)*sin(b));
+                case 'tanh' : {
+                    const DEN=cosh(2*a)+cos(2*b);
+                    return complex(sinh(2*a)/DEN,sin(2*b)/DEN)
+                }
+                default : return target.apply(thisArg, args)
+             }
+        }
+        // if( x.isMatrix?.()){
+        //     const {rows, cols, arr} = x
+        //     // return new x.constructor(rows, cols, arr.flat(1).map(n=>));
+        // }
+        throw new TypeError(`Math.${key} expects only numbers`);
+      }
+    });
+  }
+}

package/src/math/utils/mapfun.js

@@ -1,36 +1,31 @@
-/** @module Math */
 import { Matrix } from "../matrix/index.js";
 import { Complex , complex } from "../complex/index.js";
 import {ln,e,cos,sin,sqrt,cosh,sinh} from "../functions/index.js";
 import { Fixed } from "../functions/helper.js";
- /**
- * map a function to ...X
- * @param {function} fun
- * @param {...any} X
- * @returns {any|any[]}
- */
+// To generalise
+
 const mapfun=(fun,...X)=>{
     const Y=X.map(x=>{
-        if(x===null)return fun(null);
-        if(["number","string","boolean","bigint","undefined"].includes(typeof x))return fun(x);
-        if(x instanceof Array)return x.map(n=>mapfun(fun,n));
-        if(ArrayBuffer.isView(x))return x.map(n=>fun(n));
-        if(x instanceof Set)return new Set(mapfun(fun,...[...x]));
-        if(x instanceof Map)return new Map([...x].map(n=>[n[0],mapfun(fun,n[1])]));
+        if(x===null) return fun(null);
+        if(["number","string","boolean","bigint","undefined"].includes(typeof x)) return fun(x);
+        if(x instanceof Array) return x.map(n=>mapfun(fun,n));
+        if(ArrayBuffer.isView(x)) return x.map(n=>fun(n));
+        if(x instanceof Set) return new Set(mapfun(fun,...[...x]));
+        if(x instanceof Map) return new Map([...x].map(n=>[n[0],mapfun(fun,n[1])]));
         if(x instanceof Matrix){
-            return new Matrix(x.rows,x.cols,mapfun(x.arr.flat(1)))
+            return new Matrix(x.rows,x.cols, mapfun(x.arr.flat(1)))
         }
         if(x instanceof Complex){
             const [a,b,z,phi]=[x.a,x.b,x.z,x.phi];
             switch(fun){
-                case Math.log:return complex(ln(z),phi); // Done
-                case Math.exp:return complex(e(a)*cos(b),e(a)*sin(b)); // Done
-                case Math.abs:return z; // Done
-                case Math.sqrt:return complex(sqrt(z)*cos(phi/2),sqrt(z)*sin(phi/2)); // Done
-                case Fixed.cos:return complex(cos(a)*cosh(b),-(sin(a)*sinh(b)));
-                case Fixed.sin:return complex(sin(a)*cosh(b),cos(a)*sinh(b));
+                case Math.log: return complex(ln(z),phi); // Done
+                case Math.exp: return complex(e(a)*cos(b),e(a)*sin(b)); // Done
+                case Math.abs: return z; // Done
+                case Math.sqrt: return complex(sqrt(z)*cos(phi/2),sqrt(z)*sin(phi/2)); // Done
+                case Fixed.cos: return complex(cos(a)*cosh(b),-(sin(a)*sinh(b)));
+                case Fixed.sin: return complex(sin(a)*cosh(b),cos(a)*sinh(b));
                 case Fixed.tan:{
-                    const DEN=cos(2*a)+cosh(2*b);
+                    const DEN = cos(2*a)+cosh(2*b);
                     return complex(sin(2*a)/DEN,sinh(2*b)/DEN);
                 }
                 case Fixed.cosh:return complex(cosh(a)*cos(b),sinh(a)*sin(b));
@@ -43,6 +38,7 @@ const mapfun=(fun,...X)=>{
             }
         }
         else if(x instanceof Object){
+            return Object.fromEntries(Object.entries(x).map(n=>n=[n[0],mapfun(fun,n[1])]))
             return fun(Object) || Object.fromEntries(Object.entries(x).map(n=>n=[n[0],mapfun(fun,n[1])]))
         }
     });

package/src/no-module.js

@@ -0,0 +1,32 @@
+// import { __ExtractAll__,__RemoveAll__ } from "./__helpers__/index.js";
+
+// [
+//     App,
+//     Math,
+//     UI,
+//     Time,
+//     Data,
+//     Reactivity,
+//     Graphics,
+// ].forEach(n=>Object.assign(n,{
+//     ExtractAll:()=>__ExtractAll__(n),
+//     RemoveAll:()=>__RemoveAll__(n)
+// }))
+
+// function ExtractAll(){
+//     UI.ExtractAll();
+//     Math.ExtractAll();
+//     Time.ExtractAll();
+//     Reactivity.ExtractAll();
+//     Graphics.ExtractAll();
+//     Data.ExtractAll()
+//     return this;
+// }
+// function RemoveAll(){
+//     UI.RemoveAll();
+//     Math.RemoveAll();
+//     Time.RemoveAll();
+//     Reactivity.RemoveAll();
+//     Graphics.RemoveAll();
+//     Data.RemoveAll()
+// }

package/src/time/{animation.js → animation/index.js}

@@ -1,5 +1,5 @@
-import { Ease } from "./utils";
-import { map } from "../math/utils"
+import { Ease } from "../utils";
+import { map } from "../../math/utils"
 class ZikoTimeAnimation{
     constructor(callback,ease=Ease.Linear,step=50,{t=[0,null],start=true,duration=3000}={}){
         this.cache={

package/src/time/decorators/index.js

@@ -0,0 +1,17 @@
+const debounce=(fn,delay=1000)=>{
+    let id;
+    return(...args) => id ? clearTimeout(id) : setTimeout(()=>fn(...args),delay);
+}
+const throttle=(fn,delay)=>{
+    let lastTime=0;
+    return (...args) => {
+        const now = new Date().getTime()
+        if(now-lastTime < delay) return;
+        lastTime = now;
+        fn(...args); 
+    }
+}
+export{
+    debounce,
+    throttle
+}

package/src/time/index.js

@@ -1,12 +1,11 @@
-export * from "./loop.js"
-export * from "./animation.js"
-export * from "./utils";
-import * as Loop from "./loop.js";
-import * as Animation from "./loop.js";
-import * as Utils from "./utils"
-const Time = {
-    ...Loop,
-    ...Animation,
-    ...Utils
-}
-export default Time
+export * from './loop/index.js'
+export * from './animation/index.js'
+export * from './utils/index.js';
+export * from './decorators/index.js';
+// import * as Utils from './utils'
+// const Time = {
+//     ...Loop,
+//     ...Animation,
+//     ...Utils
+// }
+// export default Time

package/src/time/utils/index.js

@@ -13,6 +13,5 @@ export{
     timeTaken,
     Ease
 }
-export * from "./decorators.js";
 export * from "./performance.js";
 export * from "./ui.js"

package/src/ui/{methods → __methods__}/dom.js

@@ -1,4 +1,4 @@
-import { text } from "../elements/text/text.js";
+import { text } from "../text/index.js";
 export const DomMethods = {
   append(...ele) {
     __addItem__.call(this, "append", "push", ...ele);
@@ -75,24 +75,25 @@ function __addItem__(adder, pusher, ...ele) {
   }
   for (let i = 0; i < ele.length; i++) {
     if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
-    if (typeof globalThis?.Node === "function" && ele[i] instanceof globalThis?.Node) ele[i] = new this.constructor(ele[i]);
-    if (ele[i]?.isZikoUIElement) {
-        ele[i].cache.parent = this;
-        this.element[adder](ele[i].element);
-        ele[i].target = this.element;
-        this.items[pusher](ele[i]);
-    } 
-    // Fix Items Latter
-    if( ele[i] instanceof Function){
-      const getter = ele[i]();
+        // Fix Items Latter
+    if (ele[i] instanceof Function) {
+     const getter = ele[i]();
       if (getter.isStateGetter) {
-        const textNode = document?.createTextNode(getter.value);
-        this.element.appendChild(textNode);
+        ele[i] = text(getter.value);
         getter._subscribe(
-          (newValue) => (textNode.textContent = newValue),
+            (newValue) => (ele[i].element.textContent = newValue),
+            ele[i] 
         );
+        // this.element.appendChild(textNode);
       }
     }
+    if (typeof globalThis?.Node === "function" && ele[i] instanceof globalThis?.Node) ele[i] = new this.constructor(ele[i]);
+    if (ele[i]?.isZikoUINode) {
+        ele[i].cache.parent = this;
+        this.element?.[adder](ele[i].element);
+        ele[i].target = this.element;
+        this.items[pusher](ele[i]);
+    } 
     else if (ele[i] instanceof Object) {
       if (ele[i]?.style) this.style(ele[i]?.style);
       if (ele[i]?.attr) {

package/src/ui/{utils → __utils__}/index.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../constructors/ziko-ui-element.js";
+import ZikoUIElement from "../constructors/ZikoUIElement.js";
 const Id = (a) => document.getElementById(a);
 const Class = (a) => [...document.getElementsByClassName(a)];
 const $=(...selector)=>{

package/src/ui/constructors/{ziko-ui-element.js → ZikoUIElement.js}

@@ -1,10 +1,10 @@
-import ZikoUINode from "./ziko-ui-node.js";
+import ZikoUINode from "./ZikoUINode.js";
 import { compose } from "../../__helpers__/index.js";
-import { DomMethods } from "../methods/dom.js";
-import { IndexingMethods } from "../methods/indexing.js";
-import { EventsMethodes } from "../methods/events.js";
+import { DomMethods } from "../__methods__/dom.js";
+import { IndexingMethods } from "../__methods__/indexing.js";
+import { EventsMethodes } from "../__methods__/events.js";
 import { ZikoUseStyle } from "../../reactivity/hooks/UI/useStyle.js";
-import { ZikoUIElementStyle } from "../style/index.js";
+import { ZikoUIElementStyle } from "./style/index.js";
 import { 
   useCustomEvent,
   useSwipeEvent,
@@ -15,6 +15,7 @@ import {
 } from "../../reactivity/index.js"
 import { Random } from "../../math/index.js";
 import { Str } from "../../data/index.js";
+import '../../__ziko__/index.js';
 class ZikoUIElement extends ZikoUINode{
   constructor(element, name="", {el_type="html", useDefaultStyle=false}={}){
     super()
@@ -105,7 +106,6 @@ class ZikoUIElement extends ZikoUINode{
   isInteractive(){
     return this.cache.isInteractive;
   }
-  // Remove get
   isZikoUIElement(){
     return true;
   }
@@ -183,82 +183,6 @@ class ZikoUIElement extends ZikoUINode{
       });
     }
   }
-  filter(condition_callback, if_callback = () => {}, else_callback = () => {}) {
-    const FilterItems = this.items.filter(condition_callback);
-    FilterItems.forEach(if_callback);
-    this.items
-      .filter((item) => !FilterItems.includes(item))
-      .forEach(else_callback);
-    return this;
-  }
-  filterByTextContent(text, exactMatch = false) {
-    this.items.forEach((n) => n.render());
-    this.filter(
-      (n) => !(exactMatch ? n.text === text : n.text.includes(text)),
-      (e) => e.unrender(),
-    );
-    // this.items.filter(n=>{
-    //   const content=n.element.textContent;
-    //   return !(exactMatch?content===text:content.includes(text))
-    // }).map(n=>n.unrender());
-    //  return this;
-  }
-  filterByClass(value) {
-    this.items.map((n) => n.render());
-    this.items
-      .filter((n) => !n.classes.includes(value))
-      .map((n) => n.unrender());
-    return this;
-  }
-  sortByTextContent(value, displays) {
-    let item = this.children;
-    item
-      .filter((n) => !n.textContent.toLowerCase().includes(value.toLowerCase()))
-      .map((n) => {
-        n.style.display = "none";
-      });
-    item
-      .filter((n) => n.textContent.toLowerCase().includes(value.toLowerCase()))
-      .map((n, i) => (n.style.display = displays[i]));
-    //return item.filter(n=>n.style.display!="none")
-    item.filter((n) => n.style.display != "none");
-    return this;
-  }
-  get #SwitchedStyleRTL_LTR(){
-    const CalculedStyle = globalThis.getComputedStyle(this.element); 
-    const SwitchedStyle = {}
-    if(CalculedStyle.marginRight!=="0px")Object.assign(SwitchedStyle, {marginLeft: CalculedStyle.marginRight});
-    if(CalculedStyle.marginLeft!=="0px")Object.assign(SwitchedStyle, {marginRight: CalculedStyle.marginLeft});
-    if(CalculedStyle.paddingRight!=="0px")Object.assign(SwitchedStyle, {paddingLeft: CalculedStyle.paddingRight});
-    if(CalculedStyle.paddingLeft!=="0px")Object.assign(SwitchedStyle, {paddingRight: CalculedStyle.paddingLeft});
-    if(CalculedStyle.left!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.left});
-    if(CalculedStyle.right!=="0px")Object.assign(SwitchedStyle, {left: CalculedStyle.right});
-    if(CalculedStyle.textAlign === "right")Object.assign(SwitchedStyle, {textAlign: "left"});
-    if(CalculedStyle.textAlign === "left")Object.assign(SwitchedStyle, {textAlign: "right"});
-    if(CalculedStyle.float === "right")Object.assign(SwitchedStyle, {float: "left"});
-    if(CalculedStyle.float === "left")Object.assign(SwitchedStyle, {float: "right"});
-    if(CalculedStyle.borderRadiusLeft!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.borderRadiusRight});
-    if(CalculedStyle.borderRadiusRight!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.borderRadiusLeft});
-    if(["flex","inline-flex"].includes(CalculedStyle.display)){
-      if(CalculedStyle.justifyContent === "flex-end")Object.assign(SwitchedStyle, {justifyContent: "flex-start"});
-      if(CalculedStyle.justifyContent === "flex-start")Object.assign(SwitchedStyle, {justifyContent: "flex-end"});
-    }
-    return SwitchedStyle;
-  }
-  useRtl(switchAll = false){
-    switchAll ? this.style({
-      ...this.#SwitchedStyleRTL_LTR,
-      direction : "rtl"
-    }) : this.style({direction : "rtl"}); 
-    return this;
-  }
-  useLtr(switchAll = false){
-    switchAll ? this.style({
-      ...this.#SwitchedStyleRTL_LTR,
-      direction : "ltr"
-    }) : this.style({direction : "ltr"}); 
-    return this;
-  }
   freeze(freeze){
     this.cache.isFrozzen=freeze;
     return this;
@@ -280,9 +204,9 @@ class ZikoUIElement extends ZikoUINode{
   }
     // Attributes
   #setAttr(name, value){
-    if(this.element.tagName !== "svg") name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
+    if(this.element?.tagName !== "svg") name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
     if(this?.attr[name] && this?.attr[name]===value) return;
-    this.element.setAttribute(name, value)
+    this.element?.setAttribute(name, value)
     Object.assign(this.cache.attributes, {[name]:value});
   }
   setAttr(name, value) {
@@ -380,19 +304,6 @@ class ZikoUIElement extends ZikoUINode{
     this.observer.intersection.start();
     return this;
   }
-  // setFullScreen(set = true, e) {
-  //   if(!this.element.requestFullscreen){
-  //     console.error("Fullscreen API is not supported in this browser.");
-  //     return this;
-  //   }
-  //   if (set) this.element.requestFullscreen(e);
-  //   else globalThis.document.exitFullscreen();
-  //   return this;
-  // }
-  // toggleFullScreen(e) {
-  //   if (!globalThis.document.fullscreenElement) this.element.requestFullscreen(e);
-  //   else globalThis.document.exitFullscreen();
-  //   return this;
-  // }
+
 }
 export default ZikoUIElement;

package/src/ui/constructors/ZikoUIElementMethodesToBeMoved.js

@@ -0,0 +1,96 @@
+class Ziko{
+get #SwitchedStyleRTL_LTR(){
+    const CalculedStyle = globalThis.getComputedStyle(this.element); 
+    const SwitchedStyle = {}
+    if(CalculedStyle.marginRight!=="0px")Object.assign(SwitchedStyle, {marginLeft: CalculedStyle.marginRight});
+    if(CalculedStyle.marginLeft!=="0px")Object.assign(SwitchedStyle, {marginRight: CalculedStyle.marginLeft});
+    if(CalculedStyle.paddingRight!=="0px")Object.assign(SwitchedStyle, {paddingLeft: CalculedStyle.paddingRight});
+    if(CalculedStyle.paddingLeft!=="0px")Object.assign(SwitchedStyle, {paddingRight: CalculedStyle.paddingLeft});
+    if(CalculedStyle.left!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.left});
+    if(CalculedStyle.right!=="0px")Object.assign(SwitchedStyle, {left: CalculedStyle.right});
+    if(CalculedStyle.textAlign === "right")Object.assign(SwitchedStyle, {textAlign: "left"});
+    if(CalculedStyle.textAlign === "left")Object.assign(SwitchedStyle, {textAlign: "right"});
+    if(CalculedStyle.float === "right")Object.assign(SwitchedStyle, {float: "left"});
+    if(CalculedStyle.float === "left")Object.assign(SwitchedStyle, {float: "right"});
+    if(CalculedStyle.borderRadiusLeft!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.borderRadiusRight});
+    if(CalculedStyle.borderRadiusRight!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.borderRadiusLeft});
+    if(["flex","inline-flex"].includes(CalculedStyle.display)){
+      if(CalculedStyle.justifyContent === "flex-end")Object.assign(SwitchedStyle, {justifyContent: "flex-start"});
+      if(CalculedStyle.justifyContent === "flex-start")Object.assign(SwitchedStyle, {justifyContent: "flex-end"});
+    }
+    return SwitchedStyle;
+  }
+  useRtl(switchAll = false){
+    switchAll ? this.style({
+      ...this.#SwitchedStyleRTL_LTR,
+      direction : "rtl"
+    }) : this.style({direction : "rtl"}); 
+    return this;
+  }
+  useLtr(switchAll = false){
+    switchAll ? this.style({
+      ...this.#SwitchedStyleRTL_LTR,
+      direction : "ltr"
+    }) : this.style({direction : "ltr"}); 
+    return this;
+
+    
+  }
+
+    filter(condition_callback, if_callback = () => {}, else_callback = () => {}) {
+    const FilterItems = this.items.filter(condition_callback);
+    FilterItems.forEach(if_callback);
+    this.items
+      .filter((item) => !FilterItems.includes(item))
+      .forEach(else_callback);
+    return this;
+  }
+  filterByTextContent(text, exactMatch = false) {
+    this.items.forEach((n) => n.render());
+    this.filter(
+      (n) => !(exactMatch ? n.text === text : n.text.includes(text)),
+      (e) => e.unrender(),
+    );
+    // this.items.filter(n=>{
+    //   const content=n.element.textContent;
+    //   return !(exactMatch?content===text:content.includes(text))
+    // }).map(n=>n.unrender());
+    //  return this;
+  }
+  filterByClass(value) {
+    this.items.map((n) => n.render());
+    this.items
+      .filter((n) => !n.classes.includes(value))
+      .map((n) => n.unrender());
+    return this;
+  }
+  sortByTextContent(value, displays) {
+    let item = this.children;
+    item
+      .filter((n) => !n.textContent.toLowerCase().includes(value.toLowerCase()))
+      .map((n) => {
+        n.style.display = "none";
+      });
+    item
+      .filter((n) => n.textContent.toLowerCase().includes(value.toLowerCase()))
+      .map((n, i) => (n.style.display = displays[i]));
+    //return item.filter(n=>n.style.display!="none")
+    item.filter((n) => n.style.display != "none");
+    return this;
+  }
+
+    // setFullScreen(set = true, e) {
+  //   if(!this.element.requestFullscreen){
+  //     console.error("Fullscreen API is not supported in this browser.");
+  //     return this;
+  //   }
+  //   if (set) this.element.requestFullscreen(e);
+  //   else globalThis.document.exitFullscreen();
+  //   return this;
+  // }
+  // toggleFullScreen(e) {
+  //   if (!globalThis.document.fullscreenElement) this.element.requestFullscreen(e);
+  //   else globalThis.document.exitFullscreen();
+  //   return this;
+  // }
+}

package/src/ui/{style → constructors/style}/index.js

@@ -1,6 +1,6 @@
-import { addSuffixeToNumber } from "../utils/index.js";
-import { Matrix,cos,sin} from "../../math/index.js";
-import { Str } from "../../data/index.js";
+import { addSuffixeToNumber } from "../../__utils__/index.js";
+import { Matrix,cos,sin} from "../../../math/index.js";
+import { Str } from "../../../data/index.js";
 class ZikoUIElementStyle{
     constructor(defaultStyle={}){
         this.target=null;

package/src/ui/{elements/flex → flex}/index.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../../constructors/ziko-ui-element.js";
+import ZikoUIElement from "../constructors/ZikoUIElement.js";
 class ZikoUIFlex extends ZikoUIElement {
   constructor(tag = "div", w = "100%", h = "100%") {
     super(tag ,"Flex");

package/src/{graphics/canvas/index.js → ui/graphics/canvas.js}

@@ -1,6 +1,5 @@
-import { ZikoUIElement } from "../../ui/index.js";
-import {Matrix} from "../../math/matrix/index.js"
-// import { convolute } from "../../math/signal/conv.js";
+import  ZikoUIElement from "../constructors/ZikoUIElement.js";
+import {Matrix} from "../../math/matrix/Matrix.js"
 class ZikoUICanvas extends ZikoUIElement{
     constructor(w,h){
         super("canvas","canvas");
@@ -8,12 +7,12 @@ class ZikoUICanvas extends ZikoUIElement{
         this.style({
             border:"1px red solid",
         })
-        this.transformMatrix=new Matrix([
+        this.transformMatrix = new Matrix([
             [1,0,0],
             [0,1,0],
             [0,0,1]
         ])
-        this.axisMatrix=new Matrix([
+        this.axisMatrix = new Matrix([
             [-10,-10],
             [10,10]
         ])

package/src/ui/graphics/index.js

@@ -0,0 +1,2 @@
+export * from './canvas.js'
+export * from './svg.js';

package/src/{graphics/svg/index.js → ui/graphics/svg.js}

@@ -1,4 +1,4 @@
-import { ZikoUIElement } from "../../ui/index.js";
+import ZikoUIElement  from "../constructors/ZikoUIElement.js";
 class ZikoUISvg extends ZikoUIElement {
     constructor(w=360,h=300) {
       super("svg","svg");

package/src/ui/{elements/grid → grid}/index.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../../constructors/ziko-ui-element.js"
+import ZikoUIElement from "../constructors/ZikoUIElement.js"
 class ZikoUIGrid extends ZikoUIElement {
     constructor(tag ="div", w = "50vw", h = "50vh") {
       super(tag,"Grid");

package/src/ui/index.js

@@ -1,40 +1,9 @@
-export * from "./elements/text/index.js";
-export * from "./elements/list/index.js";
-export * from "./elements/io/index.js";
-export * from "./elements/media/index.js";
-export * from "./elements/table/index.js";
-export * from "./elements/semantic/index.js";
-export * from "./elements/misc/index.js";
-export * from "./elements/flex/index.js";
-export * from "./elements/grid/index.js";
-export * from "./tags/index.js"
-
-import * as Text from "./elements/text/index.js";
-import * as List from "./elements/list/index.js";
-import * as Io from "./elements/io/index.js";
-import * as Media from "./elements/media/index.js";
-import * as Table from "./elements/table/index.js";
-import * as Semantic from "./elements/semantic/index.js";
-import * as Misc from "./elements/misc/index.js";
-import * as Flex from "./elements/flex/index.js";
-import * as Grid from "./elements/grid/index.js";
-
-
-import ZikoUIElement from "./constructors/ziko-ui-element.js";
-
-export{
-    ZikoUIElement
-}
-const UI = {
-    ...Text,
-    ...List,
-    ...Io,
-    ...Media,
-    ...Table,
-    ...Semantic,
-    ...Misc,
-    ...Flex,
-    ...Grid,
-    ZikoUIElement,
-}
-export default UI;
+export { default as ZikoUIElement } from "./constructors/ZikoUIElement.js"
+export { default as ZikoUINode } from "./constructors/ZikoUINode.js"
+export * from './tags/index.js';
+export * from './text/index.js';
+export * from './flex/index.js';
+export * from './grid/index.js';
+export * from './suspense/index.js';
+export * from './wrapper/index.js';
+export * from './graphics/index.js'

package/src/ui/{elements/misc/suspense.js → suspense/index.js}

@@ -1,18 +1,4 @@
-import ZikoUIElement from "../../constructors/ziko-ui-element.js";
-// function loadComponent() {
-//     return new Promise((resolve) => {
-//       setTimeout(() => {
-//         resolve(p(1000))
-//       }, 500);
-//     });
-//   }
-
-//   Suspense(p("Loading ..."),()=>fetch('https://jsonplaceholder.typicode.com/todos/1')
-//   .then(response => response.json())
-//   .then(json => h2(json.title)))
-
- 
-
+import ZikoUIElement from "../constructors/ZikoUIElement";
 class ZikoUISuspense extends ZikoUIElement{
     constructor(fallback_ui, callback){
         super("div", "suspense")

package/src/ui/tags/index.js

@@ -1,5 +1,5 @@
-import ZikoUIElement from "../constructors/ziko-ui-element.js";
-import { HTMLTags, SVGTags } from "./tags.js";
+import ZikoUIElement from "../constructors/ZikoUIElement.js";
+import { HTMLTags, SVGTags } from "./tags-list.js";
 const _h=(tag, type, attributes, ...children)=>{
     const { name, style, ...attrs } = attributes;
     let element = new ZikoUIElement(tag, name, type);
@@ -18,7 +18,7 @@ const tags = new Proxy({}, {
     if(HTMLTags.includes(tag)) return (...args)=>{
       if(!(args[0] instanceof ZikoUIElement) && args[0] instanceof Object){
         let attributes = args.shift()
-        console.log(args)
+        // console.log(args)
         return new ZikoUIElement(tag).setAttr(attributes).append(...args)
       }
       return new ZikoUIElement(tag).append(...args);