@nmmty/lazycanvas 1.0.0-dev.4 → 1.0.0-dev.7

package/dist/structures/managers/LayoutManager.js

@@ -0,0 +1,409 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutManager = void 0;
+const components_1 = require("../components");
+const types_1 = require("../../types");
+const LazyUtil_1 = require("../../utils/LazyUtil");
+const fs_1 = require("fs");
+class LayoutManager {
+    constructor(opts) {
+        this.yoga = null;
+        this.debug = opts?.debug || false;
+        this.ready = this.init();
+    }
+    async init() {
+        try {
+            // Initialize Yoga
+            // Use dynamic import to avoid issues with CJS/ESM interop and TLA
+            const yogaPkg = await import("yoga-layout");
+            const loadYoga = yogaPkg.default || yogaPkg;
+            if (typeof loadYoga === "function") {
+                this.yoga = await loadYoga((0, fs_1.readFileSync)(require.resolve("yoga-layout/dist/yoga.wasm")));
+            }
+            else {
+                this.yoga = loadYoga;
+            }
+        }
+        catch (e) {
+            // Fallback
+            try {
+                const yoga = require("yoga-layout");
+                this.yoga = yoga;
+            }
+            catch (e2) {
+                console.error("Failed to initialize Yoga Layout", e, e2);
+            }
+        }
+    }
+    calculateLayout(root, width, height, ctx, canvas) {
+        if (!this.yoga) {
+            if (this.debug)
+                LazyUtil_1.LazyLog.log("warn", "LayoutManager: Yoga not initialized yet");
+            return;
+        }
+        const rootNode = this.createNode(root, ctx, canvas);
+        if (!rootNode)
+            return;
+        rootNode.setWidth(width);
+        rootNode.setHeight(height);
+        rootNode.calculateLayout(width, height, this.yoga.DIRECTION_LTR);
+        this.applyLayout(rootNode, root);
+        // Clean up
+        this.freeNode(rootNode);
+    }
+    createNode(layer, ctx, canvas) {
+        if (!this.yoga)
+            return null;
+        const node = this.yoga.Node.create();
+        const layout = layer.props?.layout || {};
+        const size = layer.props?.size || {};
+        // Apply explicit layout properties first
+        if (layout.width !== undefined) {
+            this.setDimension(node, "width", layout.width);
+        }
+        else if (size.width !== undefined && layer.type !== types_1.LayerType.Text) {
+            // For TextLayer, skip size.width to allow measureFunc to work
+            this.setDimension(node, "width", size.width);
+        }
+        else if ((layer instanceof components_1.Div || layer.type === "group") && !layout.flexDirection) {
+            // For Div without explicit width and not a flex container, stretch to parent
+            // Flex containers should shrink-wrap their content by default
+            node.setWidthPercent(100);
+        }
+        if (layout.height !== undefined) {
+            this.setDimension(node, "height", layout.height);
+        }
+        else if (size.height !== undefined && layer.type !== types_1.LayerType.Text) {
+            // For TextLayer, skip size.height to allow measureFunc to work
+            this.setDimension(node, "height", size.height);
+        }
+        else if ((layer instanceof components_1.Div || layer.type === "group") && !layout.flexDirection) {
+            // For Div without explicit height and not a flex container, stretch to parent
+            // Flex containers should shrink-wrap their content by default
+            node.setHeightPercent(100);
+        }
+        if (layout.flexDirection)
+            node.setFlexDirection(this.getFlexDirection(layout.flexDirection));
+        if (layout.justifyContent)
+            node.setJustifyContent(this.getJustifyContent(layout.justifyContent));
+        if (layout.alignItems)
+            node.setAlignItems(this.getAlignItems(layout.alignItems));
+        if (layout.flexGrow !== undefined)
+            node.setFlexGrow(layout.flexGrow);
+        if (layout.flexShrink !== undefined)
+            node.setFlexShrink(layout.flexShrink);
+        if (layout.flexBasis !== undefined)
+            node.setFlexBasis(layout.flexBasis);
+        if (layout.padding)
+            this.setPadding(node, layout.padding);
+        if (layout.margin)
+            this.setMargin(node, layout.margin);
+        if (layout.gap !== undefined)
+            node.setGap(this.yoga.GUTTER_ALL, layout.gap);
+        // Position type (relative/absolute)
+        const isAbsolute = layout.position === "absolute";
+        if (isAbsolute) {
+            node.setPositionType(this.yoga.POSITION_TYPE_ABSOLUTE);
+            // Position values (top, left, right, bottom) - only for absolute positioning
+            if (layout.top !== undefined)
+                node.setPosition(this.yoga.EDGE_TOP, layout.top);
+            if (layout.left !== undefined)
+                node.setPosition(this.yoga.EDGE_LEFT, layout.left);
+            if (layout.right !== undefined)
+                node.setPosition(this.yoga.EDGE_RIGHT, layout.right);
+            if (layout.bottom !== undefined)
+                node.setPosition(this.yoga.EDGE_BOTTOM, layout.bottom);
+        }
+        // If not absolute, ignore top/left/right/bottom as they break flexbox layout
+        // Handle TextLayer measurement
+        if (layer.type === types_1.LayerType.Text && ctx && canvas) {
+            node.setMeasureFunc((width, widthMode, height, heightMode) => {
+                const textLayer = layer;
+                // Save original align/baseline for accurate measurement
+                const originalAlign = textLayer.props.align;
+                const originalBaseline = textLayer.props.baseline;
+                // Set to top-left for measurement (Yoga expects top-left coordinates)
+                textLayer.props.align = "left";
+                textLayer.props.baseline = "top";
+                // Temporarily disable multiline and width to measure natural size
+                const originalSize = textLayer.props.size ? { ...textLayer.props.size } : undefined;
+                const originalMultiline = textLayer.props.multiline
+                    ? { ...textLayer.props.multiline }
+                    : undefined;
+                // Disable multiline for measurement
+                if (textLayer.props.multiline) {
+                    textLayer.props.multiline.enabled = false;
+                }
+                // Don't set width constraint for natural measurement
+                if (textLayer.props.size) {
+                    textLayer.props.size.width = undefined;
+                }
+                const size = textLayer.measureText(ctx, canvas);
+                // Restore original props
+                if (originalSize)
+                    textLayer.props.size = originalSize;
+                if (originalMultiline)
+                    textLayer.props.multiline = originalMultiline;
+                textLayer.props.align = originalAlign;
+                textLayer.props.baseline = originalBaseline;
+                return { width: Math.ceil(size.width), height: Math.ceil(size.height) };
+            });
+        }
+        // Handle children
+        if (layer instanceof components_1.Div || (layer.type === "group" && "layers" in layer)) {
+            const children = layer.layers;
+            let childIndex = 0;
+            children.forEach((child) => {
+                const childLayout = child.props?.layout;
+                const childPosition = child.props?.position;
+                // IMPORTANT: Logic for deciding if child participates in Yoga layout:
+                // 1. Div/containers always participate (they manage their own children)
+                // 2. If layer has explicit position prop (x or y set), skip Yoga - use position-based positioning
+                // 3. If layer has explicit layout prop, use Yoga layout
+                // 4. Otherwise (no position, no layout), use Yoga layout by default for proper flow
+                const isContainer = child instanceof components_1.Div || child.type === "group";
+                const hasExplicitPosition = childPosition && (childPosition.x !== undefined || childPosition.y !== undefined);
+                const hasExplicitLayout = childLayout !== undefined && Object.keys(childLayout).length > 0;
+                // Skip Yoga layout if:
+                // - Not a container AND has explicit position set (user wants manual positioning)
+                if (!isContainer && hasExplicitPosition && !hasExplicitLayout) {
+                    return; // Skip this child - it will use position-based positioning
+                }
+                const childNode = this.createNode(child, ctx, canvas);
+                if (childNode) {
+                    node.insertChild(childNode, childIndex++);
+                }
+            });
+        }
+        else if ("children" in layer && Array.isArray(layer.children)) {
+            const children = layer.children;
+            let childIndex = 0;
+            children.forEach((child) => {
+                const childLayout = child.props?.layout;
+                const childPosition = child.props?.position;
+                const isContainer = child instanceof components_1.Div || child.type === "group";
+                const hasExplicitPosition = childPosition && (childPosition.x !== undefined || childPosition.y !== undefined);
+                const hasExplicitLayout = childLayout !== undefined && Object.keys(childLayout).length > 0;
+                if (!isContainer && hasExplicitPosition && !hasExplicitLayout) {
+                    return; // Skip this child - it will use position-based positioning
+                }
+                const childNode = this.createNode(child, ctx, canvas);
+                if (childNode) {
+                    node.insertChild(childNode, childIndex++);
+                }
+            });
+        }
+        return node;
+    }
+    applyLayout(node, layer) {
+        const layout = node.getComputedLayout();
+        // Debug logging if enabled
+        if (this.debug) {
+            console.log(`[Layout] ${layer.id}: left=${layout.left}, top=${layout.top}, width=${layout.width}, height=${layout.height}`);
+        }
+        // Apply computed layout to layer props
+        // We need to be careful not to overwrite original props if we want to recalculate
+        // But for rendering, we need the absolute positions.
+        // Maybe we should store computed layout separately or update position?
+        // For now, let's update position and size if they are not fixed?
+        // Or better, update a specific 'computedLayout' property if we added one.
+        // Since we didn't add 'computedLayout', let's update position.
+        // Note: Yoga calculates relative positions. We might need to convert to absolute if the renderer expects absolute.
+        // But if the renderer handles hierarchy (Div draws children), relative is fine.
+        if (!layer.props)
+            layer.props = {};
+        if (!layer.props.position)
+            layer.props.position = { x: 0, y: 0 };
+        // Mark that this layer has computed layout from Yoga
+        // This will be used by TextLayer to know it should use top-left alignment
+        layer.props._computedLayout = true;
+        // Update position
+        layer.props.position.x = layout.left;
+        layer.props.position.y = layout.top;
+        // If layout is applied, we should probably force centring to top-left (start-top)
+        // to match Yoga's coordinate system
+        if ("centring" in layer.props) {
+            layer.props.centring = "start-top"; // or "none" depending on implementation
+        }
+        // Update size if applicable (e.g. Div or layers that support size)
+        if ("size" in layer.props) {
+            // @ts-ignore
+            const currentSize = layer.props.size;
+            // @ts-ignore
+            layer.props.size = { ...currentSize, width: layout.width, height: layout.height };
+        }
+        else if (layer instanceof components_1.Div) {
+            // Div doesn't have size prop usually, but maybe it should?
+        }
+        // Recursively apply to children
+        if (layer instanceof components_1.Div || (layer.type === "group" && "layers" in layer)) {
+            const children = layer.layers;
+            let yogaChildIndex = 0;
+            for (let i = 0; i < children.length; i++) {
+                const child = children[i];
+                // Check if this child was added to Yoga tree
+                // Must match the logic in createNode
+                const childLayout = child.props?.layout;
+                const childPosition = child.props?.position;
+                const isContainer = child instanceof components_1.Div || child.type === "group";
+                const hasExplicitPosition = childPosition && (childPosition.x !== undefined || childPosition.y !== undefined);
+                const hasExplicitLayout = childLayout !== undefined && Object.keys(childLayout).length > 0;
+                // Skip if this child wasn't added to Yoga tree
+                if (!isContainer && hasExplicitPosition && !hasExplicitLayout) {
+                    continue;
+                }
+                const childNode = node.getChild(yogaChildIndex++);
+                if (childNode) {
+                    this.applyLayout(childNode, child);
+                }
+            }
+        }
+        else if ("children" in layer && Array.isArray(layer.children)) {
+            const children = layer.children;
+            let yogaChildIndex = 0;
+            for (let i = 0; i < children.length; i++) {
+                const child = children[i];
+                const childLayout = child.props?.layout;
+                const childPosition = child.props?.position;
+                const isContainer = child instanceof components_1.Div || child.type === "group";
+                const hasExplicitPosition = childPosition && (childPosition.x !== undefined || childPosition.y !== undefined);
+                const hasExplicitLayout = childLayout !== undefined && Object.keys(childLayout).length > 0;
+                if (!isContainer && hasExplicitPosition && !hasExplicitLayout) {
+                    continue;
+                }
+                const childNode = node.getChild(yogaChildIndex++);
+                if (childNode) {
+                    this.applyLayout(childNode, child);
+                }
+            }
+        }
+    }
+    freeNode(node) {
+        // Recursively free nodes? Yoga might handle this if we free root?
+        // Yoga JS usually requires manual freeing.
+        // node.freeRecursive(); // if available
+        if (node.freeRecursive) {
+            node.freeRecursive();
+        }
+        else {
+            node.free();
+        }
+    }
+    // Helpers for Yoga enums
+    getFlexDirection(dir) {
+        switch (dir) {
+            case "row":
+                return this.yoga.FLEX_DIRECTION_ROW;
+            case "column":
+                return this.yoga.FLEX_DIRECTION_COLUMN;
+            case "row-reverse":
+                return this.yoga.FLEX_DIRECTION_ROW_REVERSE;
+            case "column-reverse":
+                return this.yoga.FLEX_DIRECTION_COLUMN_REVERSE;
+            default:
+                return this.yoga.FLEX_DIRECTION_ROW;
+        }
+    }
+    getJustifyContent(justify) {
+        switch (justify) {
+            case "flex-start":
+                return this.yoga.JUSTIFY_FLEX_START;
+            case "center":
+                return this.yoga.JUSTIFY_CENTER;
+            case "flex-end":
+                return this.yoga.JUSTIFY_FLEX_END;
+            case "space-between":
+                return this.yoga.JUSTIFY_SPACE_BETWEEN;
+            case "space-around":
+                return this.yoga.JUSTIFY_SPACE_AROUND;
+            case "space-evenly":
+                return this.yoga.JUSTIFY_SPACE_EVENLY;
+            default:
+                return this.yoga.JUSTIFY_FLEX_START;
+        }
+    }
+    getAlignItems(align) {
+        switch (align) {
+            case "flex-start":
+                return this.yoga.ALIGN_FLEX_START;
+            case "center":
+                return this.yoga.ALIGN_CENTER;
+            case "flex-end":
+                return this.yoga.ALIGN_FLEX_END;
+            case "stretch":
+                return this.yoga.ALIGN_STRETCH;
+            case "baseline":
+                return this.yoga.ALIGN_BASELINE;
+            default:
+                return this.yoga.ALIGN_STRETCH;
+        }
+    }
+    getPositionType(position) {
+        if (position === "absolute")
+            return this.yoga.POSITION_TYPE_ABSOLUTE;
+        return this.yoga.POSITION_TYPE_RELATIVE;
+    }
+    setDimension(node, prop, value) {
+        if (typeof value === "number") {
+            if (prop === "width")
+                node.setWidth(value);
+            else
+                node.setHeight(value);
+        }
+        else if (typeof value === "string") {
+            if (value.endsWith("%")) {
+                const val = parseFloat(value);
+                if (prop === "width")
+                    node.setWidthPercent(val);
+                else
+                    node.setHeightPercent(val);
+            }
+            else if (value === "auto") {
+                if (prop === "width")
+                    node.setWidthAuto();
+                else
+                    node.setHeightAuto();
+            }
+        }
+    }
+    setPadding(node, padding) {
+        if (typeof padding === "number") {
+            node.setPadding(this.yoga.EDGE_ALL, padding);
+        }
+        else if (Array.isArray(padding)) {
+            // CSS order: top, right, bottom, left
+            if (padding.length === 1)
+                node.setPadding(this.yoga.EDGE_ALL, padding[0]);
+            else if (padding.length === 2) {
+                node.setPadding(this.yoga.EDGE_VERTICAL, padding[0]);
+                node.setPadding(this.yoga.EDGE_HORIZONTAL, padding[1]);
+            }
+            else if (padding.length === 4) {
+                node.setPadding(this.yoga.EDGE_TOP, padding[0]);
+                node.setPadding(this.yoga.EDGE_RIGHT, padding[1]);
+                node.setPadding(this.yoga.EDGE_BOTTOM, padding[2]);
+                node.setPadding(this.yoga.EDGE_LEFT, padding[3]);
+            }
+        }
+    }
+    setMargin(node, margin) {
+        if (typeof margin === "number") {
+            node.setMargin(this.yoga.EDGE_ALL, margin);
+        }
+        else if (Array.isArray(margin)) {
+            if (margin.length === 1)
+                node.setMargin(this.yoga.EDGE_ALL, margin[0]);
+            else if (margin.length === 2) {
+                node.setMargin(this.yoga.EDGE_VERTICAL, margin[0]);
+                node.setMargin(this.yoga.EDGE_HORIZONTAL, margin[1]);
+            }
+            else if (margin.length === 4) {
+                node.setMargin(this.yoga.EDGE_TOP, margin[0]);
+                node.setMargin(this.yoga.EDGE_RIGHT, margin[1]);
+                node.setMargin(this.yoga.EDGE_BOTTOM, margin[2]);
+                node.setMargin(this.yoga.EDGE_LEFT, margin[3]);
+            }
+        }
+    }
+}
+exports.LayoutManager = LayoutManager;

