ziko 1.6.1 → 1.8.0

package/dist/ziko.js

@@ -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
@@ -17,11 +17,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]));
@@ -2233,12 +2233,39 @@
        }
    }
 
+   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){
@@ -2286,9 +2313,26 @@
        };
        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;
@@ -2396,8 +2440,9 @@
 
    // if (!globalThis.__Ziko__) __init__global__();
 
+   const STATE_GETTER = Symbol.for("ziko.stateGetter");
+
    function useState(initialValue) {
-       
        const state = {
            value: initialValue,
            subscribers: new Set(),
@@ -2407,7 +2452,6 @@
        function getValue() {
            return {
                value: state.value,
-               isStateGetter: () => true,
                _subscribe: (fn) => {
                    state.subscribers.add(fn);
                    return () => state.subscribers.delete(fn);
@@ -2415,6 +2459,8 @@
            };
        }
 
+       getValue[STATE_GETTER] = true;
+
        function setValue(newValue) {
            if (state.paused) return;
 
@@ -2436,6 +2482,7 @@
                if (typeof newValue === "function") {
                    newValue = newValue(state.value);
                }
+
                state.value = newValue;
                state.subscribers.forEach((fn) => fn(state.value));
            },
@@ -2445,9 +2492,7 @@
        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());
 
@@ -2598,8 +2643,8 @@
        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),
@@ -3089,7 +3134,7 @@
    }
 
    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 : {
@@ -3109,7 +3154,7 @@
          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(
@@ -3202,15 +3247,22 @@
 
    };
 
+   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'];
@@ -3263,9 +3315,9 @@
    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) {
@@ -3284,15 +3336,6 @@
        });
      };
 
-   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',
@@ -3437,43 +3480,77 @@
        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" })
@@ -3579,7 +3656,7 @@
        }
    }
 
-   class ZikoUISuspense extends UIElement{
+   class UISuspense extends UIElement{
        constructor(fallback_ui, callback){
            super({element : "div", name : "suspense"});
            this.setAttr({
@@ -3600,7 +3677,129 @@
        }
    }
 
-   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){
@@ -3664,169 +3863,240 @@
 
    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;
 
@@ -4397,13 +4667,15 @@
    };
    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");
      };
@@ -4520,6 +4792,35 @@
        }, 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}){
@@ -4811,6 +5112,45 @@
        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();
@@ -5234,6 +5574,7 @@
    }
 
    exports.App = App;
+   exports.Canvas = Canvas;
    exports.ClickAwayEvent = ClickAwayEvent;
    exports.ClickListeners = ClickListeners;
    exports.Clock = Clock;
@@ -5253,9 +5594,11 @@
    exports.PtrListeners = PtrListeners;
    exports.Random = Random;
    exports.SPA = SPA;
+   exports.STATE_GETTER = STATE_GETTER;
    exports.SVGWrapper = SVGWrapper;
    exports.Scheduler = Scheduler;
    exports.Suspense = Suspense;
+   exports.Svg = Svg;
    exports.Swap = Swap;
    exports.SwipeEvent = SwipeEvent;
    exports.Switch = Switch;
@@ -5263,12 +5606,15 @@
    exports.TimeAnimation = TimeAnimation;
    exports.TimeLoop = TimeLoop;
    exports.TimeScheduler = TimeScheduler;
+   exports.UICanvas = UICanvas;
    exports.UIElement = UIElement$1;
    exports.UIFlex = UIFlex;
    exports.UIFragment = UIFragment;
    exports.UIHTMLWrapper = UIHTMLWrapper;
    exports.UINode = UINode;
    exports.UISVGWrapper = UISVGWrapper;
+   exports.UISuspense = UISuspense;
+   exports.UISvg = UISvg;
    exports.UISwap = UISwap;
    exports.UISwitch = UISwitch;
    exports.UIView = UIView;
@@ -5279,7 +5625,6 @@
    exports.ViewListeners = ViewListeners;
    exports.ZikoApp = ZikoApp;
    exports.ZikoSPA = ZikoSPA;
-   exports.ZikoUISuspense = ZikoUISuspense;
    exports.ZikoUIText = ZikoUIText;
    exports.abs = abs;
    exports.accum_max = accum_max;
@@ -5357,8 +5702,8 @@
    exports.in_sin = in_sin;
    exports.interquartile_mean = interquartile_mean;
    exports.iqr = iqr;
-   exports.isPrimitive = isPrimitive;
    exports.isStateGetter = isStateGetter;
+   exports.is_primitive = is_primitive;
    exports.json2arr = json2arr;
    exports.json2css = json2css;
    exports.json2csv = json2csv;
@@ -5403,6 +5748,8 @@
    exports.out_quart = out_quart;
    exports.out_quint = out_quint;
    exports.out_sin = out_sin;
+   exports.parseXML = parseXML;
+   exports.parse_props = parse_props;
    exports.percentile = percentile;
    exports.pow = pow$1;
    exports.power_mean = power_mean;
@@ -5449,6 +5796,7 @@
    exports.trimmed_mean = trimmed_mean;
    exports.trunc = trunc;
    exports.useDerived = useDerived;
+   exports.useEffect = useEffect;
    exports.useEventEmitter = useEventEmitter;
    exports.useIPC = useIPC;
    exports.useLocalStorage = useLocalStorage;