ziko 1.7.0 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/dist/ziko.cjs +458 -174
  2. package/dist/ziko.js +458 -174
  3. package/dist/ziko.min.js +2 -2
  4. package/dist/ziko.mjs +453 -173
  5. package/package.json +1 -1
  6. package/src/dom/{flex → components/Flex}/index.js +1 -1
  7. package/src/dom/components/{for → For}/index.js +1 -1
  8. package/src/dom/{suspense → components/Suspense}/index.js +3 -7
  9. package/src/dom/components/View/index.js +9 -0
  10. package/src/dom/{graphics/canvas.js → components/graphics/Canvas/index.js} +6 -6
  11. package/src/dom/{graphics/svg.js → components/graphics/Svg/index.js} +4 -4
  12. package/src/dom/components/graphics/index.js +2 -0
  13. package/src/dom/components/index.js +10 -3
  14. package/src/dom/{wrappers/html → components/wrappers/HTMLWrapper}/index.js +1 -1
  15. package/src/dom/{wrappers/svg → components/wrappers/SVGWrapper}/index.js +1 -1
  16. package/src/dom/components/wrappers/index.js +2 -0
  17. package/src/dom/constructors/mixins/dom.js +1 -0
  18. package/src/dom/index.js +0 -8
  19. package/src/hooks/index.d.ts +1 -0
  20. package/src/hooks/index.js +1 -0
  21. package/src/hooks/use-derived.js +24 -17
  22. package/src/hooks/use-effect.d.ts +39 -0
  23. package/src/hooks/use-effect.js +40 -0
  24. package/src/hooks/use-state.d.ts +28 -10
  25. package/src/hooks/use-state.js +3 -1
  26. package/src/symbols/index.d.ts +39 -0
  27. package/src/symbols/index.js +5 -0
  28. package/src/dom/graphics/index.js +0 -2
  29. package/src/dom/logic/index.js +0 -1
  30. package/src/dom/view/index.js +0 -13
  31. package/src/dom/wrappers/index.js +0 -2
  32. package/src/events-dep/binders/coordinates-based-event.js +0 -25
  33. package/src/events-dep/binders/custom-event.js +0 -33
  34. package/src/events-dep/binders/index.js +0 -105
  35. package/src/events-dep/custom-events-registry/click-away.js +0 -38
  36. package/src/events-dep/custom-events-registry/index.js +0 -3
  37. package/src/events-dep/custom-events-registry/swipe.js +0 -76
  38. package/src/events-dep/custom-events-registry/view.js +0 -74
  39. package/src/events-dep/customizers/normalise-coordinates.js +0 -0
  40. package/src/events-dep/details-setter/index.js +0 -4
  41. package/src/events-dep/details-setter/key.js +0 -14
  42. package/src/events-dep/details-setter/mouse.js +0 -35
  43. package/src/events-dep/details-setter/pointer.js +0 -35
  44. package/src/events-dep/details-setter/touch.js +0 -37
  45. package/src/events-dep/events-map/index.js +0 -70
  46. package/src/events-dep/index.js +0 -3
  47. package/src/events-dep/types/__Shared__.d.ts +0 -155
  48. package/src/events-dep/types/clipboard.d.ts +0 -20
  49. package/src/events-dep/types/focus.d.ts +0 -19
  50. package/src/events-dep/types/pointer.d.ts +0 -45
  51. package/src/events-dep/utils.js +0 -38
  52. package/src/events-dep/ziko-event.js +0 -108
  53. package/src/watch/dom-observer/ziko-observer.js +0 -15
  54. /package/src/dom/{flex → components/Flex}/utils/index.js +0 -0
  55. /package/src/dom/components/{fragment → Fragment}/index.d.ts +0 -0
  56. /package/src/dom/components/{fragment → Fragment}/index.js +0 -0
  57. /package/src/dom/components/{swap → Swap}/index.d.ts +0 -0
  58. /package/src/dom/components/{swap → Swap}/index.js +0 -0
  59. /package/src/dom/{logic/switch → components/Switch}/index.js +0 -0
