ziko 0.45.1 → 0.45.3

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sun Aug 31 2025 15:09:47 GMT+0100 (UTC+01:00)
+  Date : Wed Sep 03 2025 15:22:46 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
@@ -1198,22 +1198,21 @@ function __init__global__(){
 
 __init__global__();
 class UIElementCore extends UINode{
-  constructor({
-        element, 
-        name ='', 
-        type="html", 
-        render = __Ziko__.__Config__.default.render, 
-        isInteractive = false,
-    }={}){
+  constructor(){
     super();
-    this.init(element, name, type, render, isInteractive);
   }
   init(element, name, type, render, isInteractive = [true, false][Math.floor(2*Math.random())]){
     this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
     if(typeof element === "string") {
       switch(type){
-        case "html" : element = globalThis?.document?.createElement(element); break;
-        case "svg" : element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element);
+        case "html" : {
+          element = globalThis?.document?.createElement(element);
+          console.log('1');
+        } break;
+        case "svg" : {
+          element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element); 
+          console.log('2');
+        } break;
         default : throw Error("Not supported")
       }
     }
@@ -1267,7 +1266,7 @@ class UIElementCore extends UINode{
       // && 
       this.isInteractive()){
       // this.setAttr("ziko-hydration-index", globalThis.__Ziko__.__HYDRATION__.index);
-      this.element.setAttribute('ziko-hydration-index', globalThis.__Ziko__.__HYDRATION__.index);
+      // this.element.setAttribute('ziko-hydration-index', globalThis.__Ziko__.__HYDRATION__.index)
       globalThis.__Ziko__.__HYDRATION__.register(() => this);
     }
     globalThis.__Ziko__.__UI__.push(this);
@@ -1447,49 +1446,11 @@ function _register_to_class_(target, mixin) {
   }
 }
 
-function register_to_instance(target, ...mixins){
-    console.log('register to instance');
-    mixins.forEach(n => _register_to_instance_(target, n));
-}
-function _register_to_instance_(instance, mixin) {
-  const descriptors = Object.getOwnPropertyDescriptors(mixin);
-  for (const key of Reflect.ownKeys(descriptors)) {
-    const desc = descriptors[key];
-    if ('get' in desc || 'set' in desc) {
-      Object.defineProperty(instance, key, {
-        ...desc,
-        configurable: true // 🔑 make it replaceable
-      });
-    } else if (typeof desc.value === 'function') {
-      Object.defineProperty(instance, key, {
-        value: desc.value.bind(instance),
-        writable: true,     // 🔑 allow reassignment
-        configurable: true, // 🔑 allow redefinition
-        enumerable: false
-      });
-    } else {
-      Object.defineProperty(instance, key, {
-        value: desc.value,
-        writable: true,
-        configurable: true,
-        enumerable: true
-      });
-    }
-  }
-}
-
-const register = (target, ...mixins) => {
-  console.log(target);
-  // return register_to_class(target, ...mixins)
-  if(typeof target === 'function') register_to_class(target, ...mixins);
-  else register_to_instance(target, ...mixins);
-  };
-
 if(!globalThis.__Ziko__) __init__global__();
 
     // HMR persistence
-if (import.meta.hot) {
-    import.meta.hot.data.__Ziko__ = import.meta.hot.data.__Ziko__ || globalThis.__Ziko__;
+if (import.meta.hot?.data) {
+    import.meta.hot.data.__Ziko__ = import.meta.hot.data?.__Ziko__ || globalThis?.__Ziko__;
     globalThis.__Ziko__ = import.meta.hot.data.__Ziko__;
     // import.meta.hot.accept(n=>console.log(n));
     // console.log(import.meta.hot.data.__Ziko__.__State__.store)
@@ -1612,7 +1573,7 @@ async function __addItem__(adder, pusher, ...ele) {
   return this;
 }
 function _set_attrs_(name, value){
-    if(this.element?.tagName !== "svg") name = is_camelcase$1(name) ? camel2hyphencase$1(name) : name;
+    if(this.element instanceof globalThis?.SVGAElement) name = is_camelcase$1(name) ? camel2hyphencase$1(name) : name;
     if(this?.attr[name] && this?.attr[name]===value) return;
     if(isStateGetter(value)){
         const getter = value();
@@ -3161,10 +3122,11 @@ class ZikoUseMediaQuery {
 const useMediaQuery = (mediaQueryRules,fallback) => new ZikoUseMediaQuery(mediaQueryRules,fallback);
 
 let UIElement$1 = class UIElement extends UIElementCore{
-  constructor({element, name ='', type="html", render = __Ziko__.__Config__.default.render}={}){
-    super({element, name, type, render});
-    console.log(this);
-    register(
+  constructor({element, name ='', type='html', render = __Ziko__.__Config__.default.render}={}){
+    super();
+    // console.log({type})
+    // console.log(this)
+    register_to_class(
       this, 
       AttrsMethods, 
       DomMethods, 
@@ -3419,7 +3381,6 @@ const HTMLTags = [
   'sub',
   'summary',
   'sup',
-  'svg',
   'table',
   'tbody',
   'td',
@@ -3453,6 +3414,9 @@ const SVGTags = [
     "desc", "title", "metadata", "foreignObject"
   ];
 
+// const h=(tag, attributes = {}, ...children)=> _h(tag, "html", attributes, ...children);
+// const s=(tag, attributes = {}, ...children)=> _h(tag, "svg", attributes, ...children);
+
 const tags = new Proxy({}, {
   get(target, prop) {
     if (typeof prop !== 'string') return undefined;
@@ -3460,16 +3424,22 @@ const tags = new Proxy({}, {
     let type ;
     if(HTMLTags.includes(tag)) type = 'html';
     if(SVGTags.includes(tag)) type = 'svg';
+    // console.log(type)
     return (...args)=>{
       // Fix undefined
       // console.log(isStateGetter(args[0]))
+      // console.log(!!args)
+      if(args.length === 0) {
+        // console.log('length 0')
+        return new UIElement$1({element : tag, name : tag, type})
+      }
       if(
         ['string', 'number'].includes(typeof args[0]) 
         || args[0] instanceof UIElement$1 
         || (typeof args[0] === 'function' && args[0]().isStateGetter())
       ) return new UIElement$1({element : tag, name : tag, type}).append(...args);
       // console.log(args[0])
-      return new UIElement$1({element : tag}).setAttr(args.shift()).append(...args)
+      return new UIElement$1({element : tag, type}).setAttr(args.shift()).append(...args)
     }
     // if(SVGTags.includes(tag)) return (...args) => new UIElement(tag,"",{el_type : "svg"}).append(...args);
     // return (...args)=>{
@@ -3621,6 +3591,68 @@ class ZikoUISuspense extends UIElement{
 
 const Suspense = (fallback_ui, callback) => new ZikoUISuspense(fallback_ui, callback);
 
+class UIHTMLWrapper extends UIElement$1 {
+    constructor(content){
+        super({element : 'div', name : 'html_wrappper'});
+        this.element.append(html2dom(content));
+        this.style({
+            display : 'contents'
+        });
+    }
+}
+
+function html2dom(htmlString) {
+    if(globalThis?.DOMParser){
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(`<div>${htmlString}</div>`, 'text/html');
+        doc.body.firstChild.style.display = "contents";
+        return doc.body.firstChild;
+    }
+}
+
+const HTMLWrapper = (content) => new UIHTMLWrapper(content);
+
+class UISVGWrapper extends UIElement$1 {
+    constructor(content){
+        super({element : 'div', name : 'html_wrappper'});
+        this.element.append(svg2dom(content));
+        this.style({
+            display : 'contents'
+        });
+    }
+}
+
+function svg2dom(svgString) {
+  if (typeof DOMParser !== "undefined") {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svgString.trim(), "image/svg+xml");
+    const svg = doc.documentElement;
+
+    if (svg.nodeName === "parsererror") {
+      throw new Error("Invalid SVG string");
+    }
+    if(svg.hasAttribute('xmlns')) return svg
+    // TO Fix ...
+    const {children, attributes} = svg;
+    const element = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    for(let {name, value} of attributes){
+      element.setAttribute(name, value);
+    }
+    element.append(...children);
+
+    globalThis.svg = svg;
+    globalThis.children = children; 
+    globalThis.attributes = attributes;
+    globalThis.element = element;
+    return element;
+  }
+  throw new Error("DOMParser is not available in this environment");
+}
+
+
+
+const SVGWrapper = (content) => new UISVGWrapper(content);
+
 function define_wc(name, UIElement, props = {}, { mode = 'open'} = {}) {
     if (globalThis.customElements?.get(name)) {
         console.warn(`Custom element "${name}" is already defined`);
@@ -5495,11 +5527,12 @@ function customPath(inputPath, root = './src/pages', extensions = ['js', 'ts'])
    const normalizedPath = inputPath.replace(/\\/g, '/').replace(/\[(\w+)\]/g, '$1/:$1');
    const parts = normalizedPath.split('/');
    const rootParts = root.split('/');
-   const rootIndex = parts.indexOf(rootParts[rootParts.length - 1]);
+   const rootIndex = parts.indexOf(rootParts.at(-1));
    if (rootIndex !== -1) {
        const subsequentParts = parts.slice(rootIndex + 1);
-       const lastPart = subsequentParts[subsequentParts.length - 1];
+       const lastPart = parts.at(-1);
        const isIndexFile = lastPart === 'index.js' || lastPart === 'index.ts';
+    //    console.log({extensions, subsequentParts, lastPart, isIndexFile, rootParts, rootIndex, parts})
        const hasValidExtension = extensions.some(ext => lastPart === `.${ext}` || lastPart.endsWith(`.${ext}`));
        if (isIndexFile) {
            return '/' + (subsequentParts.length > 1 ? subsequentParts.slice(0, -1).join('/') : '');
@@ -5859,4 +5892,4 @@ if(globalThis?.document){
     document?.addEventListener("DOMContentLoaded", __Ziko__.__Config__.init());
 }
 
-export { App, Arc, Back, Base, Clock, Combinaison, Complex, Discret, E, EPSILON, Elastic, FileBasedRouting, Flex, InBack, InBounce, InCirc, InCubic, InElastic, InExpo, InOutBack, InOutBounce, InOutCirc, InOutCubic, InOutElastic, InOutExpo, InOutQuad, InOutQuart, InOutQuint, InOutSin, InQuad, InQuart, InQuint, InSin, Linear, Logic$1 as Logic, Matrix, OutBack, OutBounce, OutCirc, OutCubic, OutElastic, OutExpo, OutQuad, OutQuart, OutQuint, OutSin, PI$2 as PI, Permutation, Random, SPA, Scheduler, Step, Suspense, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement$1 as UIElement, UINode, Utils, ZikoApp, ZikoCustomEvent, ZikoEventClick, ZikoEventClipboard, ZikoEventCustom, ZikoEventDrag, ZikoEventFocus, ZikoEventInput, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventSwipe, ZikoEventTouch, ZikoEventWheel, ZikoHead, ZikoMutationObserver, ZikoSPA, ZikoUIFlex, ZikoUISuspense, ZikoUIText, ZikoUseRoot, __ZikoEvent__, abs, accum, acos$1 as acos, acosh, acot, add, animation, arange, arr2str, asin, asinh, atan, atan2, atanh, bindCustomEvent, bindHashEvent, bindTouchEvent, bind_click_event, bind_clipboard_event, bind_drag_event, bind_focus_event, bind_key_event, bind_mouse_event, bind_pointer_event, bind_wheel_event, cartesianProduct, ceil, clamp, clock, combinaison, complex, cos$2 as cos, cosh$1 as cosh, cot, coth, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, div, e, fact, floor, geomspace, getEvent, hypot, inRange, isApproximatlyEqual, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linspace, ln, logspace, loop, map$1 as map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ones, pgcd, pow$1 as pow, powerSet, ppcm, preload, prod, rad2deg, round, sec, sig, sign, sin$2 as sin, sinc, sinh$1 as sinh, sleep, sqrt$2 as sqrt, sqrtn, step_fps, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, useChannel, useCustomEvent, useDerived, useEventEmitter, useFavIcon, useHashEvent, useHead, useInputEvent, useLocaleStorage, useMediaQuery, useMeta, useReactive, useRoot, useSessionStorage, useState, useSuccesifKeys, useSwipeEvent, useThread, useTitle, wait, waitForUIElm, waitForUIElmSync, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };
+export { App, Arc, Back, Base, Clock, Combinaison, Complex, Discret, E, EPSILON, Elastic, FileBasedRouting, Flex, HTMLWrapper, InBack, InBounce, InCirc, InCubic, InElastic, InExpo, InOutBack, InOutBounce, InOutCirc, InOutCubic, InOutElastic, InOutExpo, InOutQuad, InOutQuart, InOutQuint, InOutSin, InQuad, InQuart, InQuint, InSin, Linear, Logic$1 as Logic, Matrix, OutBack, OutBounce, OutCirc, OutCubic, OutElastic, OutExpo, OutQuad, OutQuart, OutQuint, OutSin, PI$2 as PI, Permutation, Random, SPA, SVGWrapper, Scheduler, Step, Suspense, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement$1 as UIElement, UIHTMLWrapper, UINode, UISVGWrapper, Utils, ZikoApp, ZikoCustomEvent, ZikoEventClick, ZikoEventClipboard, ZikoEventCustom, ZikoEventDrag, ZikoEventFocus, ZikoEventInput, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventSwipe, ZikoEventTouch, ZikoEventWheel, ZikoHead, ZikoMutationObserver, ZikoSPA, ZikoUIFlex, ZikoUISuspense, ZikoUIText, ZikoUseRoot, __ZikoEvent__, abs, accum, acos$1 as acos, acosh, acot, add, animation, arange, arr2str, asin, asinh, atan, atan2, atanh, bindCustomEvent, bindHashEvent, bindTouchEvent, bind_click_event, bind_clipboard_event, bind_drag_event, bind_focus_event, bind_key_event, bind_mouse_event, bind_pointer_event, bind_wheel_event, cartesianProduct, ceil, clamp, clock, combinaison, complex, cos$2 as cos, cosh$1 as cosh, cot, coth, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, div, e, fact, floor, geomspace, getEvent, hypot, inRange, isApproximatlyEqual, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linspace, ln, logspace, loop, map$1 as map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ones, pgcd, pow$1 as pow, powerSet, ppcm, preload, prod, rad2deg, round, sec, sig, sign, sin$2 as sin, sinc, sinh$1 as sinh, sleep, sqrt$2 as sqrt, sqrtn, step_fps, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, useChannel, useCustomEvent, useDerived, useEventEmitter, useFavIcon, useHashEvent, useHead, useInputEvent, useLocaleStorage, useMediaQuery, useMeta, useReactive, useRoot, useSessionStorage, useState, useSuccesifKeys, useSwipeEvent, useThread, useTitle, wait, waitForUIElm, waitForUIElmSync, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.45.1",
+  "version": "0.45.3",
   "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/app/spa-file-based-routing.js

@@ -24,11 +24,12 @@ function customPath(inputPath, root = './src/pages', extensions = ['js', 'ts'])
    const normalizedPath = inputPath.replace(/\\/g, '/').replace(/\[(\w+)\]/g, '$1/:$1');
    const parts = normalizedPath.split('/');
    const rootParts = root.split('/');
-   const rootIndex = parts.indexOf(rootParts[rootParts.length - 1]);
+   const rootIndex = parts.indexOf(rootParts.at(-1));
    if (rootIndex !== -1) {
        const subsequentParts = parts.slice(rootIndex + 1);
-       const lastPart = subsequentParts[subsequentParts.length - 1];
+       const lastPart = parts.at(-1);
        const isIndexFile = lastPart === 'index.js' || lastPart === 'index.ts';
+    //    console.log({extensions, subsequentParts, lastPart, isIndexFile, rootParts, rootIndex, parts})
        const hasValidExtension = extensions.some(ext => lastPart === `.${ext}` || lastPart.endsWith(`.${ext}`));
        if (isIndexFile) {
            return '/' + (subsequentParts.length > 1 ? subsequentParts.slice(0, -1).join('/') : '');

package/src/hooks/use-state.js

@@ -2,8 +2,8 @@ import { __init__global__ } from "../__ziko__/index.js";
 if(!globalThis.__Ziko__) __init__global__()
 
     // HMR persistence
-if (import.meta.hot) {
-    import.meta.hot.data.__Ziko__ = import.meta.hot.data.__Ziko__ || globalThis.__Ziko__;
+if (import.meta.hot?.data) {
+    import.meta.hot.data.__Ziko__ = import.meta.hot.data?.__Ziko__ || globalThis?.__Ziko__;
     globalThis.__Ziko__ = import.meta.hot.data.__Ziko__;
     // import.meta.hot.accept(n=>console.log(n));
     // console.log(import.meta.hot.data.__Ziko__.__State__.store)

package/src/ui/__methods__/utils/index.js

@@ -50,7 +50,7 @@ export async function __addItem__(adder, pusher, ...ele) {
   return this;
 }
 export function _set_attrs_(name, value){
-    if(this.element?.tagName !== "svg") name = is_camelcase(name) ? camel2hyphencase(name) : name;
+    if(this.element instanceof globalThis?.SVGAElement) name = is_camelcase(name) ? camel2hyphencase(name) : name;
     if(this?.attr[name] && this?.attr[name]===value) return;
     if(isStateGetter(value)){
         const getter = value()

package/src/ui/constructors/UIElement.js

@@ -1,5 +1,5 @@
 import { UIElementCore } from "./UIElementCore.js";
-import { register } from "../../__helpers__/register/index.js";
+import { register_to_class } from "../../__helpers__/register/register-to-class.js";
 import { 
   AttrsMethods,
   DomMethods,
@@ -16,10 +16,11 @@ import {
   watchChildren
 } from "../../reactivity/index.js"
 class UIElement extends UIElementCore{
-  constructor({element, name ='', type="html", render = __Ziko__.__Config__.default.render}={}){
-    super({element, name, type, render})
-    console.log(this)
-    register(
+  constructor({element, name ='', type='html', render = __Ziko__.__Config__.default.render}={}){
+    super()
+    // console.log({type})
+    // console.log(this)
+    register_to_class(
       this, 
       AttrsMethods, 
       DomMethods, 

package/src/ui/constructors/UIElementCore.js

@@ -2,22 +2,21 @@ import {UINode} from "./UINode.js";
 import {__init__global__, UIStore} from '../../__ziko__/index.js';
 __init__global__()
 class UIElementCore extends UINode{
-  constructor({
-        element, 
-        name ='', 
-        type="html", 
-        render = __Ziko__.__Config__.default.render, 
-        isInteractive = false,
-    }={}){
+  constructor(){
     super()
-    this.init(element, name, type, render, isInteractive)
   }
   init(element, name, type, render, isInteractive = [true, false][Math.floor(2*Math.random())]){
     this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
     if(typeof element === "string") {
       switch(type){
-        case "html" : element = globalThis?.document?.createElement(element); break;
-        case "svg" : element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element);
+        case "html" : {
+          element = globalThis?.document?.createElement(element);
+          console.log('1')
+        }; break;
+        case "svg" : {
+          element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element); 
+          console.log('2')
+        }; break;
         default : throw Error("Not supported")
       }
     }
@@ -71,7 +70,7 @@ class UIElementCore extends UINode{
       // && 
       this.isInteractive()){
       // this.setAttr("ziko-hydration-index", globalThis.__Ziko__.__HYDRATION__.index);
-      this.element.setAttribute('ziko-hydration-index', globalThis.__Ziko__.__HYDRATION__.index)
+      // this.element.setAttribute('ziko-hydration-index', globalThis.__Ziko__.__HYDRATION__.index)
       globalThis.__Ziko__.__HYDRATION__.register(() => this)
     }
     globalThis.__Ziko__.__UI__.push(this)

package/src/ui/index.js

@@ -5,6 +5,6 @@ export * from './text/index.js';
 export * from './flex/index.js';
 // export * from './grid/index.js';
 export * from './suspense/index.js';
-// export * from './wrapper/index.js';
+export * from './wrappers/index.js';
 // export * from './graphics/index.js'
 export * from './web-component/index.js'

package/src/ui/logic/switch/index.js

@@ -0,0 +1,28 @@
+import { UIElement } from "../../constructors/UIElement.js";
+
+class UISwitch{
+    constructor(key, cases){
+        this.key = key; 
+        this.cases = cases;
+    }
+    current_ui(){
+        const matched = Object.keys(this.cases).find(n => n == this.key) ?? 'default'
+        return this.cases[matched]()
+    }
+    updateKey(key){
+        this.key
+    }
+    
+}
+
+const Switch=({key, cases})=> new UISwitch(key, cases)
+
+export{
+    UISwitch, 
+    Switch
+}
+
+// export const Switch=({key, cases}) => {
+//     const matched = Object.keys(cases).find(n => n == key) ?? 'default';
+//     return this.cases[matched]()
+// }

package/src/ui/tags/index.js

@@ -9,8 +9,8 @@ const _h=(tag, type, attributes, ...children)=>{
     children && element.append(...children);
     return element; 
 }
-const h=(tag, attributes = {}, ...children)=> _h(tag, "html", attributes, ...children);
-const s=(tag, attributes = {}, ...children)=> _h(tag, "svg", attributes, ...children);
+// const h=(tag, attributes = {}, ...children)=> _h(tag, "html", attributes, ...children);
+// const s=(tag, attributes = {}, ...children)=> _h(tag, "svg", attributes, ...children);
 
 const tags = new Proxy({}, {
   get(target, prop) {
@@ -19,16 +19,22 @@ const tags = new Proxy({}, {
     let type ;
     if(HTMLTags.includes(tag)) type = 'html'
     if(SVGTags.includes(tag)) type = 'svg'
+    // console.log(type)
     return (...args)=>{
       // Fix undefined
       // console.log(isStateGetter(args[0]))
+      // console.log(!!args)
+      if(args.length === 0) {
+        // console.log('length 0')
+        return new UIElement({element : tag, name : tag, type})
+      }
       if(
         ['string', 'number'].includes(typeof args[0]) 
         || args[0] instanceof UIElement 
         || (typeof args[0] === 'function' && args[0]().isStateGetter())
       ) return new UIElement({element : tag, name : tag, type}).append(...args);
       // console.log(args[0])
-      return new UIElement({element : tag}).setAttr(args.shift()).append(...args)
+      return new UIElement({element : tag, type}).setAttr(args.shift()).append(...args)
     }
     // if(SVGTags.includes(tag)) return (...args) => new UIElement(tag,"",{el_type : "svg"}).append(...args);
     // return (...args)=>{

package/src/ui/tags/tags-list.js

@@ -86,7 +86,6 @@ const HTMLTags = [
   'sub',
   'summary',
   'sup',
-  'svg',
   'table',
   'tbody',
   'td',

package/src/ui/wrappers/html/index.js

@@ -0,0 +1,26 @@
+import { UIElement } from "../../constructors/UIElement.js";
+
+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)
+export{
+    UIHTMLWrapper,
+    HTMLWrapper
+}

package/src/ui/wrappers/index.js

@@ -0,0 +1,2 @@
+export * from './html/index.js'
+export * from './svg/index.js'

package/src/ui/wrappers/svg/index.js

@@ -0,0 +1,46 @@
+import { UIElement } from "../../constructors/UIElement.js";
+
+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)
+
+    globalThis.svg = svg
+    globalThis.children = children 
+    globalThis.attributes = attributes
+    globalThis.element = element
+    return element;
+  }
+  throw new Error("DOMParser is not available in this environment");
+}
+
+
+
+const SVGWrapper = (content) => new UISVGWrapper(content)
+export{
+    UISVGWrapper,
+    SVGWrapper
+}

package/src/ui/wrapper/index.js

@@ -1,42 +0,0 @@
-import {UIElement} from "../constructors/UIElement.js";
-class ZikoUIXMLWrapper extends UIElement{
-    constructor(XMLContent, type){
-        super({element : "div", name : ""})
-        this.element.append(type==="svg"?svg2dom(XMLContent):html2dom(XMLContent))
-    }
-}
-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;
-    }
-  }
-function svg2dom(svgString) {
-    if(globalThis?.DOMParser){
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(svgString.replace(/\s+/g, ' ').trim(), 'image/svg+xml');
-        return doc.documentElement; // SVG elements are usually at the root
-    }
-}
-class ZikoUIHTMLWrapper extends ZikoUIXMLWrapper{
-    constructor(HTMLContent){
-        super(HTMLContent, "html")
-    }
-}
-class ZikoUISVGWrapper extends ZikoUIXMLWrapper{
-    constructor(SVGContent){
-        super(SVGContent, "svg")
-    }
-}
-const HTMLWrapper = (HTMLContent) => new ZikoUIHTMLWrapper(HTMLContent);
-const SVGWrapper = (SVGContent) => new ZikoUISVGWrapper(SVGContent);
-
-export{
-    ZikoUIXMLWrapper,
-    ZikoUIHTMLWrapper,
-    ZikoUISVGWrapper,
-    HTMLWrapper,
-    SVGWrapper
-}