ziko 1.3.0 → 1.5.0

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Thu Jul 30 2026 19:50:38 GMT+0100 (UTC+01:00)
+  Date : Fri Jul 31 2026 10:36:31 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
@@ -54,122 +54,212 @@ const base2base = (value, fromBase, toBase) => {
     return dec.toString(toBase);
 };
 
-const arithmetic_helper=(op, x, y)=>{
-    if(typeof x === 'number'){
-        if(typeof y === 'number'){
-            switch(op){
-                case 'add' : return x + y;
-                case 'sub' : return x - y;
-                case 'mul' : return x * y;
-                case 'div' : return x / y;
-                case 'modulo' : return x % y;
-            }
-        }
-        if(y?.isComplex?.()) x = new y.constructor(x, 0);
-        if(y?.isMatrix?.()) x = y.constructor.nums(y.rows, y.cols, x);
-        return x[op](y)
-    }
-    if(x?.isComplex?.()){
-        if(typeof y === 'number' || y?.isComplex?.()) return x.clone()[op](y);
-        if(y?.isMatrix?.()){
-            x = y.constructor.nums(y.rows, y.cols, x);
-            return x.clone()[op](y)
-        }
-    }
-    if(x?.isMatrix?.()){
-        return x.clone()[op](y)
-    }    
+const percentile = (X, p) => {
+  if (X.length === 0) 
+    return NaN;
+  let a = X.sort((x, y) => x - y);
+  let index = (p / 100) * (a.length - 1);
+  let i = Math.floor(index);
+  let f = index - i;
+  if (i === a.length - 1) 
+    return a[i]; 
+  return a[i] * (1 - f) + a[i + 1] * f;
 };
-const add=(a,...b)=>{
-    let res = a;
-    for(let i=0; i<b.length; i++)
-        res = arithmetic_helper('add', res, b[i]);
-    return res;
+
+const q1 = X => percentile(X, 25); 
+const median = X => percentile(X, 50); 
+const q3 = X => percentile(X, 75); 
+
+// Interquartile Range
+const iqr = X => q3(X) - q1(X);
+
+// Mean
+const mean = (...x) => x.reduce((a, b) => a + b) / x.length;
+const geo_mean = (...x) => (x.reduce((a, b) => a * b)) ** (1/x.length);
+// Quadratic Mean
+const rms = (...x) => {
+    const n = x.length;
+    return (Math.hypot(...x)/n)**(1/n)
 };
-const sub=(a,...b)=>{
-    let res = a;
-    for(let i=0; i<b.length; i++)
-        res = arithmetic_helper('sub', res, b[i]);
-    return res;
+
+const weighted_mean=(values, weights)=>{
+  let sum = 0, sw = 0;
+  for (let i = 0; i < values.length; i++) {
+    sum += values[i] * weights[i];
+    sw += weights[i];
+  }
+  return sum / sw;
 };
-const mul=(a,...b)=>{
-    let res = a;
-    for(let i=0; i<b.length; i++)
-        res = arithmetic_helper('mul', res, b[i]);
-    return res;
+
+const harmonic_mean = (...x) => {
+  let s = 0, i = 0;
+  for(i=0; i<x.length; i++) 
+    s += 1/x[i];
+  return x.length / s;
 };
-const div=(a,...b)=>{
-    let res = a;
-    for(let i=0; i<b.length; i++)
-        res = arithmetic_helper('div', res, b[i]);
-    return res;
+
+const power_mean = (X, p) =>{
+  let s = 0, i = 0, l = X.length;
+  for(i=0; i < l; i++) 
+    s+= X[i]**p;
+  return (s / l) ** (1 / p);
 };
-const modulo=(a,...b)=>{
-    let res = a;
-    for(let i=0; i<b.length; i++)
-        res = arithmetic_helper('modulo', res, b[i]);
-    return res;
-};
-
-const min = (...x) => Math.min(...x);
-const max = (...x) => Math.max(...x);
 
-const binomial = (n, k) =>{
-  if(n !== Math.floor(n)) return TypeError('n must be an integer');
-  if(k !== Math.floor(k)) return TypeError('k must be an integer');
-  if (n < 0) return TypeError('n must be non-negative');
-  if (k < 0 || n < 0 || k > n) return 0;
-  if (k > n - k) k = n - k;
-    let c = 1, i;
-    for (i = 0; i < k; i++)
-        c = c * (n - i) / (i + 1);
-    return c;
+const trimmed_mean = (X, k) =>{
+  let a = [...X].sort((a,b)=>a-b).slice(k, X.length - k);
+  return mean(...a);
+};
+
+const winsorized_mean = (X, k) =>{
+  let a = [...X].sort((a,b)=>a-b);
+  let low = a[k], high = a[a.length - k - 1];
+  a = a.map(x => Math.max(low, Math.min(high, x)));
+  return mean(a);
+};
+
+const midrange = (x) =>{
+  let min = Math.min(...x);
+  let max = Math.max(...x);
+  return (min + max) / 2;
+};
+
+const midhinge = (...x) =>{
+  let a = x.sort((a,b)=>a-b);
+  let q1 = a[Math.floor((a.length - 1) * 0.25)];
+  let q3 = a[Math.floor((a.length - 1) * 0.75)];
+  return (q1 + q3) / 2;
+};
+
+
+const interquartile_mean = (...x) =>{
+  let a = x.sort((a,b)=>a-b);
+  let q1 = a[Math.floor((a.length - 1) * 0.25)];
+  let q3 = a[Math.floor((a.length - 1) * 0.75)];
+  let m = a.filter(x => x >= q1 && x <= q3);
+  return mean(m);
 };
 
-const mean = (...x) => x.reduce((a, b) => a + b) / x.length;
 
+const contraharmonic_mean = (...x) =>{
+  let num = 0, den = 0, i, l = x.length;
+  for(i = 0; i < l; i++){
+    num += x[i]**2;
+    den += x[i];
+  }
+  return num / den;
+};
+
+// Population Variance
 const variance = (...x) => {
   const n = x.length;
   if (n === 0) return NaN;
   const x_mean = mean(...x);
   return x.reduce((sum, xi) => sum + (xi - x_mean) ** 2, 0) / n;
 };
-
 const std = (...x) => Math.sqrt(variance(...x));
 
-const accum_sum = (...x) => {
+const sample_variance = (...x) => {
+  const n = x.length;
+  if (n < 2) return NaN;
+  const x_mean = mean(...x);
+  return x.reduce((sum, xi) => sum + (xi - x_mean) ** 2, 0) / (n - 1);
+};
+const sample_std = (...x) => Math.sqrt(sample_variance(...x));
+
+const weighted_variance = (X, weights) => {
+  const n = X.length;
+  if (n === 0 || weights.length !== n) return NaN;
+  const sw = weights.reduce((sum, w) => sum + w, 0);
+  const mean = X.reduce((sum, x, i) => sum + x * weights[i], 0) / sw;
+  return X.reduce((sum, x, i) => sum + weights[i] * (x - mean) ** 2, 0) / sw;
+};
+const weighted_std = (X, weights) => Math.sqrt(weighted_variance(X, weights));
+
+const rolling_variance = (X, windowSize) => {
+  if (windowSize < 1 || X.length < windowSize) return [];
   let result = [];
-  let total = 0, i, n = x.length;
-  for(i = 0; i < n ; i++){
-    total = add(total, x[i]);
+  for (let i = 0; i <= X.length - windowSize; i++) {
+    const w = X.slice(i, i + windowSize);
+    result.push(sample_variance(w)); // usually sample variance for rolling
+  }
+  return result;
+};
+const rolling_std = (X, windowSize) => Math.sqrt(rolling_variance(X, windowSize));
+
+// Simple Moving Average
+const sma = (X, w) =>{
+  let r = [];
+  for (let i = 0; i <= X.length - w; i++) {
+    let s = 0;
+    for (let j = 0; j < w; j++) s += X[i + j];
+    r.push(s / w);
+  }
+  return r;
+};
+
+// exponential Moving Average
+const ema = (X, alpha) =>{
+  let r = [], prev = X[0];
+  r.push(prev);
+  for (let i = 1; i < X.length; i++) {
+    prev = alpha * X[i] + (1 - alpha) * prev;
+    r.push(prev);
+  }
+  return r;
+};
+
+// weightedMovingAverage
+const wma = (X, weights) =>{
+  let k = weights.length;
+  let sw = weights.reduce((a,b)=>a+b, 0);
+  let r = [];
+  for (let i = 0; i <= X.length - k; i++) {
+    let s = 0;
+    for (let j = 0; j < k; j++) s += X[i+j] * weights[j];
+    r.push(s / sw);
+  }
+  return r;
+};
+
+const accum_sum = (arr) => {
+  let result = [];
+  let total = 0;
+  for (let x of arr) {
+    total += x;
     result.push(total);
   }
   return result;
 };
 
-const accum_prod = (...x) => {
+const accum_product = (arr) => {
   let result = [];
-  let prod = 1, i, n = x.length;
-  for(i = 0; i < n ; i++){
-    prod = mul(prod, x[i]);
+  let prod = 1;
+  for (let x of arr) {
+    prod *= x;
     result.push(prod);
   }
   return result;
 };
 
-const percentile = (X, p) => {
-  if (X.length === 0) 
-    return NaN;
-  let a = [...X].sort((x, y) => x - y);
-  let index = (p / 100) * (a.length - 1);
-  let i = Math.floor(index);
-  let f = index - i;
-  if (i === a.length - 1) 
-    return a[i]; 
-  return a[i] * (1 - f) + a[i + 1] * f;
+const accum_max = (arr) => {
+  let result = [];
+  let m = -Infinity;
+  for (let x of arr) {
+    m = Math.max(m, x);
+    result.push(m);
+  }
+  return result;
 };
 
-const median = X => percentile(X, 50);
+const accum_min = (arr) => {
+  let result = [];
+  let m = Infinity;
+  for (let x of arr) {
+    m = Math.min(m, x);
+    result.push(m);
+  }
+  return result;
+};
 
 class Random {
     static int(a, b){
@@ -244,9 +334,9 @@ class Random {
     static get sample(){
         const R = this;
         return {
-            int   : (n,a,b) => Array.from({length:n}, () => R.int(a,b)),
-            float : (n,a,b) => Array.from({length:n}, () => R.float(a,b)),
-            char  : (n,upper=false) => Array.from({length:n}, () => R.char(upper)),
+            int   : (n, a, b) => Array.from({length:n}, () => R.int(a, b)),
+            float : (n, a, b) => Array.from({length:n}, () => R.float(a, b)),
+            char  : (n, upper=false) => Array.from({length:n}, () => R.char(upper)),
             bool  : n => Array.from({length:n}, () => R.bool()),
             bin   : n => Array.from({length:n}, () => R.bin()),
             oct   : n => Array.from({length:n}, () => R.oct()),
@@ -887,6 +977,63 @@ const sig = (...x) => mapfun$1(
     ...x
 );
 
+const arithmetic_helper=(op, x, y)=>{
+    if(typeof x === 'number'){
+        if(typeof y === 'number'){
+            switch(op){
+                case 'add' : return x + y;
+                case 'sub' : return x - y;
+                case 'mul' : return x * y;
+                case 'div' : return x / y;
+                case 'modulo' : return x % y;
+            }
+        }
+        if(y?.isComplex?.()) x = new y.constructor(x, 0);
+        if(y?.isMatrix?.()) x = y.constructor.nums(y.rows, y.cols, x);
+        return x[op](y)
+    }
+    if(x?.isComplex?.()){
+        if(typeof y === 'number' || y?.isComplex?.()) return x.clone()[op](y);
+        if(y?.isMatrix?.()){
+            x = y.constructor.nums(y.rows, y.cols, x);
+            return x.clone()[op](y)
+        }
+    }
+    if(x?.isMatrix?.()){
+        return x.clone()[op](y)
+    }    
+};
+const add=(a,...b)=>{
+    let res = a;
+    for(let i=0; i<b.length; i++)
+        res = arithmetic_helper('add', res, b[i]);
+    return res;
+};
+const sub=(a,...b)=>{
+    let res = a;
+    for(let i=0; i<b.length; i++)
+        res = arithmetic_helper('sub', res, b[i]);
+    return res;
+};
+const mul=(a,...b)=>{
+    let res = a;
+    for(let i=0; i<b.length; i++)
+        res = arithmetic_helper('mul', res, b[i]);
+    return res;
+};
+const div=(a,...b)=>{
+    let res = a;
+    for(let i=0; i<b.length; i++)
+        res = arithmetic_helper('div', res, b[i]);
+    return res;
+};
+const modulo=(a,...b)=>{
+    let res = a;
+    for(let i=0; i<b.length; i++)
+        res = arithmetic_helper('modulo', res, b[i]);
+    return res;
+};
+
 const deg2rad = (...deg) => mapfun$1(x => x * Math.PI / 180, ...deg);
 const rad2deg = (...rad) => mapfun$1(x => x / Math.PI * 180, ...rad);
 
@@ -931,6 +1078,66 @@ const atan2 = (y, x, rad = true) => {
     return rad ? phi : phi * 180 / Math.PI;
 };
 
+const min = (...x) => Math.min(...x);
+const max = (...x) => Math.max(...x);
+
+const binomial = (n, k) =>{
+  if(n !== Math.floor(n)) return TypeError('n must be an integer');
+  if(k !== Math.floor(k)) return TypeError('k must be an integer');
+  if (n < 0) return TypeError('n must be non-negative');
+  if (k < 0 || n < 0 || k > n) return 0;
+  if (k > n - k) k = n - k;
+    let c = 1, i;
+    for (i = 0; i < k; i++)
+        c = c * (n - i) / (i + 1);
+    return c;
+};
+
+// export const mean = (...x) => x.reduce((a, b) => a + b) / x.length;
+
+// export const variance = (...x) => {
+//   const n = x.length;
+//   if (n === 0) return NaN;
+//   const x_mean = mean(...x);
+//   return x.reduce((sum, xi) => sum + (xi - x_mean) ** 2, 0) / n;
+// };
+
+// export const std = (...x) => Math.sqrt(variance(...x));
+
+// export const accum_sum = (...x) => {
+//   let result = [];
+//   let total = 0, i, n = x.length;
+//   for(i = 0; i < n ; i++){
+//     total = add(total, x[i])
+//     result.push(total);
+//   }
+//   return result;
+// };
+
+const accum_prod = (...x) => {
+  let result = [];
+  let prod = 1, i, n = x.length;
+  for(i = 0; i < n ; i++){
+    prod = mul(prod, x[i]);
+    result.push(prod);
+  }
+  return result;
+};
+
+// export const percentile = (X, p) => {
+//   if (X.length === 0) 
+//     return NaN;
+//   let a = [...X].sort((x, y) => x - y);
+//   let index = (p / 100) * (a.length - 1);
+//   let i = Math.floor(index);
+//   let f = index - i;
+//   if (i === a.length - 1) 
+//     return a[i]; 
+//   return a[i] * (1 - f) + a[i + 1] * f;
+// }
+
+// export const median = X => percentile(X, 50);
+
 const not = x => {
     if(x.isComplex?.()) return new x.constructor(not(x.a), not(x.b))
     if(x.isMatrix?.()) return new x.constructor(x.rows, x.cols, x.arr.flat(1).map(not))
@@ -2889,7 +3096,14 @@ let UIElement$1 = class UIElement extends UIElementCore{
 
     if(element)this.init(element, name, type, render);
   }
-  on(event_name, callback, {details_setter, category = 'global', isCustom = false,preventDefault = false} = {}){
+  on(event_name, callback, {details_setter, category = 'global', isCustom = false, preventDefault = false} = {}){
+    if(event_name instanceof Array) event_name.forEach(
+      event => this.on(
+        event, 
+        callback, 
+        {details_setter, category, isCustom, preventDefault}
+      )
+    );
     if(category && !this.exp.events.hasOwnProperty(category)) this.exp.events[category] = new EventController(this, category);
     isCustom && this.exp.events[category].cache.customEvents.add(event_name);
     const EVENT = this.exp.events[category];
@@ -3559,6 +3773,34 @@ class UISwap extends UIElement$1 {
 
 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});
+
 const { PI, sqrt: sqrt$1, cos: cos$2, sin: sin$2, acos, pow } = Math;
 
 const linear = t => t;
@@ -4964,4 +5206,4 @@ if(globalThis?.document){
     document?.addEventListener("DOMContentLoaded", __Ziko__.__Config__.init());
 }
 
-export { App, ClickAwayEvent, ClickListeners, Clock, CloneElement, Complex, E, EPSILON, EventController, FileBasedRouting, Flex, HTMLWrapper, KeyListeners, Matrix, PI$1 as PI, PtrListeners, Random, SPA, SVGWrapper, Scheduler, Suspense, Swap, SwipeEvent, Switch, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement$1 as UIElement, UIFlex, UIHTMLWrapper, UINode, UISVGWrapper, UISwap, UISwitch, UIView, UseRoot, UseThread, View, ViewEvent, ViewListeners, ZikoApp, ZikoSPA, ZikoUISuspense, ZikoUIText, abs, accum_prod, 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, cos$3 as cos, cosh$2 as cosh, coth, croot, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, discret, div, elastic, exp$1 as exp, floor, fract, 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, isPrimitive, isStateGetter, 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, min, modulo, mul, nand, nor, norm, normalize_css_value, nthr, or, out_back, out_bounce, out_circ, out_cubic, out_elastic, out_expo, out_quad, out_quart, out_quint, out_sin, percentile, pow$1 as pow, rad2deg, register_click_away_event, register_swipe_event, register_view_event, remove_class, round, script, sec, sig, sign, sin$3 as sin, sinh$1 as sinh, sleep, 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, trunc, useDerived, useEventEmitter, useIPC, useLocalStorage, useMediaQuery, useQueryParams, useReactive, useRoot, useSessionStorage, useState, useThread, useTitle, variance, wait, waitElm, waitForUIElm, waitForUIElmSync, watchQueryParams, xnor, xor };
+export { App, 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, 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, isPrimitive, isStateGetter, 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, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "A versatile JavaScript library offering a rich set of Hyperscript Based UI components, advanced mathematical utilities, interactivity ,animations, client side routing and more ...",
   "keywords": [
     "front-end",

package/src/dom/components/for/index.js

@@ -0,0 +1,17 @@
+import { Fragment, UIFragment } from "../fragment/index.js";
+
+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))
+        )
+    }
+}
+
+export const For = ({each, fallback, mapFn} = {}) => new UIFor({each, fallback, mapFn})

package/src/dom/components/fragment/index.d.ts

@@ -0,0 +1,36 @@
+import { UIElement } from "../../constructors/UIElement.js";
+
+/**
+ * A zero-DOM container primitive that wraps child items using a DocumentFragment.
+ */
+export class UIFragment extends UIElement {
+  /**
+   * Creates a new UIFragment instance.
+   * 
+   * @param items Initial UI elements or primitives to group within the fragment.
+   */
+  constructor(...items: UIElement[]);
+
+  /**
+   * Identifies whether the element instance is a UIFragment.
+   * 
+   * @returns Always returns true.
+   */
+  isFragment(): true;
+}
+
+/**
+ * Factory function to create a new `UIFragment` instance.
+ * 
+ * @param items Child elements or primitives to include in the fragment.
+ * @returns A new UIFragment instance.
+ * 
+ * @example
+ * ```ts
+ * const group = Fragment(p("Item 1"), p("Item 2"));
+ * if (group.isFragment()) {
+ *   // Unpack or handle fragment logic
+ * }
+ * ```
+ */
+export function Fragment(...items: UIElement[]): UIFragment;

package/src/dom/components/fragment/index.js

@@ -0,0 +1,13 @@
+import { UIElement } from "../../constructors/UIElement.js";
+
+export class UIFragment extends UIElement{
+    constructor(...items){
+        super({ element : document.createDocumentFragment()})
+        this.append(...items);
+    }
+    isFragment(){
+        return true
+    }
+}
+
+export const Fragment = (...items) => new UIFragment(...items)

package/src/dom/components/index.js

@@ -1 +1,3 @@
-export * from './swap/index.js'
+export * from './swap/index.js'
+export * from './fragment/index.js'
+export * from './for/index.js'

package/src/dom/constructors/UIElement.js

@@ -38,7 +38,14 @@ class UIElement extends UIElementCore{
 
     if(element)this.init(element, name, type, render)
   }
-  on(event_name, callback, {details_setter, category = 'global', isCustom = false,preventDefault = false} = {}){
+  on(event_name, callback, {details_setter, category = 'global', isCustom = false, preventDefault = false} = {}){
+    if(event_name instanceof Array) event_name.forEach(
+      event => this.on(
+        event, 
+        callback, 
+        {details_setter, category, isCustom, preventDefault}
+      )
+    )
     if(category && !this.exp.events.hasOwnProperty(category)) this.exp.events[category] = new EventController(this, category);
     isCustom && this.exp.events[category].cache.customEvents.add(event_name)
     const EVENT = this.exp.events[category];