ziko 0.0.1

package/src/App/Themes/index.js

@@ -0,0 +1,11 @@
+import LightThemes from "./light";
+import DarkThemes from "./dark";
+const Themes={
+    ...LightThemes,
+    ...DarkThemes
+}
+export {
+    Themes,
+    LightThemes,
+    DarkThemes,
+};

package/src/App/Themes/light.js

@@ -0,0 +1,255 @@
+const LightThemes={
+    cozyCottonCandy: {
+      background: "#FCE4EC",
+      currentLine: "#F8BBD0",
+      selection: "#FFCDD2",
+      foreground: "#673AB7",
+      comment: "#9575CD",
+      cyan: "#00BCD4",
+      green: "#4CAF50",
+      orange: "#FF9800",
+      pink: "#E91E63",
+      purple: "#9C27B0",
+      red: "#F44336",
+      yellow: "#FFEB3B"
+    },
+    crystalClear: {
+      background: "#F6F8FA",
+      currentLine: "#E8F0F5",
+      selection: "#D4E9F7",
+      foreground: "#485766",
+      comment: "#8492A6",
+      cyan: "#00ACC1",
+      green: "#8BC34A",
+      orange: "#FFA726",
+      pink: "#FF4081",
+      purple: "#7E57C2",
+      red: "#EF5350",
+      yellow: "#FFD740"
+    },
+    lightdreamyDusk: {
+      background: "#F5F5F5",
+      currentLine: "#E8E8E8",
+      selection: "#DADADA",
+      foreground: "#555555",
+      comment: "#999999",
+      cyan: "#5FB3B3",
+      green: "#68C386",
+      orange: "#FFB67A",
+      pink: "#FF94B0",
+      purple: "#B78BC3",
+      red: "#FF6666",
+      yellow: "#FFD666"
+    },
+    luminousLavender: {
+      background: "#F3E5F5",
+      currentLine: "#E1BEE7",
+      selection: "#CE93D8",
+      foreground: "#311B92",
+      comment: "#673AB7",
+      cyan: "#00BCD4",
+      green: "#8BC34A",
+      orange: "#FF9800",
+      pink: "#E91E63",
+      purple: "#9C27B0",
+      red: "#F44336",
+      yellow: "#FFEB3B"
+    },
+    meadowMornings: {
+      background: "#F3E5F5",
+      currentLine: "#E1BEE7",
+      selection: "#CE93D8",
+      foreground: "#311B92",
+      comment: "#673AB7",
+      cyan: "#00BCD4",
+      green: "#8BC34A",
+      orange: "#FF9800",
+      pink: "#E91E63",
+      purple: "#9C27B0",
+      red: "#F44336",
+      yellow: "#FFEB3B"
+    },
+    moonlitMauve: {
+      background: "#F3E5F5",
+      currentLine: "#E1BEE7",
+      selection: "#CE93D8",
+      foreground: "#311B92",
+      comment: "#673AB7",
+      cyan: "#00BCD4",
+      green: "#8BC34A",
+      orange: "#FF9800",
+      pink: "#E91E63",
+      purple: "#9C27B0",
+      red: "#F44336",
+      yellow: "#FFEB3B"
+    },
+    morningMist: {
+      background: "#F6F6F6",
+      currentLine: "#EAEAEA",
+      selection: "#D8D8D8",
+      foreground: "#333333",
+      comment: "#808080",
+      cyan: "#00A6A6",
+      green: "#4CAF50",
+      orange: "#FFA726",
+      pink: "#FF4081",
+      purple: "#9C27B0",
+      red: "#FF5252",
+      yellow: "#FFD740"
+    },
+    oceanBreeze: {
+      background: "#ECF1F4",
+      currentLine: "#DDE8ED",
+      selection: "#BFD3C1",
+      foreground: "#37474F",
+      comment: "#607D8B",
+      cyan: "#00BCD4",
+      green: "#8BC34A",
+      orange: "#FF9800",
+      pink: "#E91E63",
+      purple: "#673AB7",
+      red: "#F44336",
+      yellow: "#FFEB3B"
+    },
+    pastelParadise: {
+      background: "#F5F5F5",
+      currentLine: "#E8E8E8",
+      selection: "#DADADA",
+      foreground: "#555555",
+      comment: "#999999",
+      cyan: "#5FB3B3",
+      green: "#68C386",
+      orange: "#FFB67A",
+      pink: "#FF94B0",
+      purple: "#B78BC3",
+      red: "#FF6666",
+      yellow: "#FFD666"
+    },
+    pastelPetals: {
+      background: "#FCE4EC",
+      currentLine: "#F8BBD0",
+      selection: "#FFCDD2",
+      foreground: "#673AB7",
+      comment: "#9575CD",
+      cyan: "#00BCD4",
+      green: "#4CAF50",
+      orange: "#FF9800",
+      pink: "#E91E63",
+      purple: "#9C27B0",
+      red: "#F44336",
+      yellow: "#FFEB3B"
+    },
+    sereneSnowfall: {
+      background: "#F9F9F9",
+      currentLine: "#EDEDED",
+      selection: "#D8D8D8",
+      foreground: "#454545",
+      comment: "#888888",
+      cyan: "#5FA5A5",
+      green: "#5BC47E",
+      orange: "#FFBC8D",
+      pink: "#FFA7BF",
+      purple: "#B88AAE",
+      red: "#FF7575",
+      yellow: "#FFD98F"
+    },
+    softSherbet: {
+      background: "#FDF8F3",
+      currentLine: "#FAF1EB",
+      selection: "#FFEBEE",
+      foreground: "#6D4C41",
+      comment: "#A1887F",
+      cyan: "#00BCD4",
+      green: "#689F38",
+      orange: "#FFA000",
+      pink: "#EC407A",
+      purple: "#8E24AA",
+      red: "#E53935",
+      yellow: "#FFC107"
+    },
+    subtleSerenity: {
+      background: "#F3F5F7",
+      currentLine: "#E8EDF2",
+      selection: "#D1D9E6",
+      foreground: "#2C3E50",
+      comment: "#95A5A6",
+      cyan: "#3498DB",
+      green: "#2ECC71",
+      orange: "#F39C12",
+      pink: "#E74C3C",
+      purple: "#9B59B6",
+      red: "#C0392B",
+      yellow: "#F1C40F"
+    },
+    summerSunset: {
+      background: "#FCE4EC",
+      currentLine: "#F8BBD0",
+      selection: "#FFCDD2",
+      foreground: "#4E342E",
+      comment: "#795548",
+      cyan: "#009688",
+      green: "#43A047",
+      orange: "#FF5722",
+      pink: "#E91E63",
+      purple: "#9C27B0",
+      red: "#F44336",
+      yellow: "#FFEB3B"
+    },
+    sunnyDay: {
+      background: "#FFF8E1",
+      currentLine: "#FFF3E0",
+      selection: "#FFE0B2",
+      foreground: "#4E342E",
+      comment: "#795548",
+      cyan: "#00BCD4",
+      green: "#8BC34A",
+      orange: "#FF9800",
+      pink: "#E91E63",
+      purple: "#673AB7",
+      red: "#F44336",
+      yellow: "#FFEB3B"
+    },
+    tranquilTwilight: {
+      background: "#F9F9F9",
+      currentLine: "#EDEDED",
+      selection: "#D8D8D8",
+      foreground: "#454545",
+      comment: "#888888",
+      cyan: "#5FA5A5",
+      green: "#5BC47E",
+      orange: "#FFBC8D",
+      pink: "#FFA7BF",
+      purple: "#B88AAE",
+      red: "#FF7575",
+      yellow: "#FFD98F"
+    },
+    tranquilWaves: {
+      background: "#F9F9F9",
+      currentLine: "#E4E4E4",
+      selection: "#D4D4D4",
+      foreground: "#2C3E50",
+      comment: "#7F8C8D",
+      cyan: "#3498DB",
+      green: "#2ECC71",
+      orange: "#F39C12",
+      pink: "#E74C3C",
+      purple: "#9B59B6",
+      red: "#C0392B",
+      yellow: "#F1C40F"
+    },
+    whisperingWillow: {
+      background: "#F6F8FA",
+      currentLine: "#E8F0F5",
+      selection: "#D4E9F7",
+      foreground: "#485766",
+      comment: "#8492A6",
+      cyan: "#00ACC1",
+      green: "#8BC34A",
+      orange: "#FFA726",
+      pink: "#FF4081",
+      purple: "#7E57C2",
+      red: "#EF5350",
+      yellow: "#FFD740"
+    }
+  }
+export default LightThemes;

