ziko 1.7.0 → 1.8.0

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Fri Aug 07 2026 20:07:58 GMT+0100 (UTC+01:00)
+  Date : Sun Aug 09 2026 11:06:22 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
@@ -3330,15 +3330,6 @@ const waitElm=(UIElement)=>{
     });
   };
 
-class UIView extends UIElement$1{
-    constructor(...items){
-        super({element : 'div', name : 'view'});
-        this.append(...items);
-    }
-}
-
-const View = (...items) => new UIView(...items);
-
 const HTMLTags = [
   'a',
   'abb',
@@ -3498,6 +3489,62 @@ const tags = new Proxy({}, {
   }
 });
 
+function define_wc(name, UI_Constructor, props = {}, { mode = 'open'} = {}) {
+    if (globalThis.customElements?.get(name)) {
+        console.warn(`Custom element "${name}" is already defined`);
+        return;
+    }
+    if(name.search('-') === -1){
+        console.warn(`"${name}" is not a valid custom element name`);
+        return; 
+    }
+    globalThis.customElements?.define(
+        name,
+        class extends HTMLElement {
+            static get observedAttributes() {
+                return ['style', ...Object.keys(props)];
+            }
+
+            constructor() {
+                super();
+                this.attachShadow({ mode });
+                this.props = {};
+                this.mask = {
+                    ...props,
+                    // style: { type: Object }
+                };
+            }
+
+            connectedCallback() {
+                this.render();
+            }
+
+            render() {
+                this.shadowRoot.innerHTML = '';
+                const item = UI_Constructor(this.props);
+                if(item instanceof Array) item.forEach(n => n.mount(this.shadowRoot)); 
+                else item.mount(this.shadowRoot);
+            }
+
+            attributeChangedCallback(name, _, newValue) {
+                Object.assign(this.props, {
+                    [name]: this.mask[name].type(newValue)
+                });
+                this.render();
+            }
+        }
+    );
+}
+
+class UIView extends UIElement$1{
+    constructor(...items){
+        super({element : 'div', name : 'view'});
+        this.append(...items);
+    }
+}
+
+const View = (...items) => new UIView(...items);
+
 function set_vertical(direction){
   direction == 1
     ? this.style({ flexDirection: "column" })
@@ -3603,7 +3650,7 @@ class UIElement extends UIElementCore{
     }
 }
 
