@nmmty/lazycanvas 0.6.5 → 1.0.0-dev.3

package/dist/utils/DrawUtils.d.ts

@@ -0,0 +1,9 @@
+import { SKRSContext2D } from "@napi-rs/canvas";
+import { Signal } from "../core/Signal";
+import { StrokeOptions } from "../types";
+export declare class DrawUtils {
+    static drawShadow(ctx: SKRSContext2D, shadow: any): void;
+    static opacity(ctx: SKRSContext2D, opacity?: number | Signal<number>): void;
+    static filters(ctx: SKRSContext2D, filters: string | null | undefined): void;
+    static fillStyle(ctx: SKRSContext2D, color: string | CanvasGradient | CanvasPattern, fillStyle?: StrokeOptions): void;
+}

package/dist/utils/DrawUtils.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawUtils = void 0;
+const Signal_1 = require("../core/Signal");
+class DrawUtils {
+    static drawShadow(ctx, shadow) {
+        if (shadow) {
+            ctx.shadowColor = shadow.color;
+            ctx.shadowBlur = shadow.blur || 0;
+            ctx.shadowOffsetX = shadow.offsetX || 0;
+            ctx.shadowOffsetY = shadow.offsetY || 0;
+        }
+    }
+    static opacity(ctx, opacity = 1) {
+        const opacityValue = (0, Signal_1.unwrap)(opacity);
+        if (opacityValue < 1) {
+            ctx.globalAlpha = opacityValue;
+        }
+    }
+    static filters(ctx, filters) {
+        if (filters) {
+            ctx.filter = filters;
+        }
+    }
+    static fillStyle(ctx, color, fillStyle) {
+        if (fillStyle) {
+            ctx.lineWidth = fillStyle.width;
+            ctx.lineCap = fillStyle.cap || "butt";
+            ctx.lineJoin = fillStyle.join || "miter";
+            ctx.miterLimit = fillStyle.miterLimit || 10;
+            if (fillStyle.dash) {
+                ctx.setLineDash(fillStyle.dash);
+                ctx.lineDashOffset = fillStyle.dashOffset || 0;
+            }
+            ctx.strokeStyle = color;
+        }
+        else {
+            ctx.fillStyle = color;
+        }
+    }
+}
+exports.DrawUtils = DrawUtils;

package/dist/utils/LazyUtil.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultArg = exports.LazyLog = exports.LazyError = void 0;
 class LazyError extends Error {
-    message;
     constructor(message) {
         super(message);
         this.message = "[LazyCanvas] [ERROR] " + message;
@@ -31,5 +30,5 @@ exports.defaultArg = {
     },
     vl(vertical, layer) {
         return { vertical: vertical || false, layer: layer || false };
-    }
+    },
 };

package/dist/utils/utils.d.ts

@@ -1,9 +1,9 @@
 import { AnyCentring, AnyLayer, AnyTextAlign, ColorType, LayerType, PointNumber, ScaleType, SubStringColor, Transform } from "../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../structures/managers";
-import { Group } from "../structures/components";
+import { Div } from "../structures/components";
 export declare function generateID(type: string): string;
-export declare function isColor(v: ColorType | SubStringColor): "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
+export declare function isColor(v: ColorType | SubStringColor): boolean;
 export declare function parseToNormal(v: ScaleType, ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, layer?: {
     width: number;
     height: number;
@@ -31,9 +31,6 @@ export declare function parser(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, m
         };
     }>): Record<string, number>;
 };
