ziko 2.0.0-beta.0 → 2.0.0-beta.10

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sat Sep 05 2026 12:37:55 GMT+0100 (UTC+01:00)
+  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
   Released under MIT License
@@ -276,16 +276,12 @@ let UIElement$1 = class UIElement extends UINode{
   constructor(){
     super();
   }
-  init({element, name, type, render, props = {}, items = []} = {}){
+  init({element, name, type, mount, props = {}, items = []} = {}){
     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); 
-        } break;
+        case "html" : element = globalThis?.document?.createElement(element); break;
+        case "svg" : element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element); break;
         default : throw Error("Not supported")
       }
     }
@@ -295,37 +291,37 @@ let UIElement$1 = class UIElement extends UINode{
       itemsTarget : this,
       isInteractive : false,
       parent:null,
-      isBody:false,
-      isRoot:false,
-      isHidden: false,
-      isFrozzen:false,
-      attributes: {},
-      filters: {},
-      temp:{}
+      // isBody:false,
+      // isRoot:false,
+      // isHidden: false,
+      // isFrozzen:false,
+      // attributes: {},
+      // filters: {},
+      // temp:{}
     });
-    this.events = {
-      ptr:null,
-      mouse:null,
-      wheel:null,
-      key:null,
-      drag:null,
-      drop:null,
-      click:null,
-      clipboard:null,
-      focus:null,
-      swipe:null,
-      custom:null,
-    };
-    this.observer={
-      resize:null,
-      intersection:null
-    };
+    // this.events = {
+    //   ptr:null,
+    //   mouse:null,
+    //   wheel:null,
+    //   key:null,
+    //   drag:null,
+    //   drop:null,
+    //   click:null,
+    //   clipboard:null,
+    //   focus:null,
+    //   swipe:null,
+    //   custom:null,
+    // }
+    // this.observer={
+    //   resize:null,
+    //   intersection:null
+    // }
     if(element) Object.assign(this.cache,{element});
     this.items = new UIStore();
     globalThis.__Ziko__.__UI__[this.cache.name]
       ? globalThis.__Ziko__.__UI__[this.cache.name]?.push(this)
       : globalThis.__Ziko__.__UI__[this.cache.name]=[this];
-    element && render && this?.render?.();
+    element && mount && this?.mount?.();
     globalThis.__Ziko__.__UI__.push(this);
     
     const parsed_props = parse_props(props);
@@ -382,12 +378,9 @@ function mount(target = this.target, 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;
 }
@@ -397,7 +390,6 @@ function unmount(delay = 0) {
         setTimeout(() => this.unmount(0), delay);
         return this;
     }
