ziko 1.6.1 → 1.8.0

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Fri Jul 31 2026 17:26:32 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
@@ -11,11 +11,11 @@
 const { PI: PI$1, E } = Math;
 const EPSILON=Number.EPSILON;
 
-const is_primitive = value => typeof value !== 'object' && typeof value !== 'function' || value === null;
+const is_primitive$1 = value => typeof value !== 'object' && typeof value !== 'function' || value === null;
 
 const mapfun$1=(fun,...X)=>{
     const Y=X.map(x=>{
-        if(is_primitive(x) || x?.__mapfun__) return fun(x)
+        if(is_primitive$1(x) || x?.__mapfun__) return fun(x)
         if(x instanceof Array) return x.map(n=>mapfun$1(fun,n));
         if(ArrayBuffer.isView(x)) return x.map(n=>fun(n));
         if(x instanceof Set) return new Set(mapfun$1(fun,...[...x]));
@@ -2227,12 +2227,39 @@ function __init__global__(){
     }
 }
 
+const parse_props = (props = {}) => {
+
+    const result = {
+        methods: {},
+        events: {},
+        style: {},
+        attrs: {}
+    };
+
+    for (const [key, value] of Object.entries(props)) {
+        if (key === "style") {
+            result.style = value;
+        }
+        else if (key.startsWith("$")) {
+            result.methods[key.slice(1)] = value;
+        }
+        else if (/^on[A-Z]/.test(key)) {
+            result.events[key] = value;
+        }
+        else {
+            result.attrs[key] = value;
+        }
+    }
+
+    return result;
+};
+
 __init__global__();
 class UIElementCore extends UINode{
   constructor(){
     super();
   }
-  init(element, name, type, render){
+  init({element, name, type, render, props = {}, items = []} = {}){
     this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
     if(typeof element === "string") {
       switch(type){
@@ -2280,9 +2307,26 @@ class UIElementCore extends UINode{
     };
     if(element) Object.assign(this.cache,{element});
     this.items = new UIStore();
-    globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
+    globalThis.__Ziko__.__UI__[this.cache.name]
+      ? globalThis.__Ziko__.__UI__[this.cache.name]?.push(this)
+      : globalThis.__Ziko__.__UI__[this.cache.name]=[this];
     element && render && this?.render?.();
     globalThis.__Ziko__.__UI__.push(this);
+
+    // console.log({props})
+    const parsed_props = parse_props(props);
+
+    this.parsed_props = parsed_props;
+
+    this.style(parsed_props.style);
+    this.setAttr(parsed_props.attrs);
+
+    const Events = Object.entries(parsed_props.events);
+
+    Events.forEach(([ev, callback]) => this[ev](callback.bind(this)));
+    
+
+    if(items.length > 0) this.append(...items);
   }
   get element(){
     return this.cache.element;
@@ -2390,8 +2434,9 @@ var LifecycleMethods = /*#__PURE__*/Object.freeze({
 
 // if (!globalThis.__Ziko__) __init__global__();
 
+const STATE_GETTER = Symbol.for("ziko.stateGetter");
+
 function useState(initialValue) {
-    
     const state = {
         value: initialValue,
         subscribers: new Set(),
@@ -2401,7 +2446,6 @@ function useState(initialValue) {
     function getValue() {
         return {
             value: state.value,
-            isStateGetter: () => true,
             _subscribe: (fn) => {
                 state.subscribers.add(fn);
                 return () => state.subscribers.delete(fn);
@@ -2409,6 +2453,8 @@ function useState(initialValue) {
         };
     }
 
+    getValue[STATE_GETTER] = true;
+
     function setValue(newValue) {
         if (state.paused) return;
 
@@ -2430,6 +2476,7 @@ function useState(initialValue) {
             if (typeof newValue === "function") {
                 newValue = newValue(state.value);
             }
+
             state.value = newValue;
             state.subscribers.forEach((fn) => fn(state.value));
         },
@@ -2439,9 +2486,7 @@ function useState(initialValue) {
     return [getValue, setValue, controller];
 }
 
-const isStateGetter = (arg) => {
-    return typeof arg === "function" && arg?.()?.isStateGetter?.() === true;
-};
+const isStateGetter = (arg) => typeof arg === "function" && arg[STATE_GETTER] === true;
 
 const camel2hyphencase = (text = '') => text.replace(/[A-Z]/g, match => '-' + match.toLowerCase());
 
@@ -2592,8 +2637,8 @@ async function __addItem__(adder, pusher, ...ele) {
     if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
         // Fix Items Latter
     if (ele[i] instanceof Function) {
-     const getter = ele[i]();
-      if (getter.isStateGetter) {
+      if (isStateGetter(ele[i])) {
+        const getter = ele[i]();
         ele[i] = text(getter.value);
         getter._subscribe(
             (newValue) => (ele[i].element.textContent = newValue),
@@ -3083,7 +3128,7 @@ function register_swipe_event(
 }
 
 let UIElement$1 = class UIElement extends UIElementCore{
-  constructor({element, name ='', type='html', render = __Ziko__.__Config__.default.render}={}){
+  constructor({element, name ='', type = 'html', render = __Ziko__.__Config__.default.render, props}={}){
     super();
     this.exp = {
       events : {
@@ -3103,7 +3148,7 @@ let UIElement$1 = class UIElement extends UIElementCore{
       ViewListeners,
     );
 
-    if(element)this.init(element, name, type, render);
+    if(element) this.init({element, name, type, render, props});
   }
   on(event_name, callback, {details_setter, category = 'global', isCustom = false, preventDefault = false} = {}){
     if(event_name instanceof Array) event_name.forEach(
@@ -3196,15 +3241,22 @@ let UIElement$1 = class UIElement extends UIElementCore{
 
 };
 
+const is_primitive = (value) => typeof value !== 'object' && typeof value !== 'function' || value === null;
+
 const call_with_optional_props = (Component) => {
     return (...args) => {
         const first = args[0];
-        const isChild = first?.isUIElement?.() || isPrimitive(first) ;
-        return isChild 
-                ? new Component({}, ...args)
-                : new Component(first, ...args.slice(1))
+
+        const isChild = first?.isUIElement?.() || is_primitive(first);
+
+        if (isChild) {
+            return new Component({}, ...args);
+        }
+
+        return new Component(first, ...args.slice(1));
     };
-};
+};
+
 function add_vendor_prefix(property) {
 	const propertyUC = property.slice(0, 1).toUpperCase() + property.slice(1);
 	const vendors = ['Webkit', 'Moz', 'O', 'ms'];
@@ -3257,9 +3309,9 @@ const CloneElement = (UIElement) => {
 const cloneUI=UIElement=>{
   return Object.assign(Object.create(Object.getPrototypeOf(UIElement)),UIElement)
 };
-function isPrimitive(value) {
-    return typeof value !== 'object' && typeof value !== 'function' || value === null;
-}
+// function isPrimitive(value) {
+//     return typeof value !== 'object' && typeof value !== 'function' || value === null;
+// }
 const waitElm=(UIElement)=>{
     return new Promise(resolve => {
         if (UIElement) {
@@ -3278,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',
@@ -3431,43 +3474,77 @@ const tags = new Proxy({}, {
     if(HTMLTags.includes(tag)) type = 'html';
     if(SVGTags.includes(tag)) type = 'svg';
     if(MathMLTags.includes(tag)) type = 'mathml';
-    return (...args)=>{
-      // Fix undefined
-      // console.log(isStateGetter(args[0]))
-      // console.log(!!args)
+    return (...args) => {
       if(args.length === 0) {
-        // console.log('length 0')
         return new UIElement$1({element : tag, name : tag, type})
       }
       if(
         ['string', 'number'].includes(typeof args[0]) 
         || args[0] instanceof UIElement$1 
-        || (typeof args[0] === 'function' && args[0]().isStateGetter())
+        || isStateGetter(args[0])
+        || args[0] instanceof HTMLElement
       ) return new UIElement$1({element : tag, name : tag, type}).append(...args);
-      // console.log(args[0])
-      return new UIElement$1({element : tag, type}).setAttr(args.shift()).append(...args)
-    }
-    // if(SVGTags.includes(tag)) return (...args) => new UIElement(tag,"",{el_type : "svg"}).append(...args);
-    // return (...args)=>{
-    //   if(!(args[0] instanceof UIElement) && args[0] instanceof Object){
-    //     let attributes = args.shift()
-    //     return new UIElement(tag).setAttr(attributes).append(...args)
-    //   }
-    //   return new UIElement(tag).append(...args);
-    // }
-    // // switch(tag){
-    //   case "html"  : globalThis?.document?.createElement("html")
-    //   case "head"  :
-    //   case "style" :
-    //   case "link"  :
-    //   case "meta"  :
-    //   case "srcipt":
-    //   case "body"  : return null; break;
-    //   default : return new UIElement(tag);
-    // }
+      return new UIElement$1({element : tag, type, props : args.shift()}).append(...args)
+    }
   }
 });
 
+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" })
@@ -3573,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({
@@ -3594,7 +3671,129 @@ class ZikoUISuspense extends UIElement{
     }
 }
 
-const Suspense = (fallback_ui, callback) => new ZikoUISuspense(fallback_ui, callback);
+const Suspense = (fallback_ui, callback) => new UISuspense(fallback_ui, callback);
+
+class UISwap extends UIElement$1 {
+    #DISPLAYS_MAP = new WeakMap()
+    constructor({ activeIndex = 0 } = {}, ...items) {
+        super({ element: 'div' });
+        this.style({ display: 'contents' });
+        
+        this.states = {
+            activeIndex
+        };
+        
+        this.append(...items);
+        requestAnimationFrame(() => {
+            this.render();
+        });
+    }
+    get activeItem(){
+        return this.items[this.states.activeIndex]
+    }
+    render() {
+        this.items.forEach((n, i) => {
+
+            const initialDisplay = getComputedStyle(n.element).display;
+            this.#DISPLAYS_MAP.set(n, initialDisplay);
+
+            if (i !== this.states.activeIndex) {
+                n.style({ display: 'none' });
+            }
+        });
+    }
+    get DS(){
+        return this.#DISPLAYS_MAP
+    }
+    next(n = 1) {
+        return this.activate(this.states.activeIndex + n);
+    }
+    previous(n = 1) {
+        return this.activate(this.states.activeIndex - n);
+    }
+    activate(index) {
+        if (!this.items.length) return this;
+
+        const currentItem = this.items.at(this.states.activeIndex);
+
+        if (currentItem) {
+            currentItem.style({ display: 'none' });
+        }
+
+        const len = this.items.length;
+        this.states.activeIndex = ((index % len) + len) % len;
+
+        const activeItem = this.items.at(this.states.activeIndex);
+        if (activeItem) {
+            const restoredDisplay = this.#DISPLAYS_MAP.get(activeItem) || 'block';
+            activeItem.style({ display: restoredDisplay === 'none' ? 'block' : restoredDisplay });
+        }
+
+        return this;
+    }
+}
+
+const Swap = call_with_optional_props(UISwap);
+
+class UIFragment extends UIElement$1{
+    constructor(...items){
+        super({ element : document.createDocumentFragment()});
+        this.append(...items);
+    }
+    isFragment(){
+        return true
+    }
+}
+
+const Fragment = (...items) => new UIFragment(...items);
+
+class UIFor extends UIFragment{
+    constructor({each, fallback, mapFn = () => {}} = {}){
+        super();
+        this.config = {
+            each,
+            fallback,
+            mapFn
+        };
+        this.append(
+            ...this.config.each.map((n,i) => this.config.mapFn(n, i))
+        );
+    }
+}
+
+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){
@@ -3658,169 +3857,240 @@ function svg2dom(svgString) {
 
 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;
+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());
     }
-    if(name.search('-') === -1){
-        console.warn(`"${name}" is not a valid custom element name`);
-        return; 
+    get Xmin(){
+        return this.axisMatrix[0][0];
     }
-    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();
-            }
+    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);
+            });
         }
-    );
-}
-
-class UISwitch extends UIElement$1{
-    constructor(key, cases){
-        super();
-        this.key = key; 
-        this.cases = cases;
-        this.init();
+        else {
+            this.items.at(-1).parent=this;
+            this.items.at(-1).draw(this.ctx);
+        }
+        this.maintain();
+        return this;
     }
-    init(){
-        Object.values(this.cases).filter(n=>n != this.current).forEach(n=>n.unmount());
-        super.init(this.current.element);
+    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;
     }
-    get current(){
-        const matched = Object.keys(this.cases).find(n => n == this.key) ?? 'default';
-        return this.cases[matched]
+    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;
     }
-    updateKey(key){
-        this.key = key;
-        this.replaceElementWith(this.current.element);
-        // this.cache.element.replaceWith(this.current.element)
-        // this.cache.element = this.current.element;
+    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;
     }
-    
-}
-
-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 UISwap extends UIElement$1 {
-    #DISPLAYS_MAP = new WeakMap()
-    constructor({ activeIndex = 0 } = {}, ...items) {
-        super({ element: 'div' });
-        this.style({ display: 'contents' });
-        
-        this.states = {
-            activeIndex
-        };
+    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.append(...items);
-        this.render();
+        this.applyTransformMatrix(); 
+        this.clear();
+        this.lineWidth(1);
+        this.draw();
+        return this;
     }
-    get activeItem(){
-        return this.items[this.states.activeIndex]
+    reset(){
+        this.ctx.setTransform(1,0,0,0,0,0);
+        return this;
     }
-    render() {
-        this.items.forEach((n, i) => {
-
-            const initialDisplay = n.element?.style?.display || '';
-            this.#DISPLAYS_MAP.set(n, initialDisplay);
-
-            if (i !== this.states.activeIndex) {
-                n.style({ display: 'none' });
-            }
-        });
+    append(element){
+        this.items.push(element);
+        this.draw(false);
+        return this;
     }
-    next(n = 1) {
-        return this.activate(this.states.activeIndex + n);
+    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();
     }
-    previous(n = 1) {
-        return this.activate(this.states.activeIndex - n);
+    lineWidth(w){
+        this.ctx.lineWidth=w/this.transformMatrix[0][0];
+        return this
     }
-    activate(index) {
-        if (!this.items.length) return this;
-
-        const currentItem = this.items.at(this.states.activeIndex);
+    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(){
 
-        if (currentItem) {
-            currentItem.style({ display: 'none' });
-        }
+    }
+    zoomOut(){
+        
+    }
+    undo(n){
 
-        const len = this.items.length;
-        this.states.activeIndex = ((index % len) + len) % len;
+    }
+    redo(n){
 
-        const activeItem = this.items.at(this.states.activeIndex);
-        if (activeItem) {
-            const restoredDisplay = this.#DISPLAYS_MAP.get(activeItem) || 'block';
-            activeItem.style({ display: restoredDisplay === 'none' ? 'block' : restoredDisplay });
-        }
+    }
+    stream(){
 
-        return this;
     }
 }
 
-const Swap = call_with_optional_props(UISwap);
+const Canvas=(w,h)=>new UICanvas(w,h);
 
-class UIFragment extends UIElement$1{
-    constructor(...items){
-        super({ element : document.createDocumentFragment()});
-        this.append(...items);
+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;
     }
-    isFragment(){
-        return true
+    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;     
     }
-}
-
-const Fragment = (...items) => new UIFragment(...items);
-
-class UIFor extends UIFragment{
-    constructor({each, fallback, mapFn = () => {}} = {}){
-        super();
-        this.config = {
-            each,
-            fallback,
-            mapFn
-        };
-        this.append(
-            ...this.config.each.map((n,i) => this.config.mapFn(n, i))
-        );
+    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 For = ({each, fallback, mapFn} = {}) => new UIFor({each, fallback, mapFn});
+  const Svg =(w,h)=>new UISvg(w,h);
 
 const { PI, sqrt: sqrt$1, cos: cos$2, sin: sin$2, acos, pow } = Math;
 
@@ -4391,13 +4661,15 @@ const csv2object = (csv, delimiter = ",") => {
 };
 const csv2json = (csv, delimiter = ",") => JSON.stringify(csv2object(csv,delimiter));
 const csv2sql=(csv, Table)=>{
+    const sanitizeId = s => s.trim().replace(/[^a-zA-Z0-9_]/g, '');
+    const escapeVal = s => "'" + s.trim().replace(/'/g, "''") + "'";
     const lines = csv.trim().trimEnd().split('\n').filter(n=>n);
-    const columns = lines[0].split(',');
-    let sqlQuery = `INSERT INTO ${Table} (${columns.join(', ')}) Values `;
+    const columns = lines[0].split(',').map(sanitizeId);
+    let sqlQuery = "INSERT INTO " + sanitizeId(Table) + " (" + columns.join(', ') + ") Values ";
     let sqlValues = [];
     for (let i = 1; i < lines.length; i++) {
-      const values = lines[i].split(',');
-      sqlValues.push(`(${values})`);
+      const values = lines[i].split(',').map(escapeVal);
+      sqlValues.push("(" + values.join(', ') + ")");
     }
     return sqlQuery+sqlValues.join(",\n");
   };
@@ -4514,6 +4786,35 @@ function trimKeys(obj) {
     }, Array.isArray(obj) ? [] : {});
 }
 
+function parseXML(xmlString) {
+    const parser = new DOMParser();
+    const xmlDoc = parser.parseFromString(xmlString, 'text/xml');
+    const rootNode = xmlDoc.documentElement;
+    const result = parseNode(rootNode);
+    return result;
+  }
+  
+  function parseNode(node) {
+    const obj = {
+      type: node.nodeName,
+      attributes: {},
+      children: []
+    };
+    for (let i = 0; i < node.attributes.length; i++) {
+      const attr = node.attributes[i];
+      obj.attributes[attr.name] = attr.value;
+    }
+    for (let i = 0; i < node.childNodes.length; i++) {
+      const child = node.childNodes[i];
+      if (child.nodeType === Node.ELEMENT_NODE) {
+        obj.children.push(parseNode(child));
+      } else if (child.nodeType === Node.TEXT_NODE) {
+        obj.text = child.textContent.trim();
+      }
+    }
+    return obj;
+  }
+
 // import { ZikoHead , useHead} from "../reactivity/hooks/head/index.js";
 class ZikoApp {
     constructor({head = null, wrapper = null, target = null}){
@@ -4805,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();
@@ -5227,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, 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, 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, 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, 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 };