-class ZikoUISuspense extends UIElement{
+class UISuspense extends UIElement{
     constructor(fallback_ui, callback){
         super({element : "div", name : "suspense"});
         this.setAttr({
@@ -3624,148 +3671,7 @@ class ZikoUISuspense extends UIElement{
     }
 }
 
-const Suspense = (fallback_ui, callback) => new ZikoUISuspense(fallback_ui, callback);
-
-class UIHTMLWrapper extends UIElement$1 {
-    constructor(content){
-        super({element : 'div', name : 'html_wrappper'});
-        this.element.append(html2dom(content));
-        this.style({
-            display : 'contents'
-        });
-    }
-}
-
-function html2dom(htmlString) {
-    if(globalThis?.DOMParser){
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(`<div>${htmlString}</div>`, 'text/html');
-        doc.body.firstChild.style.display = "contents";
-        return doc.body.firstChild;
-    }
-}
-
-const HTMLWrapper = (content) => new UIHTMLWrapper(content);
-
-class UISVGWrapper extends UIElement$1 {
-    constructor(content){
-        super({element : 'div', name : 'html_wrappper'});
-        this.element.append(svg2dom(content));
-        this.style({
-            display : 'contents'
-        });
-    }
-}
-
-function svg2dom(svgString) {
-  if (typeof DOMParser !== "undefined") {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(svgString.trim(), "image/svg+xml");
-    const svg = doc.documentElement;
-
-    if (svg.nodeName === "parsererror") {
-      throw new Error("Invalid SVG string");
-    }
-    if(svg.hasAttribute('xmlns')) return svg
-    // TO Fix ...
-    const {children, attributes} = svg;
-    const element = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    for(let {name, value} of attributes){
-      element.setAttribute(name, value);
-    }
-    element.append(...children);
-
-    globalThis.svg = svg;
-    globalThis.children = children; 
-    globalThis.attributes = attributes;
-    globalThis.element = element;
-    return element;
-  }
-  throw new Error("DOMParser is not available in this environment");
-}
-
-
-
-const SVGWrapper = (content) => new UISVGWrapper(content);
-
-function define_wc(name, UI_Constructor, props = {}, { mode = 'open'} = {}) {
-    if (globalThis.customElements?.get(name)) {
-        console.warn(`Custom element "${name}" is already defined`);
-        return;
-    }
-    if(name.search('-') === -1){
-        console.warn(`"${name}" is not a valid custom element name`);
-        return; 
-    }
-    globalThis.customElements?.define(
-        name,
-        class extends HTMLElement {
-            static get observedAttributes() {
-                return ['style', ...Object.keys(props)];
-            }
-
-            constructor() {
-                super();
-                this.attachShadow({ mode });
-                this.props = {};
-                this.mask = {
-                    ...props,
-                    // style: { type: Object }
-                };
-            }
-
-            connectedCallback() {
-                this.render();
-            }
-
-            render() {
-                this.shadowRoot.innerHTML = '';
-                const item = UI_Constructor(this.props);
-                if(item instanceof Array) item.forEach(n => n.mount(this.shadowRoot)); 
-                else item.mount(this.shadowRoot);
-            }
-
-            attributeChangedCallback(name, _, newValue) {
-                Object.assign(this.props, {
-                    [name]: this.mask[name].type(newValue)
-                });
-                this.render();
-            }
-        }
-    );
-}
-
-class UISwitch extends UIElement$1{
-    constructor(key, cases){
-        super();
-        this.key = key; 
-        this.cases = cases;
-        this.init();
-    }
-    init(){
-        Object.values(this.cases).filter(n=>n != this.current).forEach(n=>n.unmount());
-        super.init(this.current.element);
-    }
-    get current(){
-        const matched = Object.keys(this.cases).find(n => n == this.key) ?? 'default';
-        return this.cases[matched]
-    }
-    updateKey(key){
-        this.key = key;
-        this.replaceElementWith(this.current.element);
-        // this.cache.element.replaceWith(this.current.element)
-        // this.cache.element = this.current.element;
-        return this;
-    }
-    
-}
-
-const Switch=({key, cases})=> new UISwitch(key, cases);
-
-// export const Switch=({key, cases}) => {
-//     const matched = Object.keys(cases).find(n => n == key) ?? 'default';
-//     return this.cases[matched]()
-// }
+const Suspense = (fallback_ui, callback) => new UISuspense(fallback_ui, callback);
 
 class UISwap extends UIElement$1 {
     #DISPLAYS_MAP = new WeakMap()
@@ -3857,6 +3763,335 @@ class UIFor extends UIFragment{
 
 const For = ({each, fallback, mapFn} = {}) => new UIFor({each, fallback, mapFn});
 
+class UISwitch extends UIElement$1{
+    constructor(key, cases){
+        super();
+        this.key = key; 
+        this.cases = cases;
+        this.init();
+    }
+    init(){
+        Object.values(this.cases).filter(n=>n != this.current).forEach(n=>n.unmount());
+        super.init(this.current.element);
+    }
+    get current(){
+        const matched = Object.keys(this.cases).find(n => n == this.key) ?? 'default';
+        return this.cases[matched]
+    }
+    updateKey(key){
+        this.key = key;
+        this.replaceElementWith(this.current.element);
+        // this.cache.element.replaceWith(this.current.element)
+        // this.cache.element = this.current.element;
+        return this;
+    }
+    
+}
+
+const Switch=({key, cases})=> new UISwitch(key, cases);
+
+// export const Switch=({key, cases}) => {
+//     const matched = Object.keys(cases).find(n => n == key) ?? 'default';
+//     return this.cases[matched]()
+// }
+
+class UIHTMLWrapper extends UIElement$1 {
+    constructor(content){
+        super({element : 'div', name : 'html_wrappper'});
+        this.element.append(html2dom(content));
+        this.style({
+            display : 'contents'
+        });
+    }
+}
+
+function html2dom(htmlString) {
+    if(globalThis?.DOMParser){
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(`<div>${htmlString}</div>`, 'text/html');
+        doc.body.firstChild.style.display = "contents";
+        return doc.body.firstChild;
+    }
+}
+
+const HTMLWrapper = (content) => new UIHTMLWrapper(content);
+
+class UISVGWrapper extends UIElement$1 {
+    constructor(content){
+        super({element : 'div', name : 'html_wrappper'});
+        this.element.append(svg2dom(content));
+        this.style({
+            display : 'contents'
+        });
+    }
+}
+
+function svg2dom(svgString) {
+  if (typeof DOMParser !== "undefined") {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svgString.trim(), "image/svg+xml");
+    const svg = doc.documentElement;
+
+    if (svg.nodeName === "parsererror") {
+      throw new Error("Invalid SVG string");
+    }
+    if(svg.hasAttribute('xmlns')) return svg
+    // TO Fix ...
+    const {children, attributes} = svg;
+    const element = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    for(let {name, value} of attributes){
+      element.setAttribute(name, value);
+    }
+    element.append(...children);
+
+    globalThis.svg = svg;
+    globalThis.children = children; 
+    globalThis.attributes = attributes;
+    globalThis.element = element;
+    return element;
+  }
+  throw new Error("DOMParser is not available in this environment");
+}
+
+
+
+const SVGWrapper = (content) => new UISVGWrapper(content);
+
+class UICanvas extends UIElement$1{
+    constructor(w,h){
+        super("canvas","canvas");
+        this.ctx = this.element?.getContext("2d");
+        this.style({
+            border:"1px red solid",
+        });
+        this.transformMatrix = new Matrix([
+            [1,0,0],
+            [0,1,0],
+            [0,0,1]
+        ]);
+        this.axisMatrix = new Matrix([
+            [-10,-10],
+            [10,10]
+        ]);
+        // setTimeout(()=>this.resize(w,h),0);
+        requestAnimationFrame(()=>this.resize(w,h),0);
+        this.on("sizeupdated",()=>this.adjust());
+    }
+    get Xmin(){
+        return this.axisMatrix[0][0];
+    }
+    get Ymin(){
+        return this.axisMatrix[0][1];
+    }
+    get Xmax(){
+        return this.axisMatrix[1][0];
+    }
+    get Ymax(){
+        return this.axisMatrix[1][1];
+    }
+    get ImageData(){
+        return this.ctx.getImageData(0,0,c.Width,c.Height);
+    }
+    draw(all=true){
+        if(all){
+            this.clear();  
+            this.items.forEach(element => {
+                element.parent=this;
+                element.draw(this.ctx);
+            });
+        }
+        else {
+            this.items.at(-1).parent=this;
+            this.items.at(-1).draw(this.ctx);
+        }
+        this.maintain();
+        return this;
+    }
+    applyTransformMatrix(){
+        this.ctx.setTransform(
+            this.transformMatrix[0][0],
+            this.transformMatrix[1][0],
+            this.transformMatrix[0][1],
+            this.transformMatrix[1][1],
+            this.transformMatrix[0][2],
+            this.transformMatrix[1][2],
+        );
+        return this;
+    }
+    resize(w,h){
+        this.size(w,h);
+        this.lineWidth();
+        this.view(this.axisMatrix[0][0], this.axisMatrix[0][1], this.axisMatrix[1][0], this.axisMatrix[1][1]);
+        this.emit("sizeupdated");
+        return this;
+    }
+    adjust(){
+        this.element.width =this.element?.getBoundingClientRect().width;
+        this.element.height =this.element?.getBoundingClientRect().height;
+        this.view(this.axisMatrix[0][0], this.axisMatrix[0][1], this.axisMatrix[1][0], this.axisMatrix[1][1]);
+        return this;
+    }
+    view(xMin,yMin,xMax,yMax){
+        this.transformMatrix[0][0]=this.width/(xMax-xMin); // scaleX
+        this.transformMatrix[1][1]=-this.height/(yMax-yMin); // scaleY
+        this.transformMatrix[0][2]=this.width/2;
+        this.transformMatrix[1][2]=this.height/2;
+        this.axisMatrix=new Matrix([
+            [xMin,yMin],
+            [xMax,yMax]
+        ]);
+        
+        this.applyTransformMatrix(); 
+        this.clear();
+        this.lineWidth(1);
+        this.draw();
+        return this;
+    }
+    reset(){
+        this.ctx.setTransform(1,0,0,0,0,0);
+        return this;
+    }
+    append(element){
+        this.items.push(element);
+        this.draw(false);
+        return this;
+    }
+    background(color){
+        this.ctx.fillStyle = color;
+        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+        this.ctx.fillRect(0, 0, this.width, this.height);
+        this.applyTransformMatrix();
+        this.draw();
+    }
+    lineWidth(w){
+        this.ctx.lineWidth=w/this.transformMatrix[0][0];
+        return this
+    }
+    getImageData(x=0,y=0,w=this.width,h=this.height){
+        return this.ctx.getImageData(x,y,w,h);
+    }
+    clear(){
+        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+        this.ctx.clearRect(0, 0, this.width, this.height);
+        this.applyTransformMatrix(); 
+        return this;
+    }
+    clone(){
+        console.log(this.width);
+        const canvas=new UICanvas();
+        canvas.items=this.items;
+        canvas.transformMatrix=this.transformMatrix;
+        canvas.axisMatrix=this.axisMatrix;
+        Object.assign(canvas.cache,{...this.cache});
+        //waitForUIElm(this)
+        //console.log(element)
+        this.size(this.element.style.width,this.element.style.width);
+        this.applyTransformMatrix();
+        this.draw();
+        this.adjust();
+        return canvas;
+    }
+    toImage() {
+        this.img = document?.createElement("img");
+        this.img.src = this.element?.toDataURL("image/png");
+        return this;
+    }
+    toBlob() {
+        var canvas = this.element;
+        canvas.toBlob(function (blob) {
+            var newImg = document?.createElement("img"),
+                url = URL.createObjectURL(blob);
+            newImg.onload = function () {
+                URL.revokeObjectURL(url);
+            };
+            newImg.src = url;
+            console.log(newImg);
+        });
+    }
+    zoomIn(){
+
+    }
+    zoomOut(){
+        
+    }
+    undo(n){
+
+    }
+    redo(n){
+
+    }
+    stream(){
+
+    }
+}
+
+const Canvas=(w,h)=>new UICanvas(w,h);
+
+class UISvg extends UIElement$1 {
+    constructor(w=360,h=300) {
+      super("svg","svg");
+      //this.cache={};
+      // this.setAttr("width",w);
+      // this.setAttr("height",h);
+      // this.setAttr({
+      //   width : w,
+      //   height : h
+      // })
+      this.style({border:"1px black solid"});
+      //this.view(-w/2,-h/2,w/2,h/2);
+      this.size(w, h);
+      this.view(-10,-10,10,10);
+    }
+    size(w, h){
+      this.setAttr({
+        width : w,
+        height : h
+      });
+      return this
+    }
+    view(x1,y1,x2,y2){
+      let width=Math.abs(x2-x1);
+      let height=Math.abs(y2-y1);
+      this.setAttr("viewBox",[x1,y1,width,height].join(" "));
+      this.st.scaleY(-1);
+      return this;
+    }
+    add(...svgElement){
+      for(let i=0;i<svgElement.length;i++){
+        this.element.append(svgElement[i].element);
+        this.items.push(svgElement[i]);
+      }
+      this.maintain();
+      return this;
+    }
+    remove(...svgElement){
+      for(let i=0;i<svgElement.length;i++){
+        this.element?.removeChild(svgElement[i].element);
+        this.items=this.items.filter(n=>!svgElement);
+      }
+      this.maintain();
+      return this;     
+    }
+    mask(){
+  
+    }
+    toString(){
+      return  (new XMLSerializer()).serializeToString(this.element);
+    }
+    btoa(){
+      return btoa(this.toString())
+    }
+    toImg(){
+      return 'data:image/svg+xml;base64,'+this.btoa()
+    }
+    toImg2(){
+      return "data:image/svg+xml;charset=utf8,"+this.toString().replaceAll("<","%3C").replaceAll(">","%3E").replaceAll("#","%23").replaceAll('"',"'");
+    }
+    
+  }
+
+  const Svg =(w,h)=>new UISvg(w,h);
+
 const { PI, sqrt: sqrt$1, cos: cos$2, sin: sin$2, acos, pow } = Math;
 
 const linear = t => t;
@@ -4871,6 +5106,45 @@ const useReactive = (nested_value) => mapfun(
     nested_value
 );
 
+const useEffect = (callback, deps = []) =>{
+    const states = deps.filter(isStateGetter);
+
+    let cleanup;
+
+    const execute = () => {
+        // Cleanup previous effect
+        if (typeof cleanup === "function") {
+            cleanup();
+        }
+
+        // Read current state values
+        const values = states.map(state => state().value);
+
+        // Execute effect
+        cleanup = callback(...values);
+    };
+
+    // Subscribe to states
+    const unsubscribers = states.map(state =>
+        state()._subscribe(execute)
+    );
+
+    // Initial execution
+    execute();
+
+    // Return effect cleanup
+    return () => {
+        unsubscribers.forEach(unsubscribe => {
+            unsubscribe();
+        });
+
+        if (typeof cleanup === "function") {
+            cleanup();
+            cleanup = undefined;
+        }
+    };
+};
+
 class UseThread {
     #worker;
     #callbacks = new Map();
@@ -5293,4 +5567,4 @@ if(globalThis?.document){
     document?.addEventListener("DOMContentLoaded", __Ziko__.__Config__.init());
 }
 
-export { App, ClickAwayEvent, ClickListeners, Clock, CloneElement, Complex, E, EPSILON, EventController, FileBasedRouting, Flex, For, Fragment, HTMLWrapper, KeyListeners, Matrix, PI$1 as PI, PtrListeners, Random, SPA, STATE_GETTER, SVGWrapper, Scheduler, Suspense, Swap, SwipeEvent, Switch, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement$1 as UIElement, UIFlex, UIFragment, UIHTMLWrapper, UINode, UISVGWrapper, UISwap, UISwitch, UIView, UseRoot, UseThread, View, ViewEvent, ViewListeners, ZikoApp, ZikoSPA, ZikoUISuspense, ZikoUIText, abs, accum_max, accum_min, accum_prod, accum_product, 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, contraharmonic_mean, cos$3 as cos, cosh$2 as cosh, coth, croot, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, discret, div, elastic, ema, exp$1 as exp, floor, fract, geo_mean, harmonic_mean, 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, interquartile_mean, iqr, isStateGetter, is_primitive, 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, midhinge, midrange, min, modulo, mul, nand, nor, norm, normalize_css_value, not, nthr, or, out_back, out_bounce, out_circ, out_cubic, out_elastic, out_expo, out_quad, out_quart, out_quint, out_sin, parseXML, parse_props, percentile, pow$1 as pow, power_mean, q1, q3, rad2deg, register_click_away_event, register_swipe_event, register_view_event, remove_class, rms, rolling_std, rolling_variance, round, sample_std, sample_variance, script, sec, sig, sign, sin$3 as sin, sinh$1 as sinh, sleep, sma, 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, trimmed_mean, trunc, useDerived, useEventEmitter, useIPC, useLocalStorage, useMediaQuery, useQueryParams, useReactive, useRoot, useSessionStorage, useState, useThread, useTitle, variance, wait, waitElm, waitForUIElm, waitForUIElmSync, watchQueryParams, weighted_mean, weighted_std, weighted_variance, winsorized_mean, wma, xnor, xor };
+export { App, Canvas, ClickAwayEvent, ClickListeners, Clock, CloneElement, Complex, E, EPSILON, EventController, FileBasedRouting, Flex, For, Fragment, HTMLWrapper, KeyListeners, Matrix, PI$1 as PI, PtrListeners, Random, SPA, STATE_GETTER, SVGWrapper, Scheduler, Suspense, Svg, Swap, SwipeEvent, Switch, Tick, TimeAnimation, TimeLoop, TimeScheduler, UICanvas, UIElement$1 as UIElement, UIFlex, UIFragment, UIHTMLWrapper, UINode, UISVGWrapper, UISuspense, UISvg, UISwap, UISwitch, UIView, UseRoot, UseThread, View, ViewEvent, ViewListeners, ZikoApp, ZikoSPA, ZikoUIText, abs, accum_max, accum_min, accum_prod, accum_product, 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, contraharmonic_mean, cos$3 as cos, cosh$2 as cosh, coth, croot, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, discret, div, elastic, ema, exp$1 as exp, floor, fract, geo_mean, harmonic_mean, 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, interquartile_mean, iqr, isStateGetter, is_primitive, 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, midhinge, midrange, min, modulo, mul, nand, nor, norm, normalize_css_value, not, nthr, or, out_back, out_bounce, out_circ, out_cubic, out_elastic, out_expo, out_quad, out_quart, out_quint, out_sin, parseXML, parse_props, percentile, pow$1 as pow, power_mean, q1, q3, rad2deg, register_click_away_event, register_swipe_event, register_view_event, remove_class, rms, rolling_std, rolling_variance, round, sample_std, sample_variance, script, sec, sig, sign, sin$3 as sin, sinh$1 as sinh, sleep, sma, 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, trimmed_mean, trunc, useDerived, useEffect, useEventEmitter, useIPC, useLocalStorage, useMediaQuery, useQueryParams, useReactive, useRoot, useSessionStorage, useState, useThread, useTitle, variance, wait, waitElm, waitForUIElm, waitForUIElmSync, watchQueryParams, weighted_mean, weighted_std, weighted_variance, winsorized_mean, wma, xnor, xor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "1.7.0",
+  "version": "1.8.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/dom/{flex → components/Flex}/index.js

@@ -1,4 +1,4 @@
-import { UIElement } from "../constructors/UIElement.js";
+import { UIElement } from "../../constructors/UIElement.js";
 import { 
   set_vertical,
   set_horizontal,

package/src/dom/components/{for → For}/index.js

@@ -1,4 +1,4 @@
-import { Fragment, UIFragment } from "../fragment/index.js";
+import { Fragment, UIFragment } from "../Fragment/index.js";
 
 class UIFor extends UIFragment{
     constructor({each, fallback, mapFn = () => {}} = {}){

package/src/dom/{suspense → components/Suspense}/index.js

@@ -1,5 +1,5 @@
-import {UIElement} from "../mini/UIElement.js";
-class ZikoUISuspense extends UIElement{
+import {UIElement} from "../../mini/UIElement.js";
+export class UISuspense extends UIElement{
     constructor(fallback_ui, callback){
         super({element : "div", name : "suspense"})
         this.setAttr({
@@ -20,8 +20,4 @@ class ZikoUISuspense extends UIElement{
     }
 }
 
-const Suspense = (fallback_ui, callback) => new ZikoUISuspense(fallback_ui, callback);
-export{
-    ZikoUISuspense,
-    Suspense
-}
+export const Suspense = (fallback_ui, callback) => new UISuspense(fallback_ui, callback);

package/src/dom/components/View/index.js

@@ -0,0 +1,9 @@
+import { UIElement } from "../../constructors/UIElement.js";
+export class UIView extends UIElement{
+    constructor(...items){
+        super({element : 'div', name : 'view'})
+        this.append(...items)
+    }
+}
+
+export const View = (...items) => new UIView(...items);