-
     if (this.cache.parent) {
         this.cache.parent.remove(this);
     } else if (
@@ -538,11 +530,11 @@ class UIText extends UINode {
 const text = (...str) => new UIText(...str);
 
 function append(...ele) {
-  __addItem__.call(this, "append", "push", ...ele);
+  __addItems__.call(this, "append", "push", ...ele);
   return this;
 }
 function prepend(...ele) {
-  this.__addItem__.call(this, "prepend", "unshift", ...ele);
+  this.__addItems__.call(this, "prepend", "unshift", ...ele);
   return this;
 }
 function insertAt(index, ...ele) {
@@ -584,58 +576,46 @@ function replaceElementWith(new_element){
     return this
 }
 function after(ui){
-  if(ui?.isUIElement) ui=ui.element;
+  if(ui?.isUIElement) ui = ui.element;
   this.itemsTarget.element?.after(ui);
   return this;
 }
 function before(ui){
-  if(ui?.isUIElement) ui=ui.element;
+  if(ui?.isUIElement) ui = ui.element;
   this.itemsTarget.element?.before(ui);
   return this;
 }
-async function __addItem__(adder, pusher, ...ele) {
-  const itemsTarget_el = this.itemsTarget.element;
-  const itemsTarget = this.itemsTarget;
-  if (this.cache.isFrozzen) {
-    console.warn("You can't append new item to frozzen element");
-    return this;
+
+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
+    );
   }
-  for (let i = 0; i < ele.length; i++) {
-    if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
-        // Fix Items Latter
-    if (ele[i] instanceof Function) {
-      if (isStateGetter(ele[i])) {
-        const getter = ele[i]();
-        ele[i] = text(getter.value);
-        getter._subscribe(
-            (newValue) => (ele[i].element.textContent = newValue),
-            ele[i] 
-        );
-        // this.itemsTarget.element.appendChild(textNode);
-      }
-    }
-    if (typeof globalThis?.Node === "function" && ele[i] instanceof globalThis?.Node) ele[i] = new this.constructor(ele[i]);
-    if (ele[i]?.isUINode) {
-        ele[i].cache.parent = this;
-        itemsTarget_el?.[adder](ele[i].element);
-        ele[i].target = this.itemsTarget.element;
-        itemsTarget.items[pusher](ele[i]);
-    } 
-    else if(ele[i] instanceof Promise){
-      const UIEle = await ele[i];
-      UIEle.cache.parent = this;
-      itemsTarget_el?.[adder](UIEle.element);
-      UIEle.target = this.itemsTarget.element;
-      itemsTarget.items[pusher](UIEle);
-    }
-    else if (ele[i] instanceof Object) {
-      if (ele[i]?.style) this.style(ele[i]?.style);
-      if (ele[i]?.attr) {
-        Object.entries(ele[i].attr).forEach((n) =>
-          this.setAttr("" + n[0], n[1]),
-        );
-      }
-    }
+  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;
@@ -644,6 +624,7 @@ async function __addItem__(adder, pusher, ...ele) {
 var DomMethods = /*#__PURE__*/Object.freeze({
    __proto__: null,
    __addItem__: __addItem__,
+   __addItems__: __addItems__,
    after: after,
    append: append,
    before: before,
@@ -1356,9 +1337,9 @@ class UIElement extends UIElement$1{
     if(directive)this.element.setAttribute('data-hydration-directive', directive);
     return this;
   }
-  get st(){
-    return this.cache.style;
-  }
+  // get st(){
+  //   return this.cache.style;
+  // }
   get attr(){
     return this.cache.attributes;
   }
@@ -1753,7 +1734,7 @@ const is_anagram = (word, words) =>{
 const is_isogram = (text = '') => [...new Set(text.toLowerCase())].length === text.length;
 
 if(globalThis?.document){
-    document?.addEventListener("DOMContentLoaded", __Ziko__.__Config__.init());
+    document?.addEventListener('DOMContentLoaded', __Ziko__.__Config__.init());
 }
 
 // import './math/functions/proxy.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.10",
   "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/Layout/index.d.ts

@@ -0,0 +1,38 @@
+import type { UIElement } from "../dom/UIElement";
+export interface UILayoutOptions {
+  title?: string;
+  icon?: string;
+  description?: string;
+  lang?: string;
+  links?: Record<string, any>[];
+  script?: Record<string, any>[];
+  meta?: Record<string, any>[];
+}
+
+export class UILayout {
+  options: UILayoutOptions;
+  ui: UIElement[];
+
+  constructor(
+    options?: UILayoutOptions,
+    ...ui: UIElement[]
+  );
+
+  render(): void | {
+    title?: string;
+    icon?: string;
+    description?: string;
+    lang?: string;
+    links: Record<string, any>[];
+    meta: Record<string, any>[];
+    script: Record<string, any>[];
+    body: UIElement[];
+  };
+
+  mount(target: Element): this;
+}
+
+export function Layout(
+  options?: UILayoutOptions,
+  ...ui: UIElement[]
+): UILayout;

package/src/Layout/index.js

@@ -0,0 +1,98 @@
+import { tags } from '../dom/tags/index.js'
+import { call_with_optional_props } from '../dom/internal-utils/call_with_optional_props.js'
+
+const { meta, link, script } = tags;
+
+export 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
+  }
+
+}
+
+export const Layout = call_with_optional_props(UILayout)

package/src/dom/UIElement/index.js

@@ -81,15 +81,15 @@ class UIElement extends UIElementCore{
   useClient(directive){
     if(!this.cache.isInteractive){
       this.element.setAttribute('data-hydration-index', globalThis.__Ziko__.__HYDRATION__.index);
-      globalThis.__Ziko__.__HYDRATION__.register(() => this);
+      globalThis.__Ziko__.__HYDRATION__.register(() => this.constructor);
       this.cache.isInteractive = true;
     }
     if(directive)this.element.setAttribute('data-hydration-directive', directive);
     return this;
   }
-  get st(){
-    return this.cache.style;
-  }
+  // get st(){
+  //   return this.cache.style;
+  // }
   get attr(){
     return this.cache.attributes;
   }

package/src/dom/internal-utils/checkers.js

@@ -1,5 +1,5 @@
 import { isStateGetter } from '../../hooks/use-state.js'
-import { UIElement } from '../constructors/UIElement.js'
+import { UIElement } from '../UIElement/index.js'
 
 export const is_ui_item = item => {
     return (

package/src/internal-utils/symbols/index.d.ts

@@ -36,4 +36,7 @@ export declare const UIELEMENT: unique symbol;
  * Used by hooks and UI components to recognize state getters without
  * importing the state implementation.
  */
-export declare const STATE_GETTER: unique symbol;
+export declare const STATE_GETTER: unique symbol;
+
+export declare const LAYOUT: unique symbol;
+export declare const PAGE: unique symbol;

package/src/internal-utils/symbols/index.js

@@ -3,3 +3,4 @@ export const COMPLEX      = Symbol.for('ziko/math/COMPLEX');
 export const MATRIX       = Symbol.for('ziko/math/MATRIX');
 export const UIELEMENT    = Symbol.for('ziko/dom/UIELEMENT');
 export const STATE_GETTER = Symbol.for("ziko/hooks/STATE_GETTER");
+export const LAYOUT       = Symbol.for("ziko/app/LAYOUT");

package/src/mini-dom/UIElement/index.js

@@ -7,16 +7,12 @@ class UIElement extends UINode{
   constructor(){
     super()
   }
-  init({element, name, type, render, props = {}, items = []} = {}){
+  init({element, name, type, mount, props = {}, items = []} = {}){
     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); 
-        }; break;
+        case "html" : element = globalThis?.document?.createElement(element); break;
+        case "svg" : element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element); break;
         default : throw Error("Not supported")
       }
     }
@@ -26,37 +22,37 @@ class UIElement extends UINode{
       itemsTarget : this,
       isInteractive : false,
       parent:null,
-      isBody:false,
-      isRoot:false,
-      isHidden: false,
-      isFrozzen:false,
-      attributes: {},
-      filters: {},
-      temp:{}
+      // isBody:false,
+      // isRoot:false,
+      // isHidden: false,
+      // isFrozzen:false,
+      // attributes: {},
+      // filters: {},
+      // temp:{}
     })
-    this.events = {
-      ptr:null,
-      mouse:null,
-      wheel:null,
-      key:null,
-      drag:null,
-      drop:null,
-      click:null,
-      clipboard:null,
-      focus:null,
-      swipe:null,
-      custom:null,
-    }
-    this.observer={
-      resize:null,
-      intersection:null
-    }
+    // this.events = {
+    //   ptr:null,
+    //   mouse:null,
+    //   wheel:null,
+    //   key:null,
+    //   drag:null,
+    //   drop:null,
+    //   click:null,
+    //   clipboard:null,
+    //   focus:null,
+    //   swipe:null,
+    //   custom:null,
+    // }
+    // this.observer={
+    //   resize:null,
+    //   intersection:null
+    // }
     if(element) Object.assign(this.cache,{element});
     this.items = new UIStore();
     globalThis.__Ziko__.__UI__[this.cache.name]
       ? globalThis.__Ziko__.__UI__[this.cache.name]?.push(this)
       : globalThis.__Ziko__.__UI__[this.cache.name]=[this];
-    element && render && this?.render?.()
+    element && mount && this?.mount?.()
     globalThis.__Ziko__.__UI__.push(this)
     
     const parsed_props = parse_props(props);

package/src/mini-dom/mixins/dom.js

@@ -1,11 +1,11 @@
 import { text } from "../text/index.js";
 import { isStateGetter } from "../../hooks/use-state.js";
 export function append(...ele) {
-  __addItem__.call(this, "append", "push", ...ele);
+  __addItems__.call(this, "append", "push", ...ele);
   return this;
 }
 export function prepend(...ele) {
-  this.__addItem__.call(this, "prepend", "unshift", ...ele);
+  this.__addItems__.call(this, "prepend", "unshift", ...ele);
   return this;
 }
 export function insertAt(index, ...ele) {
@@ -47,58 +47,46 @@ export function replaceElementWith(new_element){
     return this
 }
 export function after(ui){
-  if(ui?.isUIElement) ui=ui.element;
+  if(ui?.isUIElement) ui = ui.element;
   this.itemsTarget.element?.after(ui)
   return this;
 }
 export function before(ui){
-  if(ui?.isUIElement) ui=ui.element;
+  if(ui?.isUIElement) ui = ui.element;
   this.itemsTarget.element?.before(ui)
   return this;
 }
-export async function __addItem__(adder, pusher, ...ele) {
-  const itemsTarget_el = this.itemsTarget.element;
-  const itemsTarget = this.itemsTarget
-  if (this.cache.isFrozzen) {
-    console.warn("You can't append new item to frozzen element");
-    return this;
+
+export 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
+    );
   }
-  for (let i = 0; i < ele.length; i++) {
-    if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
-        // Fix Items Latter
-    if (ele[i] instanceof Function) {
-      if (isStateGetter(ele[i])) {
-        const getter = ele[i]();
-        ele[i] = text(getter.value);
-        getter._subscribe(
-            (newValue) => (ele[i].element.textContent = newValue),
-            ele[i] 
-        );
-        // this.itemsTarget.element.appendChild(textNode);
-      }
-    }
-    if (typeof globalThis?.Node === "function" && ele[i] instanceof globalThis?.Node) ele[i] = new this.constructor(ele[i]);
-    if (ele[i]?.isUINode) {
-        ele[i].cache.parent = this;
-        itemsTarget_el?.[adder](ele[i].element);
-        ele[i].target = this.itemsTarget.element;
-        itemsTarget.items[pusher](ele[i]);
-    } 
-    else if(ele[i] instanceof Promise){
-      const UIEle = await ele[i]
-      UIEle.cache.parent = this;
-      itemsTarget_el?.[adder](UIEle.element);
-      UIEle.target = this.itemsTarget.element;
-      itemsTarget.items[pusher](UIEle)
-    }
-    else if (ele[i] instanceof Object) {
-      if (ele[i]?.style) this.style(ele[i]?.style);
-      if (ele[i]?.attr) {
-        Object.entries(ele[i].attr).forEach((n) =>
-          this.setAttr("" + n[0], n[1]),
-        );
-      }
-    }
+  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;
+  }
+}
+
+export async function __addItems__(adder, pusher, ...elements) {
+  for (const item of elements) {
+    await this.__addItem__(adder, pusher, item);
   }
   this.maintain();
   return this;

package/src/mini-dom/mixins/lifecycle.js

@@ -3,12 +3,9 @@ export function mount(target = this.target, 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;
 }
@@ -18,7 +15,6 @@ export function unmount(delay = 0) {
         setTimeout(() => this.unmount(0), delay);
         return this;
     }
-
     if (this.cache.parent) {
         this.cache.parent.remove(this);
     } else if (

package/src/router/file-based-router/index.d.ts

@@ -1,6 +1,6 @@
 // createSPAFileBasedRouter.d.ts
 
-import { UIElement } from '../../../src/ui/constructors/UIElement.js'
+import { UIElement } from '../../dom/UIElement'
 
 /**
  * Creates a SPA (Single Page Application) file-based router.