package/src/App/app.js

@@ -0,0 +1,37 @@
+import { ZikoUIFlex } from "../UI/CustomElement/Flex.js";
+import { Seo } from "./Seo/index.js";
+class ZikoUIApp extends ZikoUIFlex{
+    constructor(){
+        super("main");
+        this.root=document.documentElement;
+        this.head=null;
+        this.#init();
+        this.seo=Seo(this);
+        Object.assign(this.cache,{
+            theme:null,
+            isRoot:true
+        });
+        this.render();
+    }
+    #init(){
+        this.root.setAttribute("data-engine","zikojs");
+        const head=this.root.getElementsByTagName("head")[0];
+        this.head=head?head:this.head=document.createElement("head");
+        if(!head)this.root.insertBefore(this.head,document.body);
+        const title=this.head.getElementsByTagName("title")[0];
+        this.Title=title?title:document.createElement("title");
+        if(!title)this.head.append(this.Title);
+    }
+    title(title=this.title.textContent){
+        this.Title.textContent=title;
+        return this;
+    }
+    prefetch(){
+
+    }
+    description(){
+
+    }
+}
+const App=(...UIElement)=>new ZikoUIApp().append(...UIElement)
+export {App};

package/src/App/index.js

@@ -0,0 +1,11 @@
+export{
+    App,
+} from "./app.js"
+export { 
+    Themes,
+    LightThemes,
+    DarkThemes
+} from "./Themes";
+export {
+    __init__,
+} from "./Globals"