-export declare function drawShadow(ctx: SKRSContext2D, shadow: any): void;
-export declare function opacity(ctx: SKRSContext2D, opacity?: number): void;
-export declare function filters(ctx: SKRSContext2D, filters: string | null | undefined): void;
 export declare function parseFillStyle(ctx: SKRSContext2D, color: ColorType | SubStringColor, opts: {
     debug?: boolean;
     layer?: {
@@ -44,7 +41,7 @@ export declare function parseFillStyle(ctx: SKRSContext2D, color: ColorType | Su
         align: AnyCentring;
     };
     manager?: LayersManager;
-}): string | CanvasGradient | Promise<CanvasPattern>;
+}): string | Promise<CanvasPattern> | CanvasGradient;
 export declare function transform(ctx: SKRSContext2D, transform: Transform, layer?: {
     width: number;
     height: number;
@@ -80,4 +77,4 @@ export declare function getBoundingBoxBezier(points: PointNumber[], steps?: numb
     height: number;
 };
 export declare function resize(value: ScaleType, ratio: number): number | string;
-export declare function resizeLayers(layers: Array<AnyLayer | Group>, ratio: number): (AnyLayer | Group)[];
+export declare function resizeLayers(layers: Array<AnyLayer | Div>, ratio: number): (AnyLayer | Div)[];

package/dist/utils/utils.js

@@ -4,9 +4,6 @@ exports.generateID = generateID;
 exports.isColor = isColor;
 exports.parseToNormal = parseToNormal;
 exports.parser = parser;
-exports.drawShadow = drawShadow;
-exports.opacity = opacity;
-exports.filters = filters;
 exports.parseFillStyle = parseFillStyle;
 exports.transform = transform;
 exports.generateRandomName = generateRandomName;
@@ -20,6 +17,7 @@ const helpers_1 = require("../structures/helpers");
 const canvas_1 = require("@napi-rs/canvas");
 const LazyUtil_1 = require("./LazyUtil");
 const components_1 = require("../structures/components");
+const Signal_1 = require("../core/Signal");
 function generateID(type) {
     return `${type}-${Math.random().toString(36).substr(2, 9)}`;
 }
@@ -33,16 +31,41 @@ let rgbaReg = /^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(0|0?\.\d+|1(\.0)?)\)$/;
 let hslReg = /^hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)$/;
 let hslaReg = /^hsla\((\d+),\s*(\d+)%,\s*(\d+)%,\s*(0|0?\.\d+|1(\.0)?)\)$/;
 function isColor(v) {
-    return typeof (v === 'string' && (hexReg.test(v) || rgbReg.test(v) || rgbaReg.test(v) || hslReg.test(v) || hslaReg.test(v))) || v instanceof helpers_1.Gradient || v instanceof helpers_1.Pattern || (typeof v === 'object' && (v.start && v.end && v.color));
+    if ((0, Signal_1.isSignal)(v)) {
+        return true;
+    }
+    if (typeof v === "object" &&
+        v !== null &&
+        !(0, Signal_1.isSignal)(v) &&
+        "start" in v &&
+        "end" in v &&
+        "color" in v) {
+        return true;
+    }
+    if (v instanceof helpers_1.Gradient || v instanceof helpers_1.Pattern) {
+        return true;
+    }
+    if (typeof v === "string") {
+        return hexReg.test(v) || rgbReg.test(v) || rgbaReg.test(v) || hslReg.test(v) || hslaReg.test(v);
+    }
+    return false;
 }
 function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options = { vertical: false, layer: false }, manager) {
-    if (typeof v === 'number')
+    // Unwrap signal if present
+    if ((0, Signal_1.isSignal)(v)) {
+        v = (0, Signal_1.unwrap)(v);
+    }
+    if (typeof v === "number")
         return v;
-    if (typeof v === 'string') {
+    if (typeof v === "string") {
         if (percentReg.test(v)) {
             const base = options.layer
-                ? options.vertical ? layer.height : layer.width
-                : options.vertical ? canvas.height : canvas.width;
+                ? options.vertical
+                    ? layer.height
+                    : layer.width
+                : options.vertical
+                    ? canvas.height
+                    : canvas.width;
             return (parseFloat(v) / 100) * base;
         }
         if (pxReg.test(v))
@@ -50,10 +73,14 @@ function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options
         if (canvasReg.test(v)) {
             const base = options.layer ? layer : canvas;
             switch (v) {
-                case 'vw': return base.width;
-                case 'vh': return base.height;
-                case 'vmin': return Math.min(base.width, base.height);
-                case 'vmax': return Math.max(base.width, base.height);
+                case "vw":
+                    return base.width;
+                case "vh":
+                    return base.height;
+                case "vmin":
+                    return Math.min(base.width, base.height);
+                case "vmax":
+                    return Math.max(base.width, base.height);
             }
         }
         if (linkReg.test(v)) {
@@ -61,15 +88,19 @@ function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options
             if (!manager)
                 return 0;
             const anyLayer = manager.get(match[2], true);
-            if (!anyLayer || anyLayer instanceof components_1.Group || anyLayer instanceof components_1.Path2DLayer)
+            if (!anyLayer || anyLayer instanceof components_1.Div || anyLayer instanceof components_1.Path2DLayer)
                 return 0;
             const parserInstance = parser(ctx, canvas, manager);
             const additionalSpacing = parseInt(match[3]) || 0;
             switch (match[1]) {
-                case 'link-w': return getLayerWidth(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
-                case 'link-h': return getLayerHeight(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
-                case 'link-x': return parserInstance.parse(anyLayer.props.x) + additionalSpacing;
-                case 'link-y': return parserInstance.parse(anyLayer.props.y) + additionalSpacing;
+                case "link-w":
+                    return getLayerWidth(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
+                case "link-h":
+                    return getLayerHeight(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
+                case "link-x":
+                    return parserInstance.parse(anyLayer.props.position.x) + additionalSpacing;
+                case "link-y":
+                    return parserInstance.parse(anyLayer.props.position.y) + additionalSpacing;
             }
         }
     }
@@ -77,21 +108,27 @@ function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options
         if (!manager)
             return 0;
         const anyLayer = manager.get(v.source, true);
-        if (!anyLayer || anyLayer instanceof components_1.Group || anyLayer instanceof components_1.Path2DLayer)
+        if (!anyLayer || anyLayer instanceof components_1.Div || anyLayer instanceof components_1.Path2DLayer)
             return 0;
         const parserInstance = parser(ctx, canvas, manager);
         const additionalSpacing = parserInstance.parse(v.additionalSpacing, LazyUtil_1.defaultArg.wh(layer.width, layer.height), LazyUtil_1.defaultArg.vl(options.vertical, options.layer)) || 0;
         switch (v.type) {
-            case types_1.LinkType.Width: return getLayerWidth(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
-            case types_1.LinkType.Height: return getLayerHeight(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
-            case types_1.LinkType.X: return parserInstance.parse(anyLayer.props.x) + additionalSpacing;
-            case types_1.LinkType.Y: return parserInstance.parse(anyLayer.props.y) + additionalSpacing;
+            case types_1.LinkType.Width:
+                return getLayerWidth(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
+            case types_1.LinkType.Height:
+                return getLayerHeight(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
+            case types_1.LinkType.X:
+                return parserInstance.parse(anyLayer.props.position.x) + additionalSpacing;
+            case types_1.LinkType.Y:
+                return parserInstance.parse(anyLayer.props.position.y) + additionalSpacing;
         }
     }
     return 0;
 }
 function getLayerWidth(anyLayer, ctx, canvas, manager, parserInstance) {
-    if (anyLayer instanceof components_1.LineLayer || anyLayer instanceof components_1.BezierLayer || anyLayer instanceof components_1.QuadraticLayer) {
+    if (anyLayer instanceof components_1.LineLayer ||
+        anyLayer instanceof components_1.BezierLayer ||
+        anyLayer instanceof components_1.QuadraticLayer) {
         return anyLayer.getBoundingBox(ctx, canvas, manager).width;
     }
     if (anyLayer instanceof components_1.TextLayer) {
@@ -100,13 +137,17 @@ function getLayerWidth(anyLayer, ctx, canvas, manager, parserInstance) {
     return anyLayer instanceof components_1.Path2DLayer ? 0 : parserInstance.parse(anyLayer.props.size.width) || 0;
 }
 function getLayerHeight(anyLayer, ctx, canvas, manager, parserInstance) {
-    if (anyLayer instanceof components_1.LineLayer || anyLayer instanceof components_1.BezierLayer || anyLayer instanceof components_1.QuadraticLayer) {
+    if (anyLayer instanceof components_1.LineLayer ||
+        anyLayer instanceof components_1.BezierLayer ||
+        anyLayer instanceof components_1.QuadraticLayer) {
         return anyLayer.getBoundingBox(ctx, canvas, manager).height;
     }
     if (anyLayer instanceof components_1.TextLayer) {
         return anyLayer.measureText(ctx, canvas).height;
     }
-    return anyLayer instanceof components_1.Path2DLayer ? 0 : parserInstance.parse(anyLayer.props.size.height) || 0;
+    return anyLayer instanceof components_1.Path2DLayer
+        ? 0
+        : parserInstance.parse(anyLayer.props.size.height) || 0;
 }
 function parser(ctx, canvas, manager) {
     return {
@@ -120,44 +161,44 @@ function parser(ctx, canvas, manager) {
                 result[key] = parseToNormal(v, ctx, canvas, layer ?? LazyUtil_1.defaultArg.wh(), options ?? LazyUtil_1.defaultArg.vl(), manager);
             }
             return result;
-        }
+        },
     };
 }
-function drawShadow(ctx, shadow) {
-    if (shadow) {
-        ctx.shadowColor = shadow.color;
-        ctx.shadowBlur = shadow.blur || 0;
-        ctx.shadowOffsetX = shadow.offsetX || 0;
-        ctx.shadowOffsetY = shadow.offsetY || 0;
-    }
-}
-function opacity(ctx, opacity = 1) {
-    if (opacity < 1) {
-        ctx.globalAlpha = opacity;
-    }
-}
-function filters(ctx, filters) {
-    if (filters) {
-        ctx.filter = filters;
-    }
-}
 function parseFillStyle(ctx, color, opts) {
     if (!ctx)
-        throw new LazyUtil_1.LazyError('The context is not defined');
+        throw new LazyUtil_1.LazyError("The context is not defined");
     if (!color)
-        throw new LazyUtil_1.LazyError('The color is not defined');
+        throw new LazyUtil_1.LazyError("The color is not defined");
     if (color instanceof helpers_1.Gradient || color instanceof helpers_1.Pattern) {
         return color.draw(ctx, opts);
     }
-    if (typeof color === 'object' && color.start && color.end && color.color) {
-        return color.color;
+    if ((0, Signal_1.isSignal)(color)) {
+        return parseFillStyle(ctx, (0, Signal_1.unwrap)(color), opts);
     }
-    else if (typeof color === 'string') {
+    if (typeof color === "object" &&
+        color !== null &&
+        "start" in color &&
+        "end" in color &&
+        "color" in color) {
+        return (0, Signal_1.unwrap)(color.color);
+    }
+    if (typeof color === "string") {
         return color;
     }
-    return '#000000';
+    return "#000000";
 }
-function transform(ctx, transform, layer = { width: 0, height: 0, x: 0, y: 0, type: types_1.LayerType.Morph }, extra = { text: '', textAlign: types_1.TextAlign.Left, fontSize: 0, multiline: false }) {
+function transform(ctx, transform, layer = {
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0,
+    type: types_1.LayerType.Morph,
+}, extra = {
+    text: "",
+    textAlign: types_1.TextAlign.Left,
+    fontSize: 0,
+    multiline: false,
+}) {
     if (transform) {
         if (transform.translate) {
             ctx.translate(transform.translate.x, transform.translate.y);
@@ -170,15 +211,15 @@ function transform(ctx, transform, layer = { width: 0, height: 0, x: 0, y: 0, ty
                 case types_1.LayerType.QuadraticCurve:
                 case types_1.LayerType.Line:
                 case types_1.LayerType.Polygon:
-                    ctx.translate(layer.x + (layer.width / 2), layer.y + (layer.height / 2));
+                    ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
                     ctx.rotate((Math.PI / 180) * transform.rotate);
-                    ctx.translate(-(layer.x + (layer.width / 2)), -(layer.y + (layer.height / 2)));
+                    ctx.translate(-(layer.x + layer.width / 2), -(layer.y + layer.height / 2));
                     break;
                 case types_1.LayerType.Text:
                     if (extra.multiline) {
-                        ctx.translate(layer.x + (layer.width / 2), layer.y + (layer.height / 2));
+                        ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
                         ctx.rotate((Math.PI / 180) * transform.rotate);
-                        ctx.translate(-(layer.x + (layer.width / 2)), -(layer.y + (layer.height / 2)));
+                        ctx.translate(-(layer.x + layer.width / 2), -(layer.y + layer.height / 2));
                     }
                     else {
                         if (extra.textAlign === types_1.TextAlign.Center) {
@@ -204,8 +245,13 @@ function transform(ctx, transform, layer = { width: 0, height: 0, x: 0, y: 0, ty
             ctx.scale(transform.scale.x, transform.scale.y);
         }
         if (transform.matrix) {
-            if (!transform.matrix.a || !transform.matrix.b || !transform.matrix.c || !transform.matrix.d || !transform.matrix.e || !transform.matrix.f)
-                throw new LazyUtil_1.LazyError('The matrix transformation must be a valid matrix');
+            if (!transform.matrix.a ||
+                !transform.matrix.b ||
+                !transform.matrix.c ||
+                !transform.matrix.d ||
+                !transform.matrix.e ||
+                !transform.matrix.f)
+                throw new LazyUtil_1.LazyError("The matrix transformation must be a valid matrix");
             ctx.transform(transform.matrix.a, transform.matrix.b, transform.matrix.c, transform.matrix.d, transform.matrix.e, transform.matrix.f);
         }
     }
@@ -354,13 +400,23 @@ function getBoundingBoxBezier(points, steps = 100) {
         maxX = Math.max(maxX, p.x);
         maxY = Math.max(maxY, p.y);
     }
-    return { min: { x: minX, y: minY }, max: { x: maxX, y: maxY }, center: { x: (minX + maxX) / 2, y: (minY + maxY) / 2 }, width: maxX - minX, height: maxY - minY };
+    return {
+        min: { x: minX, y: minY },
+        max: { x: maxX, y: maxY },
+        center: { x: (minX + maxX) / 2, y: (minY + maxY) / 2 },
+        width: maxX - minX,
+        height: maxY - minY,
+    };
 }
 function resize(value, ratio) {
-    if (typeof value === 'number') {
+    // Handle Signal - return as is (signals are not resized)
+    if ((0, Signal_1.isSignal)(value)) {
+        return resize((0, Signal_1.unwrap)(value), ratio);
+    }
+    if (typeof value === "number") {
         return value * ratio;
     }
-    else if (typeof value === 'string') {
+    else if (typeof value === "string") {
         if (pxReg.test(value)) {
             return parseFloat(value) * ratio;
         }
@@ -368,27 +424,28 @@ function resize(value, ratio) {
             let match = value.match(linkReg);
             return `${match[1]}-${match[2]}-${parseFloat(match[3]) * ratio}`;
         }
+        return value;
     }
     else if (value instanceof helpers_1.Link) {
         return `${value.type}-${value.source}-${resize(value.additionalSpacing, ratio)}`;
     }
-    return value;
+    return 0;
 }
 function resizeLayers(layers, ratio) {
     let newLayers = [];
     if (layers.length > 0) {
         for (const layer of layers) {
-            if (!(layer instanceof components_1.Group || layer instanceof components_1.Path2DLayer)) {
-                layer.props.x = resize(layer.props.x, ratio);
-                layer.props.y = resize(layer.props.y, ratio);
-                if ('size' in layer.props) {
+            if (!(layer instanceof components_1.Div || layer instanceof components_1.Path2DLayer)) {
+                layer.props.position.x = resize(layer.props.position.x, ratio);
+                layer.props.position.y = resize(layer.props.position.y, ratio);
+                if ("size" in layer.props && layer.props.size) {
                     layer.props.size.width = resize(layer.props.size.width, ratio);
                     layer.props.size.height = resize(layer.props.size.height, ratio);
-                    if ('radius' in layer.props.size) {
-                        if (typeof layer.props.size.radius === 'number') {
+                    if ("radius" in layer.props.size) {
+                        if (typeof layer.props.size.radius === "number") {
                             layer.props.size.radius = resize(layer.props.size.radius, ratio);
                         }
-                        else if (typeof layer.props.size.radius === 'object') {
+                        else if (typeof layer.props.size.radius === "object") {
                             for (const corner in layer.props.size.radius) {
                                 // @ts-ignore
                                 layer.props.size.radius[corner] = resize(layer.props.size.radius[corner], ratio);
@@ -396,23 +453,23 @@ function resizeLayers(layers, ratio) {
                         }
                     }
                 }
-                if ('stroke' in layer.props && layer.props.stroke) {
+                if ("stroke" in layer.props && layer.props.stroke) {
                     layer.props.stroke.width = resize(layer.props.stroke.width, ratio);
                 }
-                if ('endPoint' in layer.props) {
-                    layer.props.endPoint.x = resize(layer.props.endPoint.x, ratio);
-                    layer.props.endPoint.y = resize(layer.props.endPoint.y, ratio);
+                if ("endX" in layer.props.position && "endY" in layer.props.position) {
+                    layer.props.position.endX = resize(layer.props.position.endX, ratio);
+                    layer.props.position.endY = resize(layer.props.position.endY, ratio);
                 }
-                if ('controlPoints' in layer.props) {
+                if ("controlPoints" in layer.props) {
                     for (const point of layer.props.controlPoints) {
                         point.x = resize(point.x, ratio);
                         point.y = resize(point.y, ratio);
                     }
                 }
-                if ('font' in layer.props) {
+                if ("font" in layer.props) {
                     layer.props.font.size = resize(layer.props.font.size, ratio);
                 }
-                if ('transform' in layer.props) {
+                if ("transform" in layer.props && layer.props.transform) {
                     if (layer.props.transform.translate) {
                         layer.props.transform.translate.x = resize(layer.props.transform.translate.x, ratio);
                         layer.props.transform.translate.y = resize(layer.props.transform.translate.y, ratio);
@@ -423,7 +480,7 @@ function resizeLayers(layers, ratio) {
                     }
                 }
             }
-            else if (layer instanceof components_1.Group) {
+            else if (layer instanceof components_1.Div) {
                 layer.layers = resizeLayers(layer.layers, ratio);
             }
             newLayers.push(layer);

package/package.json

@@ -1,59 +1,62 @@
-{
-  "name": "@nmmty/lazycanvas",
-  "version": "0.6.5",
-  "description": "A simple way to interact with @napi-rs/canvas in an advanced way!",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "scripts": {
-    "test": "tsc ./test/test.ts && node ./test/test.js",
-    "centring": "tsc ./test/centring.ts && node ./test/centring.js",
-    "logo": "tsc ./test/logo.ts && node ./test/logo.js",
-    "text": "tsc ./test/text.ts && node ./test/text.js",
-    "animation": "tsc ./test/animation.ts && node ./test/animation.js",
-    "iotest": "tsc ./test/iotest.ts && node ./test/iotest.js",
-    "gradient": "tsc ./test/gradient.ts && node ./test/gradient.js",
-    "docgen": "tsx docgen.ts && tsx ./scripts/post-docgen.ts",
-    "lint": "eslint ./src --ext .ts",
-    "lint:fix": "eslint ./src --ext .ts --fix",
-    "font": "tsx ./scripts/font-gen.ts",
-    "build": "tsc && tsx ./scripts/post-build.ts"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/NMMTY/LazyCanvas.git"
-  },
-  "keywords": [
-    "canvas",
-    "@napi-rs/canvas",
-    "node-canvas",
-    "easy",
-    "simple"
-  ],
-  "author": "NMMTY",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/NMMTY/LazyCanvas/issues"
-  },
-  "homepage": "https://github.com/NMMTY/LazyCanvas#readme",
-  "dependencies": {
-    "@napi-rs/canvas": "^0.1.72",
-    "gifenc": "^1.0.3",
-    "js-yaml": "^4.1.0",
-    "path": "^0.12.7",
-    "svgson": "^5.3.1"
-  },
-  "devDependencies": {
-    "@hitomihiumi/colors.ts": "^1.0.3",
-    "@hitomihiumi/micro-docgen": "workspace:*",
-    "@types/js-yaml": "^4.0.9",
-    "@types/node": "^22.10.2",
-    "@typescript-eslint/utils": "^8.39.1",
-    "ava": "^6.2.0",
-    "eslint": "^9.23.0",
-    "eslint-config-neon": "^0.2.7",
-    "lodash.merge": "^4.6.2",
-    "tslib": "^2.8.1",
-    "tsx": "^4.19.2",
-    "typescript": "^5.4.5"
-  }
-}
+{
+  "name": "@nmmty/lazycanvas",
+  "version": "1.0.0-dev.3",
+  "description": "A simple way to interact with @napi-rs/canvas in an advanced way!",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NMMTY/LazyCanvas.git"
+  },
+  "keywords": [
+    "canvas",
+    "@napi-rs/canvas",
+    "node-canvas",
+    "easy",
+    "simple"
+  ],
+  "author": "NMMTY",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/NMMTY/LazyCanvas/issues"
+  },
+  "homepage": "https://github.com/NMMTY/LazyCanvas#readme",
+  "dependencies": {
+    "@napi-rs/canvas": "^0.1.88",
+    "gifenc": "^1.0.3",
+    "js-yaml": "^4.1.0",
+    "path": "^0.12.7",
+    "svgson": "^5.3.1",
+    "zlib": "^1.0.5"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.4",
+    "@hitomihiumi/colors.ts": "^1.0.3",
+    "@types/js-yaml": "^4.0.9",
+    "@types/node": "^22.10.2",
+    "@typescript-eslint/utils": "^8.39.1",
+    "ava": "^6.2.0",
+    "eslint": "^9.23.0",
+    "eslint-config-neon": "^0.2.7",
+    "lodash.merge": "^4.6.2",
+    "tslib": "^2.8.1",
+    "tsx": "^4.19.2",
+    "typescript": "^5.4.5",
+    "@hitomihiumi/micro-docgen": "0.4.2"
+  },
+  "scripts": {
+    "test": "tsc ./test/test.ts && node ./test/test.js",
+    "centring": "tsc ./test/centring.ts && node ./test/centring.js",
+    "logo": "tsc ./test/logo.ts && node ./test/logo.js",
+    "text": "tsc ./test/text.ts && node ./test/text.js",
+    "animation": "tsc ./test/animation.ts && node ./test/animation.js",
+    "iotest": "tsc ./test/iotest.ts && node ./test/iotest.js",
+    "gradient": "tsc ./test/gradient.ts && node ./test/gradient.js",
+    "docgen": "tsx docgen.ts && tsx ./scripts/post-docgen.ts",
+    "lint": "eslint ./src --ext .ts",
+    "lint:fix": "eslint ./src --ext .ts --fix",
+    "font": "tsx ./scripts/font-gen.ts",
+    "build": "tsc && tsx ./scripts/post-build.ts",
+    "biome-write": "npx @biomejs/biome format --write ."
+  }
+}