ziko 1.7.0 → 1.9.0

package/dist/ziko.cjs

@@ -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
@@ -2432,11 +2432,10 @@ var LifecycleMethods = /*#__PURE__*/Object.freeze({
    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 = {
@@ -2640,6 +2639,7 @@ async function __addItem__(adder, pusher, ...ele) {
         // 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(
@@ -3332,15 +3332,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',
@@ -3500,6 +3491,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" })
@@ -3605,7 +3652,7 @@ class UIElement extends UIElementCore{
     }
 }
 
-class ZikoUISuspense extends UIElement{
+class UISuspense extends UIElement{
     constructor(fallback_ui, callback){
         super({element : "div", name : "suspense"});
         this.setAttr({
@@ -3626,148 +3673,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()
@@ -3859,6 +3765,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;
@@ -4800,23 +5035,29 @@ function useDerived(deriveFn, sources) {
     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)=>{
@@ -4873,6 +5114,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();
@@ -5296,6 +5576,7 @@ if(globalThis?.document){
 }
 
 exports.App = App;
+exports.Canvas = Canvas;
 exports.ClickAwayEvent = ClickAwayEvent;
 exports.ClickListeners = ClickListeners;
 exports.Clock = Clock;
@@ -5315,10 +5596,10 @@ exports.PI = PI$1;
 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;
@@ -5326,12 +5607,15 @@ exports.Tick = Tick;
 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;
@@ -5342,7 +5626,6 @@ exports.ViewEvent = ViewEvent;
 exports.ViewListeners = ViewListeners;
 exports.ZikoApp = ZikoApp;
 exports.ZikoSPA = ZikoSPA;
-exports.ZikoUISuspense = ZikoUISuspense;
 exports.ZikoUIText = ZikoUIText;
 exports.abs = abs;
 exports.accum_max = accum_max;
@@ -5514,6 +5797,7 @@ exports.timeout = timeout;
 exports.trimmed_mean = trimmed_mean;
 exports.trunc = trunc;
 exports.useDerived = useDerived;
+exports.useEffect = useEffect;
 exports.useEventEmitter = useEventEmitter;
 exports.useIPC = useIPC;
 exports.useLocalStorage = useLocalStorage;