package/dist/structures/managers/RenderManager.d.ts

@@ -1,6 +1,7 @@
 import { AnyExport } from "../../types";
 import { LazyCanvas } from "../LazyCanvas";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
+import { Buffer } from "buffer";
 /**
  * Interface representing the RenderManager.
  */

package/dist/structures/managers/RenderManager.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderManager = void 0;
 const types_1 = require("../../types");
+const components_1 = require("../components");
 const LazyUtil_1 = require("../../utils/LazyUtil");
 /**
  * Class responsible for managing rendering operations, including static and animated exports.
@@ -28,6 +29,32 @@ class RenderManager {
         if (layer.visible) {
             this.lazyCanvas.ctx.globalCompositeOperation = layer.props?.globalComposite || "source-over";
             await layer.draw(this.lazyCanvas.ctx, this.lazyCanvas.canvas, this.lazyCanvas.manager.layers, this.debug);
+            // Draw children if any (and not a Div, as Div handles its own children)
+            // Actually, if we want to support children on any layer, we should handle it here.
+            // But Div.draw already handles children.
+            // If we handle it here for Div, we get double rendering.
+            // So we skip Div.
+            const children = layer.children;
+            if (!(layer instanceof components_1.Div) && children && Array.isArray(children) && children.length > 0) {
+                const ctx = this.lazyCanvas.ctx;
+                ctx.save();
+                // Apply parent position offset
+                // LayoutManager sets position relative to parent.
+                // We need to translate context to parent's position so children are drawn relative to it.
+                // However, layer.draw() might have already drawn the layer at that position.
+                // And layer.draw() usually restores context.
+                // So we are back at parent's parent coordinate system.
+                // We need to translate to layer's position.
+                if (layer.props.position) {
+                    const x = typeof layer.props.position.x === "number" ? layer.props.position.x : 0;
+                    const y = typeof layer.props.position.y === "number" ? layer.props.position.y : 0;
+                    ctx.translate(x, y);
+                }
+                for (const child of children) {
+                    await this.renderLayer(child);
+                }
+                ctx.restore();
+            }
             this.lazyCanvas.ctx.shadowColor = "transparent";
         }
         return this.lazyCanvas.ctx;
@@ -40,7 +67,13 @@ class RenderManager {
     async renderStatic(exportType) {
         if (this.debug)
             LazyUtil_1.LazyLog.log("info", `Rendering static...`);
-        for (const layer of this.lazyCanvas.manager.layers.toArray()) {
+        // Wait for layout engine to be ready
+        await this.lazyCanvas.manager.layout.ready;
+        const rootLayers = this.lazyCanvas.manager.layers.toArray().filter((l) => !l.parent);
+        for (const layer of rootLayers) {
+            this.lazyCanvas.manager.layout.calculateLayout(layer, this.lazyCanvas.options.width, this.lazyCanvas.options.height, this.lazyCanvas.ctx, this.lazyCanvas.canvas);
+        }
+        for (const layer of rootLayers) {
             await this.renderLayer(layer);
         }
         switch (exportType) {
@@ -74,7 +107,7 @@ class RenderManager {
                 return await this.renderStatic(types_1.Export.BUFFER);
             case types_1.Export.CTX:
             case "ctx":
-                return this.lazyCanvas.ctx;
+                return await this.renderStatic(types_1.Export.CTX);
             case types_1.Export.SVG:
             case "svg":
                 return await this.renderStatic(types_1.Export.SVG);

package/dist/types/types.d.ts

@@ -230,3 +230,28 @@ export type StrokeOptions = {
   dash?: number[];
   miterLimit?: number;
 };
+
+export interface ILayoutProps {
+  width?: ScaleType;
+  height?: ScaleType;
+  flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
+  justifyContent?:
+    | "flex-start"
+    | "center"
+    | "flex-end"
+    | "space-between"
+    | "space-around"
+    | "space-evenly";
+  alignItems?: "flex-start" | "center" | "flex-end" | "stretch" | "baseline";
+  flexGrow?: number;
+  flexShrink?: number;
+  flexBasis?: number | string;
+  padding?: number | number[];
+  margin?: number | number[];
+  gap?: number;
+  position?: "absolute" | "relative";
+  top?: number | string;
+  left?: number | string;
+  right?: number | string;
+  bottom?: number | string;
+}

package/dist/utils/utils.js

@@ -98,9 +98,9 @@ function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options
                 case "link-h":
                     return getLayerHeight(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
                 case "link-x":
-                    return parserInstance.parse(anyLayer.props.position.x) + additionalSpacing;
+                    return parserInstance.parse(anyLayer.props.position?.x || 0) + additionalSpacing;
                 case "link-y":
-                    return parserInstance.parse(anyLayer.props.position.y) + additionalSpacing;
+                    return parserInstance.parse(anyLayer.props.position?.y || 0) + additionalSpacing;
             }
         }
     }
@@ -118,9 +118,9 @@ function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options
             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;
+                return parserInstance.parse(anyLayer.props.position?.x || 0) + additionalSpacing;
             case types_1.LinkType.Y:
-                return parserInstance.parse(anyLayer.props.position.y) + additionalSpacing;
+                return parserInstance.parse(anyLayer.props.position?.y || 0) + additionalSpacing;
         }
     }
     return 0;
@@ -436,8 +436,10 @@ function resizeLayers(layers, ratio) {
     if (layers.length > 0) {
         for (const layer of layers) {
             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 (layer.props.position) {
+                    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);
@@ -458,7 +460,9 @@ function resizeLayers(layers, ratio) {
                 if ("stroke" in layer.props && layer.props.stroke) {
                     layer.props.stroke.width = resize(layer.props.stroke.width, ratio);
                 }
-                if ("endX" in layer.props.position && "endY" in layer.props.position) {
+                if (layer.props.position &&
+                    "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);
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nmmty/lazycanvas",
-  "version": "1.0.0-dev.4",
+  "version": "1.0.0-dev.7",
   "description": "A simple way to interact with @napi-rs/canvas in an advanced way!",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -25,7 +25,8 @@
     "@napi-rs/canvas": "^0.1.88",
     "gifenc": "^1.0.3",
     "js-yaml": "^4.1.0",
-    "svgson": "^5.3.1"
+    "svgson": "^5.3.1",
+    "yoga-layout": "^3.2.1"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",

package/biome.json

@@ -1,41 +0,0 @@
-{
-  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
-  "vcs": {
-    "enabled": false,
-    "clientKind": "git",
-    "useIgnoreFile": false
-  },
-  "files": {
-    "ignoreUnknown": false,
-    "ignore": [
-      "node_modules/",
-      "dist/",
-      "biome.json",
-      ".biome/",
-      ".git/",
-      ".hg/",
-      ".svn/",
-      "public/",
-      "docs/",
-      "resources/"
-    ]
-  },
-  "formatter": {
-    "enabled": true,
-    "indentStyle": "space",
-    "indentWidth": 2,
-    "lineWidth": 100
-  },
-  "organizeImports": {
-    "enabled": true
-  },
-  "linter": {
-    "enabled": true,
-    "rules": { "recommended": true }
-  },
-  "javascript": {
-    "formatter": {
-      "quoteStyle": "double"
-    }
-  }
-}