package/src/Data/Api/fetchdom.js

@@ -0,0 +1,14 @@
+import { preload } from "./preload"
+
+async function fetchdom(url='https://github.com/zakarialaoui10'){
+  const data=await fetch(url)
+  const html=await data.text()
+  const dom= new DOMParser().parseFromString(html,'text/xml')
+  return dom.documentElement
+}
+function fetchdomSync(url='https://github.com/zakarialaoui10'){
+  const data=preload(url);
+  const dom= new DOMParser().parseFromString(data,'text/xml')
+  return dom.documentElement;
+}
+export {fetchdom,fetchdomSync}

package/src/Data/Api/index.js

@@ -0,0 +1,4 @@
+export { preload } from "./preload";
+import { fetchdom ,fetchdomSync } from "./fetchdom";
+globalThis.fetchdom=fetchdom
+globalThis.fetchdomSync=fetchdomSync

package/src/Data/Api/preload.js

@@ -0,0 +1,11 @@
+const preload=(url)=>{
+    const xhr = new XMLHttpRequest();
+    xhr.open("GET", url, false); 
+    xhr.send();
+    if (xhr.status === 200) {
+      return xhr.responseText;
+    } else {
+      throw new Error(`Failed to fetch data from ${url}. Status: ${xhr.status}`);
+    }
+}
+export {preload}

package/src/Data/Converter/canvas.js

@@ -0,0 +1,25 @@
+const canvas2image = (canvas,format) => {}
+class Canvas2Video {
+    constructor(canvas,mimeType="video/webm") {
+      this.canvas = canvas;
+      this.videoSrc=null;
+      this.mediaRecorder = new MediaRecorder(this.canvas.captureStream(), { mimeType: mimeType });
+      this.chunks = [];
+      this.mediaRecorder.ondataavailable = (e) => {
+        this.chunks.push(e.data);
+      };
+      this.mediaRecorder.onstop = (e) => {
+        const blob = new Blob(this.chunks, { type: mimeType });
+        this.videoSrc = URL.createObjectURL(blob);
+      };
+    }
+    start() {
+      this.mediaRecorder.start();
+      return this;
+    }
+    stop() {
+      this.mediaRecorder.stop();
+      return this;
+    }
+  }
+const canvas2video=(canvas)=>new Canvas2Video(canvas)

package/src/Data/Converter/csv.js

@@ -0,0 +1,33 @@
+import { Matrix } from "../../Math"
+const csv2arr = (csv, delimiter = ",")=>csv.trim().trimEnd().split("\n").map(n=>n.split(delimiter));
+const csv2matrix = (csv, delimiter = ",")=>new Matrix(csv2arr(csv,delimiter));
+const csv2object = (csv, delimiter = ",") => {
+    const [header, ...rows] = csv2arr(csv,delimiter);
+    const result = rows.map(row => {
+        const obj = {};
+        header.forEach((key, index) => {
+            obj[key] = row[index];
+        });
+        return obj;
+    });
+    return result;
+};
+const csv2json = (csv, delimiter = ",") => JSON.stringify(csv2object(csv,delimiter));
+const csv2sql=(csv, Table)=>{
+    const lines = csv.trim().trimEnd().split('\n').filter(n=>n);
+    const columns = lines[0].split(',');
+    let sqlQuery = `INSERT INTO ${Table} (${columns.join(', ')}) Values `
+    let sqlValues = []
+    for (let i = 1; i < lines.length; i++) {
+      const values = lines[i].split(',');
+      sqlValues.push(`(${values})`)
+    }
+    return sqlQuery+sqlValues.join(",\n");
+  }
+export{
+    csv2arr,
+    csv2matrix,
+    csv2object,
+    csv2json,
+    csv2sql
+}

package/src/Data/Converter/index.js

@@ -0,0 +1,25 @@
+export { 
+    markdown2html
+ } from "./markdown";
+ export { 
+    csv2arr,
+    csv2matrix,
+    csv2object,
+    csv2json,
+    csv2sql
+ } from "./csv";
+ export {
+   json2arr,
+   json2csv,
+   json2csvFile,
+   json2yml,
+   json2ymlFile,
+   json2xml,
+   json2xmlFile
+ } from "./json";
+ export { 
+   svg2str,
+   svg2ascii,
+   svg2imgUrl,
+   svg2img
+ } from "./svg";

package/src/Data/Converter/json.js

