ziko 2.0.0-beta.15.1 → 2.0.0-beta.16.1

package/dist/ziko.cjs

@@ -1,10 +1,10 @@
 
 /*
-  Project: ziko.js
+  Project: ziko
   Author: Zakaria Elalaoui
-  Date : Mon Sep 07 2026 22:41:50 GMT+0100 (UTC+01:00)
-  Git-Repo : https://github.com/zakarialaoui10/ziko.js
-  Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
+  Date: 2026-10-05
+  Git-Repo : https://github.com/zikojs/ziko
+  Git-Wiki : https://github.com/zikojs/ziko/wiki
   Released under MIT License
 */
 
@@ -44,7 +44,7 @@ const apply_fun = (x, fn) => {
         x.cols,
         x.arr.flat(1).map(fn)
     )
-    if (x instanceof Array) mapfun(fn, ...x);
+    if (x instanceof Array) return mapfun(fn, ...x)
     return fn(x)
 };
 
@@ -63,7 +63,7 @@ const clamp = (x, min, max) => apply_fun(
     x, 
     v => Math.min(Math.max(v, min), max)
 );
-const map$1 = (x, a, b, c, d) => apply_fun(
+const map = (x, a, b, c, d) => apply_fun(
     x, 
     v => lerp(norm(v, a, b), c, d)
 );
@@ -106,7 +106,7 @@ class UINode {
     } 
 }
 