package/dist/ziko.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  /*
3
3
  Project: ziko.js
4
4
  Author: Zakaria Elalaoui
5
- Date : Fri Aug 07 2026 20:07:58 GMT+0100 (UTC+01:00)
5
+ Date : Wed Aug 26 2026 10:48:40 GMT+0100 (UTC+01:00)
6
6
  Git-Repo : https://github.com/zakarialaoui10/ziko.js
7
7
  Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
8
8
  Released under MIT License
@@ -2430,11 +2430,10 @@ var LifecycleMethods = /*#__PURE__*/Object.freeze({
2430
2430
  unmount: unmount
2431
2431
  });
2432
2432
 
2433
+ const STATE_GETTER = Symbol.for("ziko/hooks/STATE_GETTER");
2434
+
2433
2435
  // import { __init__global__ } from "../__ziko__/index.js";
2434
2436
 
2435
- // if (!globalThis.__Ziko__) __init__global__();
2436
-
2437
- const STATE_GETTER = Symbol.for("ziko.stateGetter");
2438
2437
 
2439
2438
  function useState(initialValue) {
2440
2439
  const state = {
@@ -2638,6 +2637,7 @@ async function __addItem__(adder, pusher, ...ele) {
2638
2637
  // Fix Items Latter
2639
2638
  if (ele[i] instanceof Function) {
2640
2639
  if (isStateGetter(ele[i])) {
2640
+ console.log({s : ele[i]()});
2641
2641
  const getter = ele[i]();
2642
2642
  ele[i] = text(getter.value);
2643
2643
  getter._subscribe(
@@ -3330,15 +3330,6 @@ const waitElm=(UIElement)=>{
3330
3330
  });
3331
3331
  };
3332
3332
 
3333
- class UIView extends UIElement$1{
3334
- constructor(...items){
3335
- super({element : 'div', name : 'view'});
3336
- this.append(...items);
3337
- }
3338
- }
3339
-
3340
- const View = (...items) => new UIView(...items);
3341
-
3342
3333
  const HTMLTags = [
3343
3334
  'a',
3344
3335
  'abb',
@@ -3498,6 +3489,62 @@ const tags = new Proxy({}, {
3498
3489
  }
3499
3490
  });
3500
3491
 
3492
+ function define_wc(name, UI_Constructor, props = {}, { mode = 'open'} = {}) {
3493
+ if (globalThis.customElements?.get(name)) {
3494
+ console.warn(`Custom element "${name}" is already defined`);
3495
+ return;
3496
+ }
3497
+ if(name.search('-') === -1){
3498
+ console.warn(`"${name}" is not a valid custom element name`);
3499
+ return;
3500
+ }
3501
+ globalThis.customElements?.define(
3502
+ name,
3503
+ class extends HTMLElement {
3504
+ static get observedAttributes() {
3505
+ return ['style', ...Object.keys(props)];
3506
+ }
3507
+
3508
+ constructor() {
3509
+ super();
3510
+ this.attachShadow({ mode });
3511
+ this.props = {};
3512
+ this.mask = {
3513
+ ...props,
3514
+ // style: { type: Object }
3515
+ };
3516
+ }
3517
+
3518
+ connectedCallback() {
3519
+ this.render();
3520
+ }
3521
+
3522
+ render() {
3523
+ this.shadowRoot.innerHTML = '';
3524
+ const item = UI_Constructor(this.props);
3525
+ if(item instanceof Array) item.forEach(n => n.mount(this.shadowRoot));
3526
+ else item.mount(this.shadowRoot);
3527
+ }
3528
+
3529
+ attributeChangedCallback(name, _, newValue) {
3530
+ Object.assign(this.props, {
3531
+ [name]: this.mask[name].type(newValue)
3532
+ });
3533
+ this.render();
3534
+ }
3535
+ }
3536
+ );
3537
+ }
3538
+
3539
+ class UIView extends UIElement$1{
3540
+ constructor(...items){
3541
+ super({element : 'div', name : 'view'});
3542
+ this.append(...items);
3543
+ }
3544
+ }
3545
+
3546
+ const View = (...items) => new UIView(...items);
3547
+
3501
3548
  function set_vertical(direction){
3502
3549
  direction == 1
3503
3550
  ? this.style({ flexDirection: "column" })
@@ -3603,7 +3650,7 @@ class UIElement extends UIElementCore{
3603
3650
  }
3604
3651
  }
3605
3652
 
3606
- class ZikoUISuspense extends UIElement{
3653
+ class UISuspense extends UIElement{
3607
3654
  constructor(fallback_ui, callback){
3608
3655
  super({element : "div", name : "suspense"});
3609
3656
  this.setAttr({
@@ -3624,148 +3671,7 @@ class ZikoUISuspense extends UIElement{
3624
3671
  }
3625
3672
  }
3626
3673
 
3627
- const Suspense = (fallback_ui, callback) => new ZikoUISuspense(fallback_ui, callback);
3628
-
3629
- class UIHTMLWrapper extends UIElement$1 {
3630
- constructor(content){
3631
- super({element : 'div', name : 'html_wrappper'});
3632
- this.element.append(html2dom(content));
3633
- this.style({
3634
- display : 'contents'
3635
- });
3636
- }
3637
- }
3638
-
3639
- function html2dom(htmlString) {
3640
- if(globalThis?.DOMParser){
3641
- const parser = new DOMParser();
3642
- const doc = parser.parseFromString(`<div>${htmlString}</div>`, 'text/html');
3643
- doc.body.firstChild.style.display = "contents";
3644
- return doc.body.firstChild;
3645
- }
3646
- }
3647
-
3648
- const HTMLWrapper = (content) => new UIHTMLWrapper(content);
3649
-
3650
- class UISVGWrapper extends UIElement$1 {
3651
- constructor(content){
3652
- super({element : 'div', name : 'html_wrappper'});
3653
- this.element.append(svg2dom(content));
3654
- this.style({
3655
- display : 'contents'
3656
- });
3657
- }
3658
- }
3659
-
3660
- function svg2dom(svgString) {
3661
- if (typeof DOMParser !== "undefined") {
3662
- const parser = new DOMParser();
3663
- const doc = parser.parseFromString(svgString.trim(), "image/svg+xml");
3664
- const svg = doc.documentElement;
3665
-
3666
- if (svg.nodeName === "parsererror") {
3667
- throw new Error("Invalid SVG string");
3668
- }
3669
- if(svg.hasAttribute('xmlns')) return svg
3670
- // TO Fix ...
3671
- const {children, attributes} = svg;
3672
- const element = document.createElementNS("http://www.w3.org/2000/svg", "svg");
3673
- for(let {name, value} of attributes){
3674
- element.setAttribute(name, value);
3675
- }
3676
- element.append(...children);
3677
-
3678
- globalThis.svg = svg;
3679
- globalThis.children = children;
3680
- globalThis.attributes = attributes;
3681
- globalThis.element = element;
3682
- return element;
3683
- }
3684
- throw new Error("DOMParser is not available in this environment");
3685
- }
3686
-
3687
-
3688
-
3689
- const SVGWrapper = (content) => new UISVGWrapper(content);
3690
-
3691
- function define_wc(name, UI_Constructor, props = {}, { mode = 'open'} = {}) {
3692
- if (globalThis.customElements?.get(name)) {
3693
- console.warn(`Custom element "${name}" is already defined`);
3694
- return;
3695
- }
3696
- if(name.search('-') === -1){
3697
- console.warn(`"${name}" is not a valid custom element name`);
3698
- return;
3699
- }
3700
- globalThis.customElements?.define(
3701
- name,
3702
- class extends HTMLElement {
3703
- static get observedAttributes() {
3704
- return ['style', ...Object.keys(props)];
3705
- }
3706
-
3707
- constructor() {
3708
- super();
3709
- this.attachShadow({ mode });
3710
- this.props = {};
3711
- this.mask = {
3712
- ...props,
3713
- // style: { type: Object }
3714
- };
3715
- }
3716
-
3717
- connectedCallback() {
3718
- this.render();
3719
- }
3720
-
3721
- render() {
3722
- this.shadowRoot.innerHTML = '';
3723
- const item = UI_Constructor(this.props);
3724
- if(item instanceof Array) item.forEach(n => n.mount(this.shadowRoot));
3725
- else item.mount(this.shadowRoot);
3726
- }
3727
-
3728
- attributeChangedCallback(name, _, newValue) {
3729
- Object.assign(this.props, {
3730
- [name]: this.mask[name].type(newValue)
3731
- });
3732
- this.render();
3733
- }
3734
- }
3735
- );
3736
- }
3737
-
3738
- class UISwitch extends UIElement$1{
3739
- constructor(key, cases){
3740
- super();
3741
- this.key = key;
3742
- this.cases = cases;
3743
- this.init();
3744
- }
3745
- init(){
3746
- Object.values(this.cases).filter(n=>n != this.current).forEach(n=>n.unmount());
3747
- super.init(this.current.element);
3748
- }
3749
- get current(){
3750
- const matched = Object.keys(this.cases).find(n => n == this.key) ?? 'default';
3751
- return this.cases[matched]
3752
- }
3753
- updateKey(key){
3754
- this.key = key;
3755
- this.replaceElementWith(this.current.element);
3756
- // this.cache.element.replaceWith(this.current.element)
3757
- // this.cache.element = this.current.element;
3758
- return this;
3759
- }
3760
-
3761
- }
3762
-
3763
- const Switch=({key, cases})=> new UISwitch(key, cases);
3764
-
3765
- // export const Switch=({key, cases}) => {
3766
- // const matched = Object.keys(cases).find(n => n == key) ?? 'default';
3767
- // return this.cases[matched]()
3768
- // }
3674
+ const Suspense = (fallback_ui, callback) => new UISuspense(fallback_ui, callback);
3769
3675
 
3770
3676
  class UISwap extends UIElement$1 {
3771
3677
  #DISPLAYS_MAP = new WeakMap()
@@ -3857,6 +3763,335 @@ class UIFor extends UIFragment{
3857
3763
 
3858
3764
  const For = ({each, fallback, mapFn} = {}) => new UIFor({each, fallback, mapFn});
3859
3765
 
3766
+ class UISwitch extends UIElement$1{
3767
+ constructor(key, cases){
3768
+ super();
3769
+ this.key = key;
3770
+ this.cases = cases;
3771
+ this.init();
3772
+ }
3773
+ init(){
3774
+ Object.values(this.cases).filter(n=>n != this.current).forEach(n=>n.unmount());
3775
+ super.init(this.current.element);
3776
+ }
3777
+ get current(){
3778
+ const matched = Object.keys(this.cases).find(n => n == this.key) ?? 'default';
3779
+ return this.cases[matched]
3780
+ }
3781
+ updateKey(key){
3782
+ this.key = key;
3783
+ this.replaceElementWith(this.current.element);
3784
+ // this.cache.element.replaceWith(this.current.element)
3785
+ // this.cache.element = this.current.element;
3786
+ return this;
3787
+ }
3788
+
3789
+ }
3790
+
3791
+ const Switch=({key, cases})=> new UISwitch(key, cases);
3792
+
3793
+ // export const Switch=({key, cases}) => {
3794
+ // const matched = Object.keys(cases).find(n => n == key) ?? 'default';
3795
+ // return this.cases[matched]()
3796
+ // }
3797
+
3798
+ class UIHTMLWrapper extends UIElement$1 {
3799
+ constructor(content){
3800
+ super({element : 'div', name : 'html_wrappper'});
3801
+ this.element.append(html2dom(content));
3802
+ this.style({
3803
+ display : 'contents'
3804
+ });
3805
+ }
3806
+ }
3807
+
3808
+ function html2dom(htmlString) {
3809
+ if(globalThis?.DOMParser){
3810
+ const parser = new DOMParser();
3811
+ const doc = parser.parseFromString(`<div>${htmlString}</div>`, 'text/html');
3812
+ doc.body.firstChild.style.display = "contents";
3813
+ return doc.body.firstChild;
3814
+ }
3815
+ }
3816
+
3817
+ const HTMLWrapper = (content) => new UIHTMLWrapper(content);
3818
+
3819
+ class UISVGWrapper extends UIElement$1 {
3820
+ constructor(content){
3821
+ super({element : 'div', name : 'html_wrappper'});
3822
+ this.element.append(svg2dom(content));
3823
+ this.style({
3824
+ display : 'contents'
3825
+ });
3826
+ }
3827
+ }
3828
+
3829
+ function svg2dom(svgString) {
3830
+ if (typeof DOMParser !== "undefined") {
3831
+ const parser = new DOMParser();
3832
+ const doc = parser.parseFromString(svgString.trim(), "image/svg+xml");
3833
+ const svg = doc.documentElement;
3834
+
3835
+ if (svg.nodeName === "parsererror") {
3836
+ throw new Error("Invalid SVG string");
3837
+ }
3838
+ if(svg.hasAttribute('xmlns')) return svg
3839
+ // TO Fix ...
3840
+ const {children, attributes} = svg;
3841
+ const element = document.createElementNS("http://www.w3.org/2000/svg", "svg");
3842
+ for(let {name, value} of attributes){
3843
+ element.setAttribute(name, value);
3844
+ }
3845
+ element.append(...children);
3846
+
3847
+ globalThis.svg = svg;
3848
+ globalThis.children = children;
3849
+ globalThis.attributes = attributes;
3850
+ globalThis.element = element;
3851
+ return element;
3852
+ }
3853
+ throw new Error("DOMParser is not available in this environment");
3854
+ }
3855
+
3856
+
3857
+
3858
+ const SVGWrapper = (content) => new UISVGWrapper(content);
3859
+
3860
+ class UICanvas extends UIElement$1{
3861
+ constructor(w,h){
3862
+ super("canvas","canvas");
3863
+ this.ctx = this.element?.getContext("2d");
3864
+ this.style({
3865
+ border:"1px red solid",
3866
+ });
3867
+ this.transformMatrix = new Matrix([
3868
+ [1,0,0],
3869
+ [0,1,0],
3870
+ [0,0,1]
3871
+ ]);
3872
+ this.axisMatrix = new Matrix([
3873
+ [-10,-10],
3874
+ [10,10]
3875
+ ]);
3876
+ // setTimeout(()=>this.resize(w,h),0);
3877
+ requestAnimationFrame(()=>this.resize(w,h),0);
3878
+ this.on("sizeupdated",()=>this.adjust());
3879
+ }
3880
+ get Xmin(){
3881
+ return this.axisMatrix[0][0];
3882
+ }
3883
+ get Ymin(){
3884
+ return this.axisMatrix[0][1];
3885
+ }
3886
+ get Xmax(){
3887
+ return this.axisMatrix[1][0];
3888
+ }
3889
+ get Ymax(){
3890
+ return this.axisMatrix[1][1];
3891
+ }
3892
+ get ImageData(){
3893
+ return this.ctx.getImageData(0,0,c.Width,c.Height);
3894
+ }
3895
+ draw(all=true){
3896
+ if(all){
3897
+ this.clear();
3898
+ this.items.forEach(element => {
3899
+ element.parent=this;
3900
+ element.draw(this.ctx);
3901
+ });
3902
+ }
3903
+ else {
3904
+ this.items.at(-1).parent=this;
3905
+ this.items.at(-1).draw(this.ctx);
3906
+ }
3907
+ this.maintain();
3908
+ return this;
3909
+ }
3910
+ applyTransformMatrix(){
3911
+ this.ctx.setTransform(
3912
+ this.transformMatrix[0][0],
3913
+ this.transformMatrix[1][0],
3914
+ this.transformMatrix[0][1],
3915
+ this.transformMatrix[1][1],
3916
+ this.transformMatrix[0][2],
3917
+ this.transformMatrix[1][2],
3918
+ );
3919
+ return this;
3920
+ }
3921
+ resize(w,h){
3922
+ this.size(w,h);
3923
+ this.lineWidth();
3924
+ this.view(this.axisMatrix[0][0], this.axisMatrix[0][1], this.axisMatrix[1][0], this.axisMatrix[1][1]);
3925
+ this.emit("sizeupdated");
3926
+ return this;
3927
+ }
3928
+ adjust(){
3929
+ this.element.width =this.element?.getBoundingClientRect().width;
3930
+ this.element.height =this.element?.getBoundingClientRect().height;
3931
+ this.view(this.axisMatrix[0][0], this.axisMatrix[0][1], this.axisMatrix[1][0], this.axisMatrix[1][1]);
3932
+ return this;
3933
+ }
3934
+ view(xMin,yMin,xMax,yMax){
3935
+ this.transformMatrix[0][0]=this.width/(xMax-xMin); // scaleX
3936
+ this.transformMatrix[1][1]=-this.height/(yMax-yMin); // scaleY
3937
+ this.transformMatrix[0][2]=this.width/2;
3938
+ this.transformMatrix[1][2]=this.height/2;
3939
+ this.axisMatrix=new Matrix([
3940
+ [xMin,yMin],
3941
+ [xMax,yMax]
3942
+ ]);
3943
+
3944
+ this.applyTransformMatrix();
3945
+ this.clear();
3946
+ this.lineWidth(1);
3947
+ this.draw();
3948
+ return this;
3949
+ }
3950
+ reset(){
3951
+ this.ctx.setTransform(1,0,0,0,0,0);
3952
+ return this;
3953
+ }
3954
+ append(element){
3955
+ this.items.push(element);
3956
+ this.draw(false);
3957
+ return this;
3958
+ }
3959
+ background(color){
3960
+ this.ctx.fillStyle = color;
3961
+ this.ctx.setTransform(1, 0, 0, 1, 0, 0);
3962
+ this.ctx.fillRect(0, 0, this.width, this.height);
3963
+ this.applyTransformMatrix();
3964
+ this.draw();
3965
+ }
3966
+ lineWidth(w){
3967
+ this.ctx.lineWidth=w/this.transformMatrix[0][0];
3968
+ return this
3969
+ }
3970
+ getImageData(x=0,y=0,w=this.width,h=this.height){
3971
+ return this.ctx.getImageData(x,y,w,h);
3972
+ }
3973
+ clear(){
3974
+ this.ctx.setTransform(1, 0, 0, 1, 0, 0);
3975
+ this.ctx.clearRect(0, 0, this.width, this.height);
3976
+ this.applyTransformMatrix();
3977
+ return this;
3978
+ }
3979
+ clone(){
3980
+ console.log(this.width);
3981
+ const canvas=new UICanvas();
3982
+ canvas.items=this.items;
3983
+ canvas.transformMatrix=this.transformMatrix;
3984
+ canvas.axisMatrix=this.axisMatrix;
3985
+ Object.assign(canvas.cache,{...this.cache});
3986
+ //waitForUIElm(this)
3987
+ //console.log(element)
3988
+ this.size(this.element.style.width,this.element.style.width);
3989
+ this.applyTransformMatrix();
3990
+ this.draw();
3991
+ this.adjust();
3992
+ return canvas;
3993
+ }
3994
+ toImage() {
3995
+ this.img = document?.createElement("img");
3996
+ this.img.src = this.element?.toDataURL("image/png");
3997
+ return this;
3998
+ }
3999
+ toBlob() {
4000
+ var canvas = this.element;
4001
+ canvas.toBlob(function (blob) {
4002
+ var newImg = document?.createElement("img"),
4003
+ url = URL.createObjectURL(blob);
4004
+ newImg.onload = function () {
4005
+ URL.revokeObjectURL(url);
4006
+ };
4007
+ newImg.src = url;
4008
+ console.log(newImg);
4009
+ });
4010
+ }
4011
+ zoomIn(){
4012
+
4013
+ }
4014
+ zoomOut(){
4015
+
4016
+ }
4017
+ undo(n){
4018
+
4019
+ }
4020
+ redo(n){
4021
+
4022
+ }
4023
+ stream(){
4024
+
4025
+ }
4026
+ }
4027
+
4028
+ const Canvas=(w,h)=>new UICanvas(w,h);
4029
+
4030
+ class UISvg extends UIElement$1 {
4031
+ constructor(w=360,h=300) {
4032
+ super("svg","svg");
4033
+ //this.cache={};
4034
+ // this.setAttr("width",w);
4035
+ // this.setAttr("height",h);
4036
+ // this.setAttr({
4037
+ // width : w,
4038
+ // height : h
4039
+ // })
4040
+ this.style({border:"1px black solid"});
4041
+ //this.view(-w/2,-h/2,w/2,h/2);
4042
+ this.size(w, h);
4043
+ this.view(-10,-10,10,10);
4044
+ }
4045
+ size(w, h){
4046
+ this.setAttr({
4047
+ width : w,
4048
+ height : h
4049
+ });
4050
+ return this
4051
+ }
4052
+ view(x1,y1,x2,y2){
4053
+ let width=Math.abs(x2-x1);
4054
+ let height=Math.abs(y2-y1);
4055
+ this.setAttr("viewBox",[x1,y1,width,height].join(" "));
4056
+ this.st.scaleY(-1);
4057
+ return this;
4058
+ }
4059
+ add(...svgElement){
4060
+ for(let i=0;i<svgElement.length;i++){
4061
+ this.element.append(svgElement[i].element);
4062
+ this.items.push(svgElement[i]);
4063
+ }
4064
+ this.maintain();
4065
+ return this;
4066
+ }
4067
+ remove(...svgElement){
4068
+ for(let i=0;i<svgElement.length;i++){
4069
+ this.element?.removeChild(svgElement[i].element);
4070
+ this.items=this.items.filter(n=>!svgElement);
4071
+ }
4072
+ this.maintain();
4073
+ return this;
4074
+ }
4075
+ mask(){
4076
+
4077
+ }
4078
+ toString(){
4079
+ return (new XMLSerializer()).serializeToString(this.element);
4080
+ }
4081
+ btoa(){
4082
+ return btoa(this.toString())
4083
+ }
4084
+ toImg(){
4085
+ return 'data:image/svg+xml;base64,'+this.btoa()
4086
+ }
4087
+ toImg2(){
4088
+ return "data:image/svg+xml;charset=utf8,"+this.toString().replaceAll("<","%3C").replaceAll(">","%3E").replaceAll("#","%23").replaceAll('"',"'");
4089
+ }
4090
+
4091
+ }
4092
+
4093
+ const Svg =(w,h)=>new UISvg(w,h);
4094
+
3860
4095
  const { PI, sqrt: sqrt$1, cos: cos$2, sin: sin$2, acos, pow } = Math;
3861
4096
 
3862
4097
  const linear = t => t;
@@ -4798,23 +5033,29 @@ function useDerived(deriveFn, sources) {
4798
5033
  let value = deriveFn(...sources.map(s => s().value));
4799
5034
  const subscribers = new Set();
4800
5035
 
4801
- sources.forEach(source => {
4802
- const srcValue = source();
4803
- srcValue._subscribe(() => {
4804
- {
4805
- const newVal = deriveFn(...sources.map(s => s().value));
4806
- if (newVal !== value) {
4807
- value = newVal;
4808
- subscribers.forEach(fn => fn(value));
4809
- }
4810
- }
4811
- });
4812
- });
4813
- return () => ({
5036
+ // const unsubscribers = sources.map(source => {
5037
+ // const srcValue = source();
5038
+
5039
+ // return srcValue._subscribe(() => {
5040
+ // const newVal = deriveFn(...sources.map(s => s().value));
5041
+
5042
+ // if (!Object.is(newVal, value)) {
5043
+ // value = newVal;
5044
+ // subscribers.forEach(fn => fn(value));
5045
+ // }
5046
+ // });
5047
+ // });
5048
+
5049
+ const getter = () => ({
4814
5050
  value,
4815
- isStateGetter : () => true,
4816
- _subscribe: (fn) => subscribers.add(fn)
4817
- })
5051
+ _subscribe: (fn) => {
5052
+ subscribers.add(fn);
5053
+ return () => subscribers.delete(fn);
5054
+ },
5055
+ });
5056
+
5057
+ getter[STATE_GETTER] = true;
5058
+ return getter
4818
5059
  }
4819
5060
 
4820
5061
  const mapfun=(fun,...X)=>{
@@ -4871,6 +5112,45 @@ const useReactive = (nested_value) => mapfun(
4871
5112
  nested_value
4872
5113
  );
4873
5114
 
5115
+ const useEffect = (callback, deps = []) =>{
5116
+ const states = deps.filter(isStateGetter);
5117
+
5118
+ let cleanup;
5119
+
5120
+ const execute = () => {
5121
+ // Cleanup previous effect
5122
+ if (typeof cleanup === "function") {
5123
+ cleanup();
5124
+ }
5125
+
5126
+ // Read current state values
5127
+ const values = states.map(state => state().value);
5128
+
5129
+ // Execute effect
5130
+ cleanup = callback(...values);
5131
+ };
5132
+
5133
+ // Subscribe to states
5134
+ const unsubscribers = states.map(state =>
5135
+ state()._subscribe(execute)
5136
+ );
5137
+
5138
+ // Initial execution
5139
+ execute();
5140
+
5141
+ // Return effect cleanup
5142
+ return () => {
5143
+ unsubscribers.forEach(unsubscribe => {
5144
+ unsubscribe();
5145
+ });
5146
+
5147
+ if (typeof cleanup === "function") {
5148
+ cleanup();
5149
+ cleanup = undefined;
5150
+ }
5151
+ };
5152
+ };
5153
+
4874
5154
  class UseThread {
4875
5155
  #worker;
4876
5156
  #callbacks = new Map();
@@ -5293,4 +5573,4 @@ if(globalThis?.document){
5293
5573
  document?.addEventListener("DOMContentLoaded", __Ziko__.__Config__.init());
5294
5574
  }
5295
5575
 
5296
- export { App, ClickAwayEvent, ClickListeners, Clock, CloneElement, Complex, E, EPSILON, EventController, FileBasedRouting, Flex, For, Fragment, HTMLWrapper, KeyListeners, Matrix, PI$1 as PI, PtrListeners, Random, SPA, STATE_GETTER, SVGWrapper, Scheduler, Suspense, Swap, SwipeEvent, Switch, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement$1 as UIElement, UIFlex, UIFragment, UIHTMLWrapper, UINode, UISVGWrapper, UISwap, UISwitch, UIView, UseRoot, UseThread, View, ViewEvent, ViewListeners, ZikoApp, ZikoSPA, ZikoUISuspense, ZikoUIText, abs, accum_max, accum_min, accum_prod, accum_product, accum_sum, acos$1 as acos, acosh, acot, add, add_class, add_vendor_prefix, and, animation, apply_fun, arc, asin, asinh, atan, atan2, atanh, back, binomial, call_with_optional_props, cbrt, ceil, clamp, clock, cloneUI, complex, contraharmonic_mean, cos$3 as cos, cosh$2 as cosh, coth, croot, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, discret, div, elastic, ema, exp$1 as exp, floor, fract, geo_mean, harmonic_mean, hypot, in_back, in_bounce, in_circ, in_cubic, in_elastic, in_expo, in_out_back, in_out_bounce, in_out_circ, in_out_cubic, in_out_elastic, in_out_expo, in_out_quad, in_out_quart, in_out_quint, in_out_sin, in_quad, in_quart, in_quint, in_sin, interquartile_mean, iqr, isStateGetter, is_primitive, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linear, linkStyle, ln, loop, map$1 as map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, mean, median, midhinge, midrange, min, modulo, mul, nand, nor, norm, normalize_css_value, not, nthr, or, out_back, out_bounce, out_circ, out_cubic, out_elastic, out_expo, out_quad, out_quart, out_quint, out_sin, parseXML, parse_props, percentile, pow$1 as pow, power_mean, q1, q3, rad2deg, register_click_away_event, register_swipe_event, register_view_event, remove_class, rms, rolling_std, rolling_variance, round, sample_std, sample_variance, script, sec, sig, sign, sin$3 as sin, sinh$1 as sinh, sleep, sma, sqrt$2 as sqrt, std, step, step_fps, style, sub, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, trimmed_mean, trunc, useDerived, useEventEmitter, useIPC, useLocalStorage, useMediaQuery, useQueryParams, useReactive, useRoot, useSessionStorage, useState, useThread, useTitle, variance, wait, waitElm, waitForUIElm, waitForUIElmSync, watchQueryParams, weighted_mean, weighted_std, weighted_variance, winsorized_mean, wma, xnor, xor };
5576
+ 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, 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 };