ziko 1.5.0 → 1.6.1

package/dist/ziko.cjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Fri Jul 31 2026 10:36:31 GMT+0100 (UTC+01:00)
+  Date : Fri Jul 31 2026 17:26:32 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
@@ -2252,6 +2252,7 @@ class UIElementCore extends UINode{
     else this.target = element?.parentElement;
     Object.assign(this.cache, {
       name,
+      itemsTarget : this,
       isInteractive : false,
       parent:null,
       isBody:false,
@@ -2288,7 +2289,7 @@ class UIElementCore extends UINode{
   get element(){
     return this.cache.element;
   }
-    [Symbol.iterator]() {
+  [Symbol.iterator](){
     return this.items[Symbol.iterator]();
   }
   maintain() {
@@ -2514,12 +2515,6 @@ class ZikoUIText extends UINode {
 }
 const text = (...str) => new ZikoUIText(...str);
 
-// import { isStateGetter } from "../../../hooks/use-state.js";
-// import { 
-//   is_camelcase,
-//   camel2hyphencase
-//  } from '../../../data/string/index.js';
-
 function append(...ele) {
   __addItem__.call(this, "append", "push", ...ele);
   return this;
@@ -2529,19 +2524,30 @@ function prepend(...ele) {
   return this;
 }
 function insertAt(index, ...ele) {
-  if (index >= this.element.children.length) this.append(...ele);
-  else
+    const target = this.itemsTarget;
+
+    if (index >= target.items.length) return this.append(...ele);
+
     for (let i = 0; i < ele.length; i++) {
-      if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
-      this.element?.insertBefore(ele[i].element, this.items[index].element);
-      this.items.splice(index, 0, ele[i]);
+        if (["number", "string"].includes(typeof ele[i]))
+            ele[i] = text(ele[i]);
+
+        target.element?.insertBefore(
+            ele[i].element,
+            target.items[index].element
+        );
+
+        target.items.splice(index, 0, ele[i]);
     }
-  return this;
+
+    target.maintain();
+
+    return this;
 }
 function remove(...ele) {
   const remove = (ele) => {
     if (typeof ele === "number") ele = this.items[ele];
-    if (ele?.isUIElement) this.element?.removeChild(ele.element);
+    if (ele?.isUIElement) this.itemsTarget.element?.removeChild(ele.element);
     this.items = this.items.filter((n) => n !== ele);
   };
   for (let i = 0; i < ele.length; i++) remove(ele[i]);
@@ -2552,7 +2558,7 @@ function remove(...ele) {
 }
 function clear(){
   this?.items?.forEach(n=>n.unmount());
-  this.element.innerHTML = "";
+  this.itemsTarget.element.innerHTML = '';
   return this;
 }
 function replaceElementWith(new_element){
@@ -2564,12 +2570,12 @@ function replaceElementWith(new_element){
 }
 function after(ui){
   if(ui?.isUIElement) ui=ui.element;
-  this.element?.after(ui);
+  this.itemsTarget.element?.after(ui);
   return this;
 }
 function before(ui){
   if(ui?.isUIElement) ui=ui.element;
-  this.element?.before(ui);
+  this.itemsTarget.element?.before(ui);
   return this;
 }
 
@@ -2577,6 +2583,9 @@ function before(ui){
 
 
 async function __addItem__(adder, pusher, ...ele) {
+  const itemsTarget_el = this.itemsTarget.element;
+  const itemsTarget = this.itemsTarget;
+
   if (this.cache.isFrozzen) {
     console.warn("You can't append new item to frozzen element");
     return this;
@@ -2592,22 +2601,22 @@ async function __addItem__(adder, pusher, ...ele) {
             (newValue) => (ele[i].element.textContent = newValue),
             ele[i] 
         );
-        // this.element.appendChild(textNode);
+        // this.itemsTarget.element.appendChild(textNode);
       }
     }
     if (typeof globalThis?.Node === "function" && ele[i] instanceof globalThis?.Node) ele[i] = new this.constructor(ele[i]);
     if (ele[i]?.isUINode) {
         ele[i].cache.parent = this;
-        this.element?.[adder](ele[i].element);
-        ele[i].target = this.element;
-        this.items[pusher](ele[i]);
+        itemsTarget_el?.[adder](ele[i].element);
+        ele[i].target = this.itemsTarget.element;
+        itemsTarget.items[pusher](ele[i]);
     } 
     else if(ele[i] instanceof Promise){
       const UIEle = await ele[i];
       UIEle.cache.parent = this;
-      this.element?.[adder](UIEle.element);
-      UIEle.target = this.element;
-      this.items[pusher](UIEle);
+      itemsTarget_el?.[adder](UIEle.element);
+      UIEle.target = this.itemsTarget.element;
+      itemsTarget.items[pusher](UIEle);
     }
     else if (ele[i] instanceof Object) {
       if (ele[i]?.style) this.style(ele[i]?.style);
@@ -3119,10 +3128,22 @@ let UIElement$1 = class UIElement extends UIElementCore{
   }
   _off(event, category = 'global'){
     this.exp.events[category].removeListener(event);
+    return this
   }
   get element(){
     return this.cache.element;
   }
+  get itemsTarget(){
+    return this.cache.itemsTarget; 
+  }
+  get itemsTargetElement(){
+    return this.itemsTarget.element;
+  }
+  setItemsTarget(parent){
+    this.cache.itemsTarget = parent;
+    this.items = parent.items;
+    return this;
+  }
   isInteractive(){
     return this.cache.isInteractive;
   }
@@ -3729,14 +3750,14 @@ class UISwap extends UIElement$1 {
         };
         
         this.append(...items);
-        this.#setup();
+        this.render();
     }
     get activeItem(){
         return this.items[this.states.activeIndex]
     }
-    #setup() {
+    render() {
         this.items.forEach((n, i) => {
-            // Store initial display style (fallback to empty string or default)
+
             const initialDisplay = n.element?.style?.display || '';
             this.#DISPLAYS_MAP.set(n, initialDisplay);
 

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Fri Jul 31 2026 10:36:31 GMT+0100 (UTC+01:00)
+  Date : Fri Jul 31 2026 17:26:32 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
@@ -2256,6 +2256,7 @@
        else this.target = element?.parentElement;
        Object.assign(this.cache, {
          name,
+         itemsTarget : this,
          isInteractive : false,
          parent:null,
          isBody:false,
@@ -2292,7 +2293,7 @@
      get element(){
        return this.cache.element;
      }
-       [Symbol.iterator]() {
+     [Symbol.iterator](){
        return this.items[Symbol.iterator]();
      }
      maintain() {
@@ -2518,12 +2519,6 @@
    }
    const text = (...str) => new ZikoUIText(...str);
 
-   // import { isStateGetter } from "../../../hooks/use-state.js";
-   // import { 
-   //   is_camelcase,
-   //   camel2hyphencase
-   //  } from '../../../data/string/index.js';
-
    function append(...ele) {
      __addItem__.call(this, "append", "push", ...ele);
      return this;
@@ -2533,19 +2528,30 @@
      return this;
    }
    function insertAt(index, ...ele) {
-     if (index >= this.element.children.length) this.append(...ele);
-     else
+       const target = this.itemsTarget;
+
+       if (index >= target.items.length) return this.append(...ele);
+
        for (let i = 0; i < ele.length; i++) {
-         if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
-         this.element?.insertBefore(ele[i].element, this.items[index].element);
-         this.items.splice(index, 0, ele[i]);
+           if (["number", "string"].includes(typeof ele[i]))
+               ele[i] = text(ele[i]);
+
+           target.element?.insertBefore(
+               ele[i].element,
+               target.items[index].element
+           );
+
+           target.items.splice(index, 0, ele[i]);
        }
-     return this;
+
+       target.maintain();
+
+       return this;
    }
    function remove(...ele) {
      const remove = (ele) => {
        if (typeof ele === "number") ele = this.items[ele];
-       if (ele?.isUIElement) this.element?.removeChild(ele.element);
+       if (ele?.isUIElement) this.itemsTarget.element?.removeChild(ele.element);
        this.items = this.items.filter((n) => n !== ele);
      };
      for (let i = 0; i < ele.length; i++) remove(ele[i]);
@@ -2556,7 +2562,7 @@
    }
    function clear(){
      this?.items?.forEach(n=>n.unmount());
-     this.element.innerHTML = "";
+     this.itemsTarget.element.innerHTML = '';
      return this;
    }
    function replaceElementWith(new_element){
@@ -2568,12 +2574,12 @@
    }
    function after(ui){
      if(ui?.isUIElement) ui=ui.element;
-     this.element?.after(ui);
+     this.itemsTarget.element?.after(ui);
      return this;
    }
    function before(ui){
      if(ui?.isUIElement) ui=ui.element;
-     this.element?.before(ui);
+     this.itemsTarget.element?.before(ui);
      return this;
    }
 
@@ -2581,6 +2587,9 @@
 
 
    async function __addItem__(adder, pusher, ...ele) {
+     const itemsTarget_el = this.itemsTarget.element;
+     const itemsTarget = this.itemsTarget;
+
      if (this.cache.isFrozzen) {
        console.warn("You can't append new item to frozzen element");
        return this;
@@ -2596,22 +2605,22 @@
                (newValue) => (ele[i].element.textContent = newValue),
                ele[i] 
            );
-           // this.element.appendChild(textNode);
+           // this.itemsTarget.element.appendChild(textNode);
          }
        }
        if (typeof globalThis?.Node === "function" && ele[i] instanceof globalThis?.Node) ele[i] = new this.constructor(ele[i]);
        if (ele[i]?.isUINode) {
            ele[i].cache.parent = this;
-           this.element?.[adder](ele[i].element);
-           ele[i].target = this.element;
-           this.items[pusher](ele[i]);
+           itemsTarget_el?.[adder](ele[i].element);
+           ele[i].target = this.itemsTarget.element;
+           itemsTarget.items[pusher](ele[i]);
        } 
        else if(ele[i] instanceof Promise){
          const UIEle = await ele[i];
          UIEle.cache.parent = this;
-         this.element?.[adder](UIEle.element);
-         UIEle.target = this.element;
-         this.items[pusher](UIEle);
+         itemsTarget_el?.[adder](UIEle.element);
+         UIEle.target = this.itemsTarget.element;
+         itemsTarget.items[pusher](UIEle);
        }
        else if (ele[i] instanceof Object) {
          if (ele[i]?.style) this.style(ele[i]?.style);
@@ -3123,10 +3132,22 @@
      }
      _off(event, category = 'global'){
        this.exp.events[category].removeListener(event);
+       return this
      }
      get element(){
        return this.cache.element;
      }
+     get itemsTarget(){
+       return this.cache.itemsTarget; 
+     }
+     get itemsTargetElement(){
+       return this.itemsTarget.element;
+     }
+     setItemsTarget(parent){
+       this.cache.itemsTarget = parent;
+       this.items = parent.items;
+       return this;
+     }
      isInteractive(){
        return this.cache.isInteractive;
      }
@@ -3733,14 +3754,14 @@
            };
            
            this.append(...items);
-           this.#setup();
+           this.render();
        }
        get activeItem(){
            return this.items[this.states.activeIndex]
        }
-       #setup() {
+       render() {
            this.items.forEach((n, i) => {
-               // Store initial display style (fallback to empty string or default)
+
                const initialDisplay = n.element?.style?.display || '';
                this.#DISPLAYS_MAP.set(n, initialDisplay);