ziko 1.7.0 → 1.9.0

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Fri Aug 07 2026 20:07:58 GMT+0100 (UTC+01:00)
+  Date : Wed Aug 26 2026 10:48:40 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
@@ -2436,11 +2436,10 @@
       unmount: unmount
    });
 
+   const STATE_GETTER = Symbol.for("ziko/hooks/STATE_GETTER");
+
    // import { __init__global__ } from "../__ziko__/index.js";
 
-   // if (!globalThis.__Ziko__) __init__global__();
-
-   const STATE_GETTER = Symbol.for("ziko.stateGetter");
 
    function useState(initialValue) {
        const state = {
@@ -2644,6 +2643,7 @@
            // Fix Items Latter
        if (ele[i] instanceof Function) {
          if (isStateGetter(ele[i])) {
+           console.log({s : ele[i]()});
            const getter = ele[i]();
            ele[i] = text(getter.value);
            getter._subscribe(
@@ -3336,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',
@@ -3504,6 +3495,62 @@
      }
    });
 
+   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" })
@@ -3609,7 +3656,7 @@
        }
    }
 
-   class ZikoUISuspense extends UIElement{
+   class UISuspense extends UIElement{
        constructor(fallback_ui, callback){
            super({element : "div", name : "suspense"});
            this.setAttr({
@@ -3630,148 +3677,7 @@
        }
    }
 
-   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()
@@ -3863,6 +3769,335 @@
 
    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;
@@ -4804,23 +5039,29 @@
        let value = deriveFn(...sources.map(s => s().value));
        const subscribers = new Set();
 
-       sources.forEach(source => {
-           const srcValue = source();
-           srcValue._subscribe(() => {
-               {
-                   const newVal = deriveFn(...sources.map(s => s().value));
-                   if (newVal !== value) {
-                       value = newVal;
-                       subscribers.forEach(fn => fn(value));
-                   }
-               }
-           }); 
-       });
-       return () => ({
+       // const unsubscribers = sources.map(source => {
+       //     const srcValue = source();
+
+       //     return srcValue._subscribe(() => {
+       //         const newVal = deriveFn(...sources.map(s => s().value));
+
+       //         if (!Object.is(newVal, value)) {
+       //             value = newVal;
+       //             subscribers.forEach(fn => fn(value));
+       //         }
+       //     });
+       // });
+
+       const getter = () => ({
            value,
-           isStateGetter : () => true,
-           _subscribe: (fn) => subscribers.add(fn)
-       })
+           _subscribe: (fn) => {
+               subscribers.add(fn);
+               return () => subscribers.delete(fn);
+           },
+       });
+
+       getter[STATE_GETTER] = true;
+       return getter
    }
 
    const mapfun=(fun,...X)=>{
@@ -4877,6 +5118,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();
@@ -5300,6 +5580,7 @@
    }
 
    exports.App = App;
+   exports.Canvas = Canvas;
    exports.ClickAwayEvent = ClickAwayEvent;
    exports.ClickListeners = ClickListeners;
    exports.Clock = Clock;
@@ -5319,10 +5600,10 @@
    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;
@@ -5330,12 +5611,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;
@@ -5346,7 +5630,6 @@
    exports.ViewListeners = ViewListeners;
    exports.ZikoApp = ZikoApp;
    exports.ZikoSPA = ZikoSPA;
-   exports.ZikoUISuspense = ZikoUISuspense;
    exports.ZikoUIText = ZikoUIText;
    exports.abs = abs;
    exports.accum_max = accum_max;
@@ -5518,6 +5801,7 @@
    exports.trimmed_mean = trimmed_mean;
    exports.trunc = trunc;
    exports.useDerived = useDerived;
+   exports.useEffect = useEffect;
    exports.useEventEmitter = useEventEmitter;
    exports.useIPC = useIPC;
    exports.useLocalStorage = useLocalStorage;