-function parseQueryParams(queryString) {
+function parseQueryParams$1(queryString) {
     const params = {};
     queryString.replace(/[A-Z0-9]+?=([\w|:|\/\.]*)/gi, (match) => {
         const [key, value] = match.split('=');
@@ -119,7 +119,7 @@ function defineParamsGetter(target ){
     Object.defineProperties(target, {
         'QueryParams': {
             get: function() {
-                return parseQueryParams(globalThis.location.search.substring(1));
+                return parseQueryParams$1(globalThis.location.search.substring(1));
             },
             configurable: false,
             enumerable: true 
@@ -375,41 +375,6 @@ function _register_to_class_(target, mixin) {
   }
 }
 
-function mount(target = this.target, delay = 0) {
-    if (delay > 0) {
-        setTimeout(() => this.mount(target, 0), delay);
-        return this;
-    }
-    if (this.isBody) return this;
-    if (target?.isUIElement) target = target.element;
-    this.target = target;
-    this.target?.appendChild(this.element);
-    return this;
-}
-
-function unmount(delay = 0) {
-    if (delay > 0) {
-        setTimeout(() => this.unmount(0), delay);
-        return this;
-    }
-    if (this.cache.parent) {
-        this.cache.parent.remove(this);
-    } else if (
-        this.target?.children?.length &&
-        [...this.target.children].includes(this.element)
-    ) {
-        this.target.removeChild(this.element);
-    }
-
-    return this;
-}
-
-var LifecycleMethods = /*#__PURE__*/Object.freeze({
-   __proto__: null,
-   mount: mount,
-   unmount: unmount
-});
-
 const STATE_GETTER = Symbol.for("ziko/hooks/STATE_GETTER");
 
 function useState(initialValue) {
@@ -464,11 +429,97 @@ function useState(initialValue) {
 
 const isStateGetter = (arg) => typeof arg === "function" && arg[STATE_GETTER] === true;
 
-// import { 
-//   is_camelcase,
-//   camel2hyphencase
-//  } from '../../../data/string/index.js'
+const camel2hyphencase = (text = '') =>
+  text.replace(/[A-Z]/g, (match, index) =>
+    index ? `-${match.toLowerCase()}` : match.toLowerCase()
+  );
+const camel2snakecase = (text = '') =>
+  text.replace(/[A-Z]/g, (match, index) =>
+    index ? `_${match.toLowerCase()}` : match.toLowerCase()
+  );
+const camel2pascalcase = (text = '') => text.charAt(0).toUpperCase() + text.slice(1);
+const camel2constantcase = (text = '') => text
+    .replace(/[A-Z]/g, (match, index) =>
+      index ? `_${match}` : match
+    )
+    .toUpperCase();
+
+
+const pascal2snakecase = (text = '') =>
+  text.replace(/[A-Z]/g, (match, offset) =>
+    offset === 0
+      ? match.toLowerCase()
+      : `_${match.toLowerCase()}`
+  );
+
+const pascal2hyphencase = (text = '') =>
+  text.replace(/[A-Z]/g, (match, offset) =>
+    offset === 0
+      ? match.toLowerCase()
+      : `-${match.toLowerCase()}`
+  );
+
+const pascal2constantcase = (text = '') =>
+  text
+    .replace(/[A-Z]/g, (match, offset) =>
+      offset === 0 ? match : `_${match}`
+    )
+    .toUpperCase();
+const pascal2camelcase = (text = '') => text.charAt(0).toLowerCase() + text.slice(1);
+
+const snake2camelcase = (text = '') => text.replace(/_([a-zA-Z])/g, (_, char) => char.toUpperCase());
+const snake2hyphencase = (text = '') => text.replace(/_/g, '-');
+const snake2pascalcase = (text = '') => text
+    .split('_')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
+const snake2constantcase = (text = '') => text.toUpperCase();
+
+const hyphen2camelcase = (text = '') => text.replace(/-([a-zA-Z])/g, (_, char) => char.toUpperCase());
+const hyphen2snakecase = (text = '') => text.replace(/-/g, '_');
+const hyphen2pascalcase = (text = '') => text
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
+const hyphen2constantcase = (text = '') => text.replace(/-/g, '_').toUpperCase();
+
+const constant2camelcase = (text = '') => text.toLowerCase().replace(/_([a-z])/g, (_, char) => char.toUpperCase());
+const constant2snakecase = (text = '') => text.toLowerCase();
+const constant2pascalcase = (text = '') => text
+    .toLowerCase()
+    .split('_')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
+const constant2hyphencase = (text = '') => text.toLowerCase().replace(/_/g, '-');
+
+const is_camelcase = (text = '') =>{
+    if (text.length === 0) return false; 
+    const camelCasePattern = /^[a-z][a-zA-Z0-9]*$/;
+    return camelCasePattern.test(text);
+};
+const is_hyphencase = (text = '') => text.split('-').length > 0;
+const is_snakeCase = (text = '') => text.split('_').length > 0;
+const is_pascalcalse = (text = '') => {
+    if (text.length === 0) return false;
+    const PascalCasePattern = /^[A-Z][a-zA-Z0-9]*$/;
+    return PascalCasePattern.test(text);
+};
 
+const is_palindrome = text =>{
+    const str = text.toLocaleLowerCase();
+    let l = str.length,i;
+    for(i=0;i<l/2;i++)if(str[i]!=str[l-i-1])return false;
+    return true;
+};
+
+const is_anagram = (word, words) =>{
+        word=word.split("").sort();
+        words=words.split("").sort();
+        return JSON.stringify(word)===JSON.stringify(words);    
+};
+
+const is_isogram = (text = '') => [...new Set(text.toLowerCase())].length === text.length;
+
 function setAttr(name, value) {
   if(name instanceof Object){
     const [names,values]=[Object.keys(name),Object.values(name)];
@@ -499,7 +550,7 @@ function setContentEditable(bool = true) {
 
 function _set_attrs_(name, value){
     if(globalThis.SVGAElement && this.element instanceof globalThis.SVGAElement) name = is_camelcase(name) ? camel2hyphencase(name) : name;
-    if(this?.attr[name] && this?.attr[name]===value) return;
+    // if(this?.attr[name] && this?.attr[name]===value) return;
     if(isStateGetter(value)){
         const getter = value();
         getter._subscribe(
@@ -508,7 +559,7 @@ function _set_attrs_(name, value){
         );
     }
     else this.element?.setAttribute(name, value);
-    Object.assign(this.cache.attributes, {[name]:value});   
+    // Object.assign(this.cache.attributes, {[name]:value});   
 }
 
 var AttrsMethods = /*#__PURE__*/Object.freeze({
@@ -531,176 +582,6 @@ class UIText extends UINode {
 }
 const text = (...str) => new UIText(...str);
 
-function append(...ele) {
-  __addItems__.call(this, "append", "push", ...ele);
-  return this;
-}
-function prepend(...ele) {
-  this.__addItems__.call(this, "prepend", "unshift", ...ele);
-  return this;
-}
-function insertAt(index, ...ele) {
-    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]);
-        target.element?.insertBefore(
-            ele[i].element,
-            target.items[index].element
-        );
-        target.items.splice(index, 0, ele[i]);
-    }
-    target.maintain();
-    return this;
-}
-function remove(...ele) {
-  const remove = (ele) => {
-    if (typeof ele === "number") ele = this.items[ele];
-    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]);
-  for (let i = 0; i < this.items.length; i++)
-    Object.assign(this, { [[i]]: this.items[i] });
-  // Remove from item
-  return this;
-}
-function clear(){
-  this?.items?.forEach(n=>n.unmount());
-  this.itemsTarget.element.innerHTML = '';
-  return this;
-}
-function replaceElementWith(new_element){
-    this.cache.element.replaceWith(new_element);
-    this.cache.element = new_element;
-    // To do : Dispose Events and States 
-    return this
-}
-function after(ui){
-  if(ui?.isUIElement) ui = ui.element;
-  this.itemsTarget.element?.after(ui);
-  return this;
-}
-function before(ui){
-  if(ui?.isUIElement) ui = ui.element;
-  this.itemsTarget.element?.before(ui);
-  return this;
-}
-
-async function __addItem__(adder, pusher, item, referenceNode = null, index = null) {
-  const { element: itemsTargetEl, items } = this.itemsTarget;
-  if (["number", "string"].includes(typeof item)) item = text(item);
-  if (typeof item === "function" && isStateGetter(item)) {
-    const getter = item();
-    item = text(getter.value);
-    getter._subscribe(
-      (newValue) => { item.element.textContent = newValue; },
-      item
-    );
-  }
-  if (typeof globalThis?.Node === "function" && item instanceof globalThis.Node)
-    item = new this.constructor(item);
-  if (item instanceof Promise) item = await item;
-  if (item?.isUINode) {
-    item.cache.parent = this;
-    item.target = itemsTargetEl;
-    if (adder === "insertBefore" && itemsTargetEl) 
-      itemsTargetEl.insertBefore(item.element, referenceNode);
-    else if (typeof itemsTargetEl?.[adder] === "function") 
-      itemsTargetEl[adder](item.element);
-    if (pusher === "splice" && index !== null) items.splice(index, 0, item);
-    else if (typeof items?.[pusher] === "function") items[pusher](item);
-    return;
-  }
-}
-
-async function __addItems__(adder, pusher, ...elements) {
-  for (const item of elements) {
-    await this.__addItem__(adder, pusher, item);
-  }
-  this.maintain();
-  return this;
-}
-
-var DomMethods = /*#__PURE__*/Object.freeze({
-   __proto__: null,
-   __addItem__: __addItem__,
-   __addItems__: __addItems__,
-   after: after,
-   append: append,
-   before: before,
-   clear: clear,
-   insertAt: insertAt,
-   prepend: prepend,
-   remove: remove,
-   replaceElementWith: replaceElementWith
-});
-
-function at(index) {
-  return this.items.at(index);
-}
-function forEach(callback) {
-  this.items.forEach(callback);
-  return this;
-}
-function map(callback) {
-  return this.items.map(callback);
-}
-function find(condition) {
-  return this.items.filter(condition);
-}
-
-var IndexingMethods = /*#__PURE__*/Object.freeze({
-   __proto__: null,
-   at: at,
-   find: find,
-   forEach: forEach,
-   map: map
-});
-
-function style(styles){
-    if(!this.element?.style) return this;
-    for(let key in styles){
-        const value = styles[key];
-        if(isStateGetter(value)){
-            const getter = value();
-            Object.assign(this.element.style, {[key] : getter.value});
-            getter._subscribe(
-                (newValue) => {
-                    console.log({newValue});
-                    Object.assign(this.element.style, {[key] : newValue});
-                },
-                // this 
-            );
-        }
-        else Object.assign(this.element.style, {[key] : value});
-    }
-    return this;
-}
-function size(width, height){
-    return this.style({width, height})
-}
-function hide(){
-
-}
-function show(){
-
-}
-function animate(keyframe, {duration=1000, iterations=1, easing="ease"}={}){
-    this.element?.animate(keyframe,{duration, iterations, easing});
-    return this;
-}
-
-var StyleMethods = /*#__PURE__*/Object.freeze({
-   __proto__: null,
-   animate: animate,
-   hide: hide,
-   show: show,
-   size: size,
-   style: style
-});
-
 class EventController {
   constructor(target, category){
     this.cache = {
@@ -1267,118 +1148,280 @@ function register_swipe_event(
   };
 }
 
-class UIElement extends UIElement$1{
-  constructor({element, name ='', type = 'html', render = __Ziko__.__Config__.default.render, props}={}){
+class UIElement extends UIElement$1 {
+  constructor({
+    element,
+    name = "",
+    type = "html",
+    render = __Ziko__.__Config__.default.render,
+    props,
+  } = {}) {
     super();
     this.exp = {
-      events : {
-
-      }
+      events: {},
     };
     register_to_class(
-      this, 
-      LifecycleMethods,
-      AttrsMethods, 
-      DomMethods, 
-      StyleMethods,
-      IndexingMethods,
+      this,
+      // LifecycleMethods,
+      AttrsMethods,
+      // DomMethods,
+      // StyleMethods,
+      // IndexingMethods,
       PtrListeners,
       ClickListeners,
       KeyListeners,
       ViewListeners,
     );
 
-    if(element) this.init({element, name, type, render, props});
+    if (element) this.init({ element, name, type, render, props });
   }
-  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);
+  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];
-    EVENT.addListener(event_name, (e)=>{
-      if(details_setter) details_setter(EVENT);
-      callback(e);
-    },{
-      preventDefault
-    });
+    EVENT.addListener(
+      event_name,
+      (e) => {
+        if (details_setter) details_setter(EVENT);
+        callback(e);
+      },
+      {
+        preventDefault,
+      },
+    );
     return this;
   }
-  _off(event, category = 'global'){
+  off(event, category = "global") {
     this.exp.events[category].removeListener(event);
-    return this
+    return this;
   }
-  get element(){
+  get element() {
     return this.cache.element;
   }
-  get itemsTarget(){
-    return this.cache.itemsTarget; 
+  get itemsTarget() {
+    return this.cache.itemsTarget;
   }
-  get itemsTargetElement(){
+  get itemsTargetElement() {
     return this.itemsTarget.element;
   }
-  setItemsTarget(parent){
+  setItemsTarget(parent) {
     this.cache.itemsTarget = parent;
     this.items = parent.items;
     return this;
   }
-  isInteractive(){
+  isInteractive() {
     return this.cache.isInteractive;
   }
-  useClient(directive){
-    if(!this.cache.isInteractive){
-      this.element.setAttribute('data-hydration-index', globalThis.__Ziko__.__HYDRATION__.index);
-      globalThis.__Ziko__.__HYDRATION__.register(() => this);
+  useClient(directive) {
+    if (!this.cache.isInteractive) {
+      this.element.setAttribute(
+        "data-hydration-index",
+        globalThis.__Ziko__.__HYDRATION__.index,
+      );
+      globalThis.__Ziko__.__HYDRATION__.register(() => this.constructor);
       this.cache.isInteractive = true;
     }
-    if(directive)this.element.setAttribute('data-hydration-directive', directive);
+    if (directive)
+      this.element.setAttribute("data-hydration-directive", directive);
     return this;
   }
   // get st(){
   //   return this.cache.style;
   // }
-  get attr(){
+  get attr() {
     return this.cache.attributes;
   }
-  get evt(){
+  get evt() {
     return this.events;
   }
-  get html(){
+  get html() {
     return this.element.innerHTML;
   }
-  get text(){
+  get text() {
     return this.element.textContent;
   }
   // get isBody(){
   //   return this.element === globalThis?.document.body;
   // }
-  get parent(){
+  get parent() {
     return this.cache.parent;
   }
-  get width(){
-    return this.element.getBoundingClientRect().width;
+  get rect() {
+    return this.element.getBoundingClientRect();
+  }
+  // get width(){
+  //   return this.element.getBoundingClientRect().width;
+  // }
+  // get height(){
+  //   return this.element.getBoundingClientRect().height;
+  // }
+  // get top(){
+  //   return this.element.getBoundingClientRect().top;
+  // }
+  // get right(){
+  //   return this.element.getBoundingClientRect().right;
+  // }
+  // get bottom(){
+  //   return this.element.getBoundingClientRect().bottom;
+  // }
+  // get left(){
+  //   return this.element.getBoundingClientRect().left;
+  // }
+
+  // Lifecycle
+
+  mount(target = this.target, delay = 0) {
+    if (this.isBody) return this;
+    if (target?.isUIElement) target = target.element;
+    this.target = target;
+    this.target?.appendChild(this.element);
+    return this;
+  }
+  unmount() {
+    if (this.cache.parent) {
+      this.cache.parent.remove(this);
+    } else if (
+      this.target?.children?.length &&
+      [...this.target.children].includes(this.element)
+    )
+      this.target.removeChild(this.element);
+    return this;
+  }
+
+  // Indexing
+
+  at(index) {
+    return this.items.at(index);
+  }
+  forEach(callback) {
+    this.items.forEach(callback);
+    return this;
+  }
+  map(callback) {
+    return this.items.map(callback);
+  }
+  find(condition) {
+    return this.items.filter(condition);
+  }
+  // Styling
+  style(styles) {
+    if (!this.element?.style) return this;
+    for (let key in styles) {
+      const value = styles[key];
+      if (isStateGetter(value)) {
+        const getter = value();
+        Object.assign(this.element.style, { [key]: getter.value });
+        getter._subscribe(
+          (newValue) => {
+            Object.assign(this.element.style, { [key]: newValue });
+          },
+          // this
+        );
+      } else Object.assign(this.element.style, { [key]: value });
+    }
+    return this;
   }
-  get height(){
-    return this.element.getBoundingClientRect().height;
+  size(width, height) {
+    return this.style({ width, height });
   }
-  get top(){
-    return this.element.getBoundingClientRect().top;
+  hide() {}
+  show() {}
+
+  // Dom
+
+  append(...ele) {
+    this.__addItems__("append", "push", ...ele);
+    return this;
   }
-  get right(){
-    return this.element.getBoundingClientRect().right;
+  prepend(...ele) {
+    this.this.__addItems__("prepend", "unshift", ...ele);
+    return this;
   }
-  get bottom(){
-    return this.element.getBoundingClientRect().bottom;
+  insertAt(index, ...ele) {
+    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]);
+      target.element?.insertBefore(ele[i].element, target.items[index].element);
+      target.items.splice(index, 0, ele[i]);
+    }
+    target.maintain();
+    return this;
   }
-  get left(){
-    return this.element.getBoundingClientRect().left;
+  remove(...ele) {
+    const remove = (ele) => {
+      if (typeof ele === "number") ele = this.items[ele];
+      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]);
+    for (let i = 0; i < this.items.length; i++)
+      Object.assign(this, { [[i]]: this.items[i] });
+    // Remove from item
+    return this;
   }
 
+  async __addItem__(adder, pusher, item, referenceNode = null, index = null) {
+    const { element: itemsTargetEl, items } = this.itemsTarget;
+    if (["number", "string"].includes(typeof item)) item = text(item);
+    if (typeof item === "function" && isStateGetter(item)) {
+      const getter = item();
+      item = getter.value;
+
+      getter._subscribe((newValue) => {
+        if (newValue?.isUIElement?.()) {
+          item.element.replaceWith(newValue.element);
+          item = newValue;
+        } else {
+          item.element.textContent = newValue;
+        }
+      });
+    }
+    if (
+      typeof globalThis?.Node === "function" &&
+      item instanceof globalThis.Node
+    )
+      item = new UIElement({element : item});
+    if (item instanceof Promise) item = await item;
+    if (item?.isUINode) {
+      item.cache.parent = this;
+      item.target = itemsTargetEl;
+      if (adder === "insertBefore" && itemsTargetEl)
+        itemsTargetEl.insertBefore(item.element, referenceNode);
+      else if (typeof itemsTargetEl?.[adder] === "function")
+        itemsTargetEl[adder](item.element);
+      if (pusher === "splice" && index !== null) items.splice(index, 0, item);
+      else if (typeof items?.[pusher] === "function") items[pusher](item);
+      return;
+    }
+  }
+
+  async __addItems__(adder, pusher, ...elements) {
+    for (const item of elements) {
+      await this.__addItem__(adder, pusher, item);
+    }
+    this.maintain();
+    return this;
+  }
 }
 
 const HTMLTags = [
@@ -1517,6 +1560,20 @@ const MathMLTags = [
   `munder`, `munderover`
 ];
 
+const call_with_optional_props = (Component) => {
+    return (...args) => {
+        const first = args[0];
+
+        const isChild = first?.isUIElement?.() || is_primitive(first);
+
+        if (isChild) {
+            return new Component({}, ...args);
+        }
+
+        return new Component(first, ...args.slice(1));
+    };
+};
+
 const tags = new Proxy({}, {
   get(target, prop) {
     if (typeof prop !== 'string') return undefined;
@@ -1526,15 +1583,17 @@ const tags = new Proxy({}, {
     if(SVGTags.includes(tag)) type = 'svg';
     if(MathMLTags.includes(tag)) type = 'mathml';
     return (...args) => {
+      const ui = new UIElement({element : tag, name : tag, type});
+      const first = args[0];
       if(args.length === 0) {
-        return new UIElement({element : tag, name : tag, type})
+        return ui
       }
       if(
-        ['string', 'number'].includes(typeof args[0]) 
-        || args[0] instanceof UIElement 
-        || isStateGetter(args[0])
-        || args[0] instanceof HTMLElement
-      ) return new UIElement({element : tag, name : tag, type}).append(...args);
+        ['string', 'number'].includes(typeof first) 
+        || first instanceof UIElement 
+        || isStateGetter(first)
+        || first instanceof HTMLElement
+      ) return ui.append(...args);
       return new UIElement({element : tag, type, props : args.shift()}).append(...args)
     }
   }
@@ -1682,58 +1741,830 @@ class UseEventEmitter {
 
 const useEventEmitter = (maxListeners) => new UseEventEmitter(maxListeners);
 
-const camel2hyphencase$1 = (text = '') => text.replace(/[A-Z]/g, match => '-' + match.toLowerCase());
-const camel2snakecase = (text = '') => text.replace(/[A-Z]/g, match => '_' + match.toLowerCase());
-const camel2pascalcase = (text = '') => text.charAt(0).toUpperCase() + text.slice(1);
-const camel2constantcase = (text = '') => text.replace(/[A-Z]/g, match => '_' + match).toUpperCase();
+function normalize_path(inputPath, root = './src/pages', extensions = ['js', 'ts', 'jsx', 'tsx']) {
+    let cleanRoot = root.endsWith('/') ? root.slice(0, -1) : root;
+    const normalizedPath = inputPath.replace(/\\/g, '/');
+    
+    // 1. Extract path relative to root
+    let relativePath = normalizedPath;
+    if (cleanRoot && normalizedPath.includes(cleanRoot)) {
+        relativePath = normalizedPath.split(cleanRoot).pop();
+    }
 
-const pascal2snakecase = (text = '') => text.replace(/([A-Z])/g, (match, offset) => offset ? '_' + match.toLowerCase() : match.toLowerCase());
-const pascal2hyphencase = (text = '') => text.replace(/([A-Z])/g, (match, offset) => offset ? '-' + match.toLowerCase() : match.toLowerCase());
-const pascal2camelcase = (text = '') => text.charAt(0).toLowerCase() + text.slice(1);
-const pascal2constantcase = (text = '') => text.replace(/([A-Z])/g, (match, offset) => offset ? '_' + match : match).toUpperCase();
+    // 2. Split directory parts & strip route groups like (auth)
+    const rawParts = relativePath.split('/').filter(Boolean).filter(p => !/^\([^)]+\)$/.test(p));
+    if (rawParts.length === 0) return '/';
 
-const snake2camelcase = (text = '') => text.replace(/(_\w)/g, match => match[1].toUpperCase());
-const snake2hyphencase = (text = '') => text.replace(/_/g, "-");
-const snake2pascalcase = (text = '') => text.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
-const snake2constantcase = (text = '') => text.toUpperCase();
+    const lastPart = rawParts[rawParts.length - 1];
+    const extRegex = new RegExp(`\\.(${extensions.join('|')})$`);
+    
+    const isIndexFile = extensions.some(ext => lastPart === `index.${ext}`);
+    const fileNameWithoutExt = lastPart.replace(extRegex, '');
 
-const hyphen2camelcase = (text = '') => text.replace(/-([a-z])/g, match => match[1].toUpperCase());
-const hyphen2snakecase = (text = '') => text.replace(/-/g, '_');
-const hyphen2pascalcase = (text = '') => text.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
-const hyphen2constantcase = (text = '') => text.replace(/-/g, '_').toUpperCase();
+    // Remove original file name from directory segments
+    rawParts.pop(); 
 
-const constant2camelcase = (text = '') => text.toLowerCase().replace(/_([a-z])/g, match => match[1].toUpperCase());
-const constant2snakecase = (text = '') => text.toLowerCase();
-const constant2pascalcase = (text = '') => text.toLowerCase().split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
-const constant2hyphencase = (text = '') => text.toLowerCase().replace(/_/g, '-');
+    // 3. Handle flat dot notation without breaking [..slug] or [[..slug]]
+    if (!isIndexFile) {
+        // Splits by '.' ONLY if the dot is outside of bracketed patterns like [...] or [[...]]
+        const dotSegments = fileNameWithoutExt.split(/\.(?![^\[]*\])/);
+        rawParts.push(...dotSegments);
+    }
+
+    return '/' + rawParts.join('/');
+}
 
-const is_camelcase$1 = (text = '') =>{
-    if (text.length === 0) return false; 
-    const camelCasePattern = /^[a-z][a-zA-Z0-9]*$/;
-    return camelCasePattern.test(text);
-};
-const is_hyphencase = (text = '') => text.split('-').length > 0;
-const is_snakeCase = (text = '') => text.split('_').length > 0;
-const is_pascalcalse = (text = '') => {
-    if (text.length === 0) return false;
-    const PascalCasePattern = /^[A-Z][a-zA-Z0-9]*$/;
-    return PascalCasePattern.test(text);
-};
+function routes_matcher(mask, route) {
+  const maskSegments = mask.split("/").filter(Boolean);
+  const routeSegments = route.split("/").filter(Boolean);
+  let i = 0, j = 0;
+
+  while (i < maskSegments.length && j < routeSegments.length) {
+    const maskSegment = maskSegments[i];
+
+    // Optional Catch-all [[...slug]]
+    if (maskSegment.startsWith("[[...") && maskSegment.endsWith("]]")) {
+      const remainingMaskSegments = maskSegments.length - i - 1;
+      if (remainingMaskSegments === 0) return true;
+      let requiredSegments = 0;
+      for (let k = i + 1; k < maskSegments.length; k++) {
+        if (!maskSegments[k].endsWith("]+")) requiredSegments++;
+      }
+      const remainingRouteSegments = routeSegments.length - j;
+      const segmentsToConsume = remainingRouteSegments - requiredSegments;
+      if (segmentsToConsume < 0) return false;
+      j += segmentsToConsume;
+      i++;
+      continue;
+    }
 
-const is_palindrome = text =>{
-    const str = text.toLocaleLowerCase();
-    let l = str.length,i;
-    for(i=0;i<l/2;i++)if(str[i]!=str[l-i-1])return false;
-    return true;
-};
+    // Required Catch-all [...slug]
+    if (maskSegment.startsWith("[...") && maskSegment.endsWith("]")) {
+      const remainingMaskSegments = maskSegments.length - i - 1;
+      if (remainingMaskSegments === 0) return true;
+      let requiredSegments = 0;
+      for (let k = i + 1; k < maskSegments.length; k++) {
+        if (!maskSegments[k].endsWith("]+")) requiredSegments++;
+      }
+      const remainingRouteSegments = routeSegments.length - j;
+      if (remainingRouteSegments < requiredSegments) return false;
+      const segmentsToConsume = remainingRouteSegments - requiredSegments;
+      if (segmentsToConsume < 1) return false;
+      j += segmentsToConsume;
+      i++;
+      continue;
+    }
 
-const is_anagram = (word, words) =>{
-        word=word.split("").sort();
-        words=words.split("").sort();
-        return JSON.stringify(word)===JSON.stringify(words);    
-};
+    if (maskSegment.startsWith("[") && maskSegment.endsWith("]+")) {
+      if (routeSegments[j]) j++;
+      i++;
+      continue;
+    }
 
-const is_isogram = (text = '') => [...new Set(text.toLowerCase())].length === text.length;
+    if (maskSegment.startsWith("[") && maskSegment.endsWith("]")) {
+      i++;
+      j++;
+      continue;
+    }
+
+    if (maskSegment !== routeSegments[j]) return false;
+    i++;
+    j++;
+  }
+
+  while (i < maskSegments.length) {
+    const seg = maskSegments[i];
+    // [[...slug]] and [param]+ can match empty segments at the end
+    if (seg.startsWith("[[...") && seg.endsWith("]]")) {
+      i++;
+      continue;
+    }
+    if (seg.endsWith("]+")) {
+      i++;
+      continue;
+    }
+    return false;
+  }
+
+  return i === maskSegments.length && j === routeSegments.length;
+}
+// // DEMO
+// console.log("=== EXISTING TESTS ===");
+// console.log(routes_matcher("/user/[id]+", "/user")); // true
+// console.log(routes_matcher("/user/[id]+", "/user/42")); // true
+// console.log(routes_matcher("/blog/[...slug]", "/blog/a/b")); // true
+// console.log(routes_matcher("/blog/[id]", "/blog")); // false
+// console.log(routes_matcher("/product/:id", "/product/99")); // true
+
+function is_dynamic(path) {
+  const DynamicPattern = /(:\w+|\[\[\.\.\.\w+\]\]|\[\.\.\.\w+\]|\[\w+\]\+?)/;
+  return DynamicPattern.test(path);
+}
+function sort_routes(routeKeys) {
+  return [...routeKeys].sort((a, b) => {
+    const aIsOptionalCatchAll = a.includes('[[...');
+    const bIsOptionalCatchAll = b.includes('[[...');
+    
+    const aIsCatchAll = a.includes('[...') && !aIsOptionalCatchAll;
+    const bIsCatchAll = b.includes('[...') && !bIsOptionalCatchAll;
+    
+    const aIsDynamic = is_dynamic(a);
+    const bIsDynamic = is_dynamic(b);
+
+    // 1. Optional catch-alls [[...slug]] ALWAYS go last
+    if (aIsOptionalCatchAll && !bIsOptionalCatchAll) return 1;
+    if (!aIsOptionalCatchAll && bIsOptionalCatchAll) return -1;
+
+    // 2. Catch-alls [...slug] go right before optional catch-alls
+    if (aIsCatchAll && !bIsCatchAll) return 1;
+    if (!aIsCatchAll && bIsCatchAll) return -1;
+
+    // 3. Static routes go before standard dynamic routes ([id])
+    if (!aIsDynamic && bIsDynamic) return -1;
+    if (aIsDynamic && !bIsDynamic) return 1;
+
+    // 4. Deeper/longer routes take precedence over shorter ones
+    return b.length - a.length;
+  });
+}
+
+function dynamic_routes_parser(mask, route) {
+  const maskSegments = mask.split("/").filter(Boolean);
+  const routeSegments = route.split("/").filter(Boolean);
+  const params = {};
+  let i = 0, j = 0;
+
+  while (i < maskSegments.length && j < routeSegments.length) {
+    const maskSegment = maskSegments[i];
+
+    // Handle [[...slug]]
+    if (maskSegment.startsWith("[[...") && maskSegment.endsWith("]]")) {
+      const paramName = maskSegment.slice(5, -2);
+      const remainingMaskSegments = maskSegments.length - i - 1;
+      if (remainingMaskSegments === 0) {
+        params[paramName] = routeSegments.slice(j).join("/");
+        break;
+      }
+      let requiredSegments = 0;
+      for (let k = i + 1; k < maskSegments.length; k++) {
+        if (!maskSegments[k].endsWith("]+")) requiredSegments++;
+      }
+      const remainingRouteSegments = routeSegments.length - j;
+      const segmentsToConsume = remainingRouteSegments - requiredSegments;
+      if (segmentsToConsume >= 0) {
+        params[paramName] = routeSegments.slice(j, j + segmentsToConsume).join("/");
+        j += segmentsToConsume;
+      } else return {};
+      i++;
+      continue;
+    }
+
+    // Handle [...slug]
+    if (maskSegment.startsWith("[...") && maskSegment.endsWith("]")) {
+      const paramName = maskSegment.slice(4, -1);
+      const remainingMaskSegments = maskSegments.length - i - 1;
+      if (remainingMaskSegments === 0) {
+        params[paramName] = routeSegments.slice(j).join("/");
+        break;
+      }
+      let requiredSegments = 0;
+      for (let k = i + 1; k < maskSegments.length; k++) {
+        if (!maskSegments[k].endsWith("]+")) requiredSegments++;
+      }
+      const remainingRouteSegments = routeSegments.length - j;
+      const segmentsToConsume = remainingRouteSegments - requiredSegments;
+      if (segmentsToConsume >= 1) {
+        params[paramName] = routeSegments.slice(j, j + segmentsToConsume).join("/");
+        j += segmentsToConsume;
+      } else return {};
+      i++;
+      continue;
+    }
+
+    if (maskSegment.startsWith("[") && maskSegment.endsWith("]+")) {
+      const paramName = maskSegment.slice(1, -2);
+      if (routeSegments[j]) {
+        params[paramName] = routeSegments[j];
+        j++;
+      }
+      i++;
+      continue;
+    }
+
+    if (maskSegment.startsWith("[") && maskSegment.endsWith("]")) {
+      const paramName = maskSegment.slice(1, -1);
+      params[paramName] = routeSegments[j];
+    } else if (maskSegment !== routeSegments[j]) return {};
+
+    i++;
+    j++;
+  }
+
+  // Set default empty string for remaining uncaptured optional catch-alls
+  while (i < maskSegments.length) {
+    const maskSegment = maskSegments[i];
+    if (maskSegment.startsWith("[[...") && maskSegment.endsWith("]]")) {
+      const paramName = maskSegment.slice(5, -2);
+      if (!(paramName in params)) params[paramName] = "";
+    }
+    i++;
+  }
+
+  return params;
+}
+
+
+// console.log("\n=== PARSER TESTS ===");
+// console.log(dynamic_routes_parser("/user/[id]+", "/user"));
+// // 👉 {}
+
+// console.log(dynamic_routes_parser("/user/[id]+", "/user/42"));
+// // 👉 { id: "42" }
+
+// console.log(dynamic_routes_parser("/blog/[...slug]", "/blog/2025/oct/post"));
+// // 👉 { slug: "2025/oct/post" }
+
+// console.log(
+//   dynamic_routes_parser("/product/[category]/[id]+", "/product/electronics"),
+// );
+// // 👉 { category: "electronics" }
+
+// console.log("\n=== FIX TEST ===");
+// console.log(dynamic_routes_parser("/[...slug]/[id]", "/sl1/sl2/9"));
+// // 👉 { slug: "sl1/sl2", id: "9" }
+
+// console.log(dynamic_routes_parser("/[slug]/[...id]", "/sl1/id1/id2"));
+// // 👉 { slug: "sl1", id: "id1/id2" }
+
+// console.log(dynamic_routes_parser("/blog/lang/[lang]/id/[id]", "/blog/lang/en/id/10"));
+// // 👉 { lang: "en", id: "10" }
+
+function get_root(paths) {
+   if (paths.length === 0) return '';
+   
+   // Strip trailing file names (e.g. /index.js or /about.js) to compare directory structures only
+   const dirPaths = paths.map(path => {
+     const parts = path.split('/');
+     parts.pop(); // Remove the filename
+     return parts;
+   });
+
+   const minLength = Math.min(...dirPaths.map(parts => parts.length));
+   let commonParts = [];
+   
+   for (let i = 0; i < minLength; i++) {
+       const part = dirPaths[0][i]; 
+       if (dirPaths.every(parts => parts[i] === part || parts[i].startsWith('['))) {
+           commonParts.push(part);
+       } 
+       else break; 
+   }
+   
+   const root = commonParts.join('/') + (commonParts.length ? '/' : '');
+   return root;
+}
+
+const { meta, link, script } = tags;
+
+class UILayout {
+
+  constructor(
+    {
+      title,
+      icon,
+      description,
+      lang,
+      links = [],
+      script: scripts = [],
+      meta: metas = [],
+    } = {},
+    ...ui
+  ) {
+    this.options = {
+      title,
+      icon,
+      description,
+      lang,
+      links,
+      meta: metas,
+      script: scripts,
+    };
+
+    this.ui = ui;
+    this.render();
+  }
+
+  render() {
+    if (typeof document === "undefined") {
+      return {
+        ...this.options,
+        body: this.ui,
+      };
+    }
+
+    const {
+      title,
+      icon,
+      description,
+      lang,
+      links,
+      meta: metas,
+      script: scripts,
+    } = this.options;
+
+    if (title) {
+      document.title = title;
+    }
+
+    if (lang) {
+      document.documentElement.lang = lang;
+    }
+
+    if (icon) {
+      document.head.appendChild(
+        link({
+          rel: "icon",
+          href: icon,
+        })
+      );
+    }
+
+    if (description) {
+      document.head.appendChild(
+        meta({
+          name: "description",
+          content: description,
+        })
+      );
+    }
+
+    for (const attrs of links) {
+      document.head.appendChild(link(attrs));
+    }
+
+    for (const attrs of metas) {
+      document.head.appendChild(meta(attrs));
+    }
+
+    for (const attrs of scripts) {
+      document.head.appendChild(script(attrs));
+    }
+  }
+
+  mount(target){
+    this.ui.forEach(el => el.mount(target));
+    return this
+  }
+
+}
+
+const renderer = async (target, component, props, wrapper) =>{
+    if(!component) return;
+    let mounted = await component(props);
+    if(wrapper) mounted = wrapper(mounted);
+
+    if(mounted instanceof UILayout) 
+        return mounted.ui.forEach(el => el.mount(target))
+    
+    mounted instanceof Array 
+        ? mounted.forEach(el => el.mount(target)) 
+        : mounted.mount(target);
+};
+
+async function createFileBasedRouter({
+  pages = {},
+  url = typeof location !== 'undefined' ? location.pathname : '/',
+  target = typeof document !== 'undefined' ? document.body : null,
+  extensions = ['js', 'ts'],
+  base = '/',
+  lazy = true,
+  renderer: renderer$1 = renderer,
+  wrapper,
+  namedExportHandler = {
+    Get: async (exportedFn, context) => {
+      if (typeof exportedFn === 'function') {
+        return await exportedFn(context);
+      }
+    }
+  }
+} = {}) {
+  // Normalize target element safely for UI frameworks/DOM wrapper objects
+  let mountTarget = target;
+  if (target && typeof target === 'object' && 'element' in target) {
+    mountTarget = target.element;
+  }
+
+  // 1. Normalize base path
+  let cleanBase = base === '.' ? '' : base.replace(/\/$/, '');
+  if (cleanBase && !cleanBase.startsWith('/')) {
+    cleanBase = '/' + cleanBase;
+  }
+
+  // 2. Normalize and extract current URL path
+  let rawPath = decodeURIComponent(url.replace(/\/$/, '')) || '/';
+  
+  // Strip base prefix if matched
+  if (cleanBase && rawPath.startsWith(cleanBase)) {
+    rawPath = rawPath.slice(cleanBase.length) || '/';
+  }
+
+  let currentPath = rawPath.startsWith('/') ? rawPath : '/' + rawPath;
+
+  const rawRoutes = Object.keys(pages);
+  const root = get_root(rawRoutes);
+
+  let mask = null;
+  let component = null;
+  let module = null;
+  let rawRoute = null;
+  let namedExports = {};
+
+  if (lazy) {
+    // --- LAZY MODE ---
+    // 3a. Map normalized masks to raw routes without executing module imports
+    const maskToRawRouteMap = {};
+    for (const route of rawRoutes) {
+      const maskKey = normalize_path(route, root, extensions);
+      maskToRawRouteMap[maskKey] = route;
+    }
+
+    // 4a. Sort route masks by precedence
+    const sortedMasks = sort_routes(Object.keys(maskToRawRouteMap));
+
+    // 5a. Match current path against route masks first
+    for (const routeMask of sortedMasks) {
+      if (routes_matcher(routeMask, currentPath)) {
+        mask = routeMask;
+        break;
+      }
+    }
+
+    // Early exit if no route matches (0 dynamic imports loaded)
+    if (mask === null) {
+      return { mask: null, component: null, params: {}, matched: false };
+    }
+
+    // 6a. Import ONLY the matched module
+    rawRoute = maskToRawRouteMap[mask];
+    try {
+      module = await pages[rawRoute]();
+      const { default: cmp, ...restExports } = module;
+      component = cmp;
+      namedExports = restExports;
+    } catch (error) {
+      console.error(`[Router] Failed to load module for route: ${rawRoute}`, error);
+      return { mask: null, component: null, params: {}, matched: false, error };
+    }
+
+  } else {
+    // --- EAGER MODE ---
+    // 3b. Load all modules and map normalized keys upfront
+    const pairs = {};
+    const modules = {};
+
+    for (const route of rawRoutes) {
+      const loadedModule = await pages[route]();
+      const { default: cmp } = loadedModule;
+      const normalizedKey = normalize_path(route, root, extensions);
+      
+      pairs[normalizedKey] = cmp;
+      modules[normalizedKey] = { module: loadedModule, rawRoute: route };
+    }
+
+    // 4b. Sort route keys by precedence
+    const sortedRouteKeys = sort_routes(Object.keys(pairs));
+
+    // 5b. Match route
+    for (const routePath of sortedRouteKeys) {
+      if (routes_matcher(routePath, currentPath)) {
+        mask = routePath;
+        component = pairs[routePath];
+        break;
+      }
+    }
+
+    if (mask === null) {
+      return { mask: null, component: null, params: {}, matched: false };
+    }
+
+    if (mask in modules) {
+      module = modules[mask].module;
+      rawRoute = modules[mask].rawRoute;
+      const { default: _, ...restExports } = module;
+      namedExports = restExports;
+    }
+  }
+
+  // 7. Parse dynamic parameters
+  const params = is_dynamic(mask) ? dynamic_routes_parser(mask, currentPath) : {};
+
+  // 8. Execute named exports handler for matched module
+  for (const exportName in namedExportHandler) {
+    if (exportName in namedExports && typeof namedExportHandler[exportName] === 'function') {
+      await namedExportHandler[exportName](namedExports[exportName], {
+        route: rawRoute,
+        mask,
+        module,
+        currentPath,
+        params
+      });
+    }
+  }
+
+  // 9. Render component
+  if (mountTarget && typeof renderer$1 === 'function') {
+    await renderer$1(mountTarget, component, params, wrapper);
+  }
+
+  // Return router state
+  return {
+    mask,
+    component,
+    params,
+    namedExports,
+    matched: true
+  };
+}
+
+const parseQueryParams = queryString => Object.fromEntries(new URLSearchParams(globalThis?.location?.search));
+
+function useQueryParams() {
+    const getParams = () =>
+        parseQueryParams();
+
+    const setParams = (updates, merge = true) => {
+        const current = getParams();
+
+        const next =
+            typeof updates === "function"
+                ? updates(current)
+                : updates;
+
+        const finalParams = merge
+            ? { ...current, ...next }
+            : next;
+
+        const search = new URLSearchParams(finalParams).toString();
+
+        window.history.pushState(
+            {},
+            "",
+            `${window.location.pathname}${search ? `?${search}` : ""}`
+        );
+
+        window.dispatchEvent(
+            new CustomEvent("queryparamschange", {
+                detail: finalParams
+            })
+        );
+    };
+
+    return [getParams, setParams];
+}
+
+function watchQueryParams(callback) {
+    let previousSearch = location.search;
+
+    const notify = () => {
+        const currentSearch = location.search;
+
+        if (currentSearch === previousSearch) {
+            return;
+        }
+
+        previousSearch = currentSearch;
+        callback(parseQueryParams());
+    };
+
+    window.addEventListener("popstate", notify);
+
+    const pushState = history.pushState;
+    history.pushState = function (...args) {
+        pushState.apply(this, args);
+        notify();
+    };
+
+    const replaceState = history.replaceState;
+    history.replaceState = function (...args) {
+        replaceState.apply(this, args);
+        notify();
+    };
+
+    callback(parseQueryParams());
+
+    return () => {
+        window.removeEventListener("popstate", notify);
+    };
+}
+
+class UIView extends UIElement{
+    constructor(...items){
+        super({element : 'div', name : 'view'});
+        this.append(...items);
+    }
+}
+
+const View = (...items) => call_with_optional_props(UIElement);
+
+class UISuspense extends UIElement{
+    constructor(fallback_ui, callback){
+        super({element : "div", name : "suspense"});
+        this.setAttr({
+            dataTemp : "suspense"
+        });
+        this.fallback_ui = fallback_ui;
+        this.append(fallback_ui);
+        (async ()=>{
+            try{
+                const ui = await callback();
+                fallback_ui.unmount();
+                this.append(ui);
+            }
+            catch(error){
+                console.log({error});
+            }
+        })();
+    }
+}
+
+const Suspense = (fallback_ui, callback) => new UISuspense(fallback_ui, callback);
+
+class UISwap extends UIElement {
+    #DISPLAYS_MAP = new WeakMap()
+    constructor({ activeIndex = 0 } = {}, ...items) {
+        super({ element: 'div' });
+        this.style({ display: 'contents' });
+        
+        this.states = {
+            activeIndex
+        };
+        
+        this.append(...items);
+        requestAnimationFrame(() => {
+            this.render();
+        });
+    }
+    get activeItem(){
+        return this.items[this.states.activeIndex]
+    }
+    render() {
+        this.items.forEach((n, i) => {
+
+            const initialDisplay = getComputedStyle(n.element).display;
+            this.#DISPLAYS_MAP.set(n, initialDisplay);
+
+            if (i !== this.states.activeIndex) {
+                n.style({ display: 'none' });
+            }
+        });
+    }
+    get DS(){
+        return this.#DISPLAYS_MAP
+    }
+    next(n = 1) {
+        return this.activate(this.states.activeIndex + n);
+    }
+    previous(n = 1) {
+        return this.activate(this.states.activeIndex - n);
+    }
+    activate(index) {
+        if (!this.items.length) return this;
+
+        const currentItem = this.items.at(this.states.activeIndex);
+
+        if (currentItem) {
+            currentItem.style({ display: 'none' });
+        }
+
+        const len = this.items.length;
+        this.states.activeIndex = ((index % len) + len) % len;
+
+        const activeItem = this.items.at(this.states.activeIndex);
+        if (activeItem) {
+            const restoredDisplay = this.#DISPLAYS_MAP.get(activeItem) || 'block';
+            activeItem.style({ display: restoredDisplay === 'none' ? 'block' : restoredDisplay });
+        }
+
+        return this;
+    }
+}
+
+const Swap = call_with_optional_props(UISwap);
+
+class UIFragment extends UIElement{
+    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});
+
+class UISwitch extends UIElement{
+    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 {
+    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 {
+    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);
+    return element;
+  }
+  throw new Error("DOMParser is not available in this environment");
+}
+
+const SVGWrapper = (content) => new UISVGWrapper(content);
 
 if(globalThis?.document){
     document?.addEventListener('DOMContentLoaded', __Ziko__.__Config__.init());
@@ -1747,20 +2578,35 @@ exports.Clock = Clock;
 exports.E = E;
 exports.EPSILON = EPSILON;
 exports.EventController = EventController;
+exports.For = For;
+exports.Fragment = Fragment;
+exports.HTMLWrapper = HTMLWrapper;
 exports.KeyListeners = KeyListeners;
 exports.PI = PI;
 exports.PtrListeners = PtrListeners;
+exports.SVGWrapper = SVGWrapper;
 exports.Scheduler = Scheduler;
+exports.Suspense = Suspense;
+exports.Swap = Swap;
 exports.SwipeEvent = SwipeEvent;
+exports.Switch = Switch;
 exports.Tick = Tick;
 exports.TimeScheduler = TimeScheduler;
 exports.UIElement = UIElement;
+exports.UIFragment = UIFragment;
+exports.UIHTMLWrapper = UIHTMLWrapper;
+exports.UISVGWrapper = UISVGWrapper;
+exports.UISuspense = UISuspense;
+exports.UISwap = UISwap;
+exports.UISwitch = UISwitch;
+exports.UIView = UIView;
+exports.View = View;
 exports.ViewEvent = ViewEvent;
 exports.ViewListeners = ViewListeners;
 exports.apply_fun = apply_fun;
 exports.atan2 = atan2;
 exports.camel2constantcase = camel2constantcase;
-exports.camel2hyphencase = camel2hyphencase$1;
+exports.camel2hyphencase = camel2hyphencase;
 exports.camel2pascalcase = camel2pascalcase;
 exports.camel2snakecase = camel2snakecase;
 exports.clamp = clamp;
@@ -1769,6 +2615,7 @@ exports.constant2camelcase = constant2camelcase;
 exports.constant2hyphencase = constant2hyphencase;
 exports.constant2pascalcase = constant2pascalcase;
 exports.constant2snakecase = constant2snakecase;
+exports.createFileBasedRouter = createFileBasedRouter;
 exports.debounce = debounce;
 exports.deg2rad = deg2rad;
 exports.hyphen2camelcase = hyphen2camelcase;
@@ -1778,14 +2625,14 @@ exports.hyphen2snakecase = hyphen2snakecase;
 exports.hypot = hypot;
 exports.isStateGetter = isStateGetter;
 exports.is_anagram = is_anagram;
-exports.is_camelcase = is_camelcase$1;
+exports.is_camelcase = is_camelcase;
 exports.is_hyphencase = is_hyphencase;
 exports.is_isogram = is_isogram;
 exports.is_palindrome = is_palindrome;
 exports.is_pascalcalse = is_pascalcalse;
 exports.is_snakeCase = is_snakeCase;
 exports.lerp = lerp;
-exports.map = map$1;
+exports.map = map;
 exports.mapfun = mapfun;
 exports.norm = norm;
 exports.pascal2camelcase = pascal2camelcase;
@@ -1808,5 +2655,7 @@ exports.timeout = timeout;
 exports.useDerived = useDerived;
 exports.useEffect = useEffect;
 exports.useEventEmitter = useEventEmitter;
+exports.useQueryParams = useQueryParams;
 exports.useReactive = useReactive;
 exports.useState = useState;
+exports.watchQueryParams = watchQueryParams;