feat!: merge canvacord next into main

feat!: merge canvacord next into main

.gitignore

@@ -1,8 +1,7 @@
 node_modules/
-assets/
+legacy/
 !scripts/assets
-package-lock.json
 docs/
-
+dist/
 .yarn/cache
 .yarn/*.gz

.prettierrc

@@ -0,0 +1,10 @@
+{
+    "arrowParens": "always",
+    "semi": true,
+    "singleQuote": true,
+    "jsxSingleQuote": false,
+    "printWidth": 120,
+    "tabWidth": 2,
+    "endOfLine": "lf",
+    "trailingComma": "none"
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "tailwindCSS.classAttributes": ["class", "className", "ngClass", "tw"]
+}

README.md

@@ -1,89 +1,57 @@
 [![SWUbanner](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner2-direct.svg)](https://vshymanskyy.github.io/StandWithUkraine)
 
 # Canvacord
-Powerful image manipulation tool to manipulate images easily.
 
-# Installation
-
-```sh
-$ npm i canvacord
-```
-
-[![NPM](https://nodei.co/npm/canvacord.png)](https://nodei.co/npm/canvacord/)
-
-# Features
-- Super simple and easy to use 😎
-- Faster than canvacord v4 🚀
-- More than **50 methods**...? Yay! 🎉
-- Built on top of **[@napi-rs/canvas](https://npm.im/@napi-rs/canvas)** 🔥
-- Object oriented 💻
-- Beginner friendly 🤓
-- Supports emojis 😀
-
-# Documentation
-**[https://canvacord.js.org](https://canvacord.js.org)**
-
-**[Join our Discord server](https://neplextech.com/discord)**
-
-# Examples
-## Rank Card
-
-```js
-const canvacord = require("canvacord");
-const img = "https://cdn.discordapp.com/embed/avatars/0.png";
-
-const userData = getDataSomehow();
-
-const rank = new canvacord.Rank()
-    .setAvatar(img)
-    .setCurrentXP(userData.xp)
-    .setRequiredXP(userData.requiredXP)
-    .setStatus("dnd")
-    .setProgressBar("#FFFFFF", "COLOR")
-    .setUsername("Snowflake")
-    .setDiscriminator("0007");
-
-rank.build()
-    .then(data => {
-        const attachment = new Discord.MessageAttachment(data, "RankCard.png");
-        message.channel.send(attachment);
-    });
+Easily generate images on-the-fly with node.js using wide range of templates.
+
+> **Warning**
+>
+> You are looking at the next version of canvacord, which is under development. Go to the [legacy branch](https://github.com/neplextech/canvacord/tree/legacy) to view legacy codebase.
+
+## Features
+
+- image generation _(wip)_
+- image manipulation _(wip)_
+- image templates _(wip)_
+- image filters _(wip)_
+- complex layouts _(wip)_
+
+## Example
+
+### Image Generation
+
+<!-- prettier-ignore -->
+```ts
+import { canvacord } from 'canvacord';
+import fs from 'node:fs';
+
+// triggered gif
+const triggered = await canvacord.triggered(image);
+triggered.pipe(fs.createWriteStream('triggered.gif'));
+
+// filters
+const filtered = await canvacord
+    .filters(512, 512)
+    .drawImage(image)
+    .hueRotate(90)
+    .invert(2)
+    .sepia(1)
+    .opacity(0.5)
+    .saturate(2)
+    .encode();
+
+// alternative syntax
+const filtered = await canvacord(image, 512, 512)
+    .hueRotate(90)
+    .invert(2)
+    .sepia(1)
+    .opacity(0.5)
+    .saturate(2)
+    .encode();
+
+fs.writeFileSync('filtered.png', filtered);
 ```
 
-### Preview
-![RankCard](https://raw.githubusercontent.com/neplextech/canvacord/main/test/images/RankCard.png)
-
-## Rank Card Variants
-
-![RankCard](https://raw.githubusercontent.com/neplextech/canvacord/main/test/Gamer.png)
-
-![RankCard](https://raw.githubusercontent.com/neplextech/canvacord/main/test/Nerd.png)
-
-![RankCard](https://raw.githubusercontent.com/neplextech/canvacord/main/test/Player.png)
-
-## Other Examples
-
-```js
-const Discord = require("discord.js");
-const client = new Discord.Client();
-const canvacord = require("canvacord");
-
-client.on("ready", () => {
-    console.log("I'm online!");
-});
-
-client.on("message", async (message) => {
-    if (message.author.bot) return;
-    if (message.content === "!triggered") {
-        let avatar = message.author.displayAvatarURL({ dynamic: false, format: 'png' });
-        let image = await canvacord.Canvas.trigger(avatar);
-        let attachment = new Discord.MessageAttachment(image, "triggered.gif");
-        return message.channel.send(attachment);
-    }
-});
-
-client.login("Your_Bot_Token_here");
-```
+## XP Card Preview
 
-# Note
-> ⚠ | In order to use `Canvacord#Welcomer`/`Canvacord#Leaver`/`Canvacord#CaptchaGen`, you may need to install packages like **[discord-canvas](https://npmjs.com/package/discord-canvas)** & **[captcha-canvas](https://npmjs.com/package/captcha-canvas)**.
+![xp-card](https://raw.githubusercontent.com/neplextech/canvacord/next/test/jsx/test2.svg)

benchmark/jsx-renderer.mjs

@@ -0,0 +1,67 @@
+import b from 'benny';
+import { Builder, JSX, Font } from '../dist/index.mjs';
+
+const roboto = await Font.fromFile('./Roboto-Regular.ttf', 'Roboto');
+
+const builder = new Builder(800, 185);
+builder.style = {
+    display: 'flex',
+    fontFamily: roboto.name
+};
+
+builder.addComponent(
+    JSX.createElement("div", {
+        tw: "flex flex-col w-full h-full items-center justify-center bg-white",
+        children: JSX.createElement("div", {
+            tw: "bg-gray-100 flex w-full",
+            children: JSX.createElement("div", {
+                tw: "flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8",
+                children: [
+                    JSX.createElement("h2", {
+                        tw: "flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left",
+                        children: [
+                            JSX.createElement("span", {
+                                children: "Ready to dive in?"
+                            }),
+                            JSX.createElement("span", {
+                                tw: "text-teal-600",
+                                children: "Start your free trial today."
+                            })
+                        ]
+                    }),
+                    JSX.createElement("div", {
+                        tw: "mt-8 flex md:mt-0",
+                        children: [
+                            JSX.createElement("div", {
+                                tw: "flex rounded-md shadow",
+                                children: JSX.createElement("a", {
+                                    tw: "flex items-center justify-center rounded-md border border-transparent bg-teal-600 px-5 py-3 text-base font-medium text-white",
+                                    children: "Get started"
+                                })
+                            }),
+                            JSX.createElement("div", {
+                                tw: "ml-3 flex rounded-md shadow",
+                                children: JSX.createElement("a", {
+                                    tw: "flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-teal-600",
+                                    children: "Learn more"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    })
+)
+
+
+await b.suite(
+    'JSX Renderer',
+    b.add('Render SVG', async () => {
+        await builder.build({
+            format: 'svg'
+        });
+    }),
+    b.cycle(),
+    b.complete(),
+)