@@ -0,0 +1,80 @@
+const _objects2arr=data=>data instanceof Array?[Object.keys(data[0]),...data.map(n=>Object.values(n))]:[Object.keys(data)];
+const _objects2csv=(data,delimiter)=>_objects2arr(data).map(n=>n.join(delimiter)).join("\n")
+const json2arr=json=>json instanceof Object?_objects2arr(json):_objects2arr(JSON.parse(json));
+const json2csv=(json,delimiter=",")=>json instanceof Object?_objects2csv(json,delimiter):_objects2csv(JSON.parse(json),delimiter);
+const json2csvFile=(json,delimiter)=>{
+    const str=json2csv(json,delimiter);
+    const blob=new Blob([str], { type: 'text/csv;charset=utf-8;' });
+    return{
+       str,
+       blob,
+       url:URL.createObjectURL(blob)
+    }
+}
+const _processObject=(obj, indent)=>{
+    const yml = [];
+    if (Array.isArray(obj)) {
+        obj.forEach(item => {
+            if (typeof item === 'object' && item !== null) {
+                yml.push(`${indent}-`);
+                const nestedLines = _processObject(item, `${indent}  `);
+                yml.push(...nestedLines);
+            } else yml.push(`${indent}- ${item}`);
+        });
+    } else {
+        for (const key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                const value = obj[key];
+                if (typeof value === 'object' && value !== null) {
+                    yml.push(`${indent}${key}:`);
+                    const nestedLines = _processObject(value, `${indent}  `);
+                    yml.push(...nestedLines);
+                } else {
+                    yml.push(`${indent}${key}: ${value}`);
+                }
+            }
+        }
+    }
+    return yml;
+}
+const _object2yml=(object,indent="")=>_processObject(object,indent).join('\n')
+const json2yml=(json,indent)=>json instanceof Object?_object2yml(json,indent):_object2yml(JSON.parse(json),indent)
+const json2ymlFile=(json,indent)=>{
+    const str=json2yml(json,indent);
+    const blob=new Blob([str], { type: 'text/yml;charset=utf-8;' });
+    return{
+       str,
+       blob,
+       url:URL.createObjectURL(blob)
+    }
+}
+const json2xml=(json, indent = 1)=>{
+    let xml = '';
+    for (const key in json) {
+      if (json.hasOwnProperty(key)) {
+        const value = json[key];
+        xml += '\n' + ' '.repeat(indent) + `<${key}>`;
+        (typeof value === 'object') ? xml += json2xml(value, indent + 2) : xml += `${value}`;
+        xml += `</${key}>`;
+      }
+    }
+    return xml.trim();
+  }
+const json2xmlFile=(json,indent)=>{
+    const str=json2xml(json,indent);
+    const blob=new Blob([str], { type: 'text/xml;charset=utf-8;' });
+    return{
+       str,
+       blob,
+       url:URL.createObjectURL(blob)
+    }
+}
+export{
+    json2arr,
+    json2csv,
+    json2csvFile,
+    json2yml,
+    json2ymlFile,
+    json2xml,
+    json2xmlFile
+}

package/src/Data/Converter/markdown.js

@@ -0,0 +1,83 @@
+const parseInlineElements = text => {
+    return text
+        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') 
+        .replace(/\*(.*?)\*/g, '<em>$1</em>')              
+        .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>')  
+        .replace(/!\[(.*?)\]\((.*?)\)/g, '<img src="$2" alt="$1">'); 
+};
+
+const parseTable = line => {
+    const cells = line.split('|').map(cell => cell.trim()).filter(cell => cell !== '');
+    const tableRow = cells.map(cell => `<td>${parseInlineElements(cell)}</td>`).join('');
+    return `<tr>${tableRow}</tr>\n`;
+};
+
+const parseCodeBlock = (lines, language) => {
+    const codeContent = lines.slice(1, -1).join('\n'); // Exclude the triple backticks
+    const highlightedCode = language ? `<code data-language="${language}">${codeContent}</code>` : `<code>${codeContent}</code>`;
+    return `<pre>${highlightedCode}</pre>\n`;
+};
+
+const parseList = line => {
+    const DIGIT_FOLLOWED_BY_A_DOT_AND_SPACE = /^\d+\.\s/; 
+    const match = line.match(DIGIT_FOLLOWED_BY_A_DOT_AND_SPACE);
+    if (match) {
+        let start=+match[1]
+        return `<ol${start===1?"":` start=${start}`}>\n<li>${parseInlineElements(line.slice(match[0].length))}</li>\n</ol>\n`;
+    }  
+    return `<ul>\n<li>${parseInlineElements(line)}</li>\n</ul>\n`;
+};
+const markdown2html = markdownText => {
+    const lines = markdownText.split('\n');
+    let htmlOutput = '';
+    let inTable = false;
+    let inCodeBlock = false;
+    let codeBlockLines = [];
+    let codeBlockLanguage = '';
+    for (let i = 0; i < lines.length; i++) {
+        let line = lines[i];
+        // Table
+        if (line.startsWith('|')) {
+            if (!inTable) {
+                inTable = true;
+                htmlOutput += '<table>\n';
+            }
+            htmlOutput += parseTable(line);
+            continue;
+        } else if (inTable) {
+            inTable = false;
+            htmlOutput += '</table>\n';
+        }
+        // Code block
+        if (line.startsWith('```')) {
+            if (!inCodeBlock) {
+                inCodeBlock = true;
+                codeBlockLines = [];
+                codeBlockLanguage = line.slice(3).trim();
+            } else {
+                inCodeBlock = false;
+                htmlOutput += parseCodeBlock(codeBlockLines, codeBlockLanguage);
+            }
+            continue;
+        } else if (inCodeBlock) {
+            codeBlockLines.push(line);
+            continue;
+        }
+        // Headings
+        if (line.startsWith('# ')) {
+            const headingLevel = line.indexOf(' ');
+            const headingText = line.slice(headingLevel + 1);
+            htmlOutput += `<h${headingLevel}>${parseInlineElements(headingText)}</h${headingLevel}>\n`;
+            continue;
+        }
+        // Lists
+        if (line.startsWith('- ') || line.startsWith('* ') || line.match(/^\d+\.\s/)) {
+            htmlOutput += parseList(line);
+            continue;
+        }
+        // Other paragraphs
+        htmlOutput += `<p>${parseInlineElements(line)}</p>\n`;
+    }
+    return htmlOutput;
+};
+export{markdown2html}

package/src/Data/Converter/svg.js

@@ -0,0 +1,11 @@
+import { image } from "../../UI/Media"
+const svg2str=svg=>(new XMLSerializer()).serializeToString(svg);
+const svg2ascii=svg=>btoa(svg2str(svg));
+const svg2imgUrl=svg=>'data:image/svg+xml;base64,'+svg2ascii(svg);
+const svg2img=(svg,render=true)=>image(svg2imgUrl(svg)).render(render);
+export{
+    svg2str,
+    svg2ascii,
+    svg2imgUrl,
+    svg2img
+}

package/src/Data/Parser/xml.js

@@ -0,0 +1,47 @@
+function parseXML(xmlString) {
+    const parser = new DOMParser();
+    const xmlDoc = parser.parseFromString(xmlString, 'text/xml');
+    const rootNode = xmlDoc.documentElement;
+    const result = parseNode(rootNode);
+    return result;
+  }
+  
+  function parseNode(node) {
+    const obj = {
+      type: node.nodeName,
+      attributes: {},
+      children: []
+    };
+    for (let i = 0; i < node.attributes.length; i++) {
+      const attr = node.attributes[i];
+      obj.attributes[attr.name] = attr.value;
+    }
+    for (let i = 0; i < node.childNodes.length; i++) {
+      const child = node.childNodes[i];
+      if (child.nodeType === Node.ELEMENT_NODE) {
+        obj.children.push(parseNode(child));
+      } else if (child.nodeType === Node.TEXT_NODE) {
+        obj.text = child.textContent.trim();
+      }
+    }
+    return obj;
+  }
+  export default parseXML;
+
+  // function htmlParser(element) {
+  //   const obj = {
+  //     type: element.tagName,
+  //     attributes: {},
+  //     children: [],
+  //   };
+  //   for (let i = 0; i < element.attributes.length; i++) {
+  //     const attr = element.attributes[i];
+  //     obj.attributes[attr.name] = attr.value;
+  //   }
+  //   for (let i = 0; i < element.children.length; i++) {
+  //     const child = element.children[i];
+  //     obj.children.push(htmlParser(child));
+  //   }
+  //   return obj;
+  // }
+ 

package/src/Data/Strings/index.js

@@ -0,0 +1,26 @@
+const isPalindrome=(str)=>{
+    str=str.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 isAnagrams=(word,words)=>{
+    word=word.split("").sort();
+    words=words.split("").sort();
+    return JSON.stringify(word)===JSON.stringify(words);
+}
+const isIsogram=(str)=>{
+   return [...new Set(str.toLowerCase())].length===str.length;
+}
+const removeExtraSpace=str=>str.replace(/\s+/g,' ');
+const count=(str,value)=>str.split("").filter(x => x==value).length;
+const countWords=(str,value)=>str.split(" ").filter(x => x==value).length;
+
+export{
+    isPalindrome,
+    isAnagrams,
+    isIsogram,
+    removeExtraSpace,
+    count,
+    countWords
+}