@nmmty/lazycanvas 0.6.5 → 1.0.0-dev.10

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/index.d.ts

@@ -1,5 +1,3 @@
-export * from './LayersManager';
-export * from './PluginManager';
-export * from './FontsManager';
-export * from './RenderManager';
-export * from './AnimationManager';
+export * from "./LayersManager";
+export * from "./FontsManager";
+export * from "./piplines";

package/dist/structures/managers/index.js

@@ -15,7 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./LayersManager"), exports);
-__exportStar(require("./PluginManager"), exports);
 __exportStar(require("./FontsManager"), exports);
-__exportStar(require("./RenderManager"), exports);
-__exportStar(require("./AnimationManager"), exports);
+__exportStar(require("./piplines"), exports);

package/dist/structures/managers/{RenderManager.d.ts → piplines/ClassicRenderPipeline.d.ts}

@@ -1,23 +1,11 @@
-import { AnyExport } from "../../types";
-import { LazyCanvas } from "../LazyCanvas";
+import { AnyExport } from "../../../types";
+import { LazyCanvas } from "../../LazyCanvas";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
-/**
- * Interface representing the RenderManager.
- */
-export interface IRenderManager {
-    /**
-     * The LazyCanvas instance used for rendering.
-     */
-    lazyCanvas: LazyCanvas;
-    /**
-     * Whether debugging is enabled.
-     */
-    debug: boolean;
-}
+import { IRenderManager } from "./index";
 /**
  * Class responsible for managing rendering operations, including static and animated exports.
  */
-export declare class RenderManager implements IRenderManager {
+export declare class ClassicRenderPipeline implements IRenderManager {
     /**
      * The LazyCanvas instance used for rendering.
      */
@@ -35,15 +23,6 @@ export declare class RenderManager implements IRenderManager {
     constructor(lazyCanvas: LazyCanvas, opts?: {
         debug?: boolean;
     });
-    /**
-     * Merges multiple ImageData objects into a single ImageData object.
-     * @param {SKRSContext2D} [ctx] - The canvas rendering context.
-     * @param {ImageData[]} [imageDataList] - The list of ImageData objects to merge.
-     * @param {number} [width] - The width of the resulting ImageData.
-     * @param {number} [height] - The height of the resulting ImageData.
-     * @returns {ImageData} The merged ImageData object.
-     */
-    private mergeImageData;
     /**
      * Renders a single layer or group of layers.
      * @param {AnyLayer | Group} [layer] - The layer or group to render.
@@ -56,11 +35,6 @@ export declare class RenderManager implements IRenderManager {
      * @returns {Promise<Buffer | SKRSContext2D | string>} The rendered output in the specified format.
      */
     private renderStatic;
-    /**
-     * Renders an animated sequence of layers and exports it as a GIF.
-     * @returns {Promise<Buffer>} The rendered animation as a Buffer.
-     */
-    private renderAnimation;
     /**
      * Renders all layers and exports the result in the specified format.
      * @param {AnyExport} [format] - The export format (e.g., buffer, context, SVG, or canvas).

package/dist/structures/managers/piplines/ClassicRenderPipeline.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClassicRenderPipeline = void 0;
+const types_1 = require("../../../types");
+const LazyUtil_1 = require("../../../utils/LazyUtil");
+/**
+ * Class responsible for managing rendering operations, including static and animated exports.
+ */
+class ClassicRenderPipeline {
+    /**
+     * Constructs a new RenderManager instance.
+     * @param {LazyCanvas} [lazyCanvas] - The LazyCanvas instance to use for rendering.
+     * @param {Object} [opts] - Optional settings for the RenderManager.
+     * @param {boolean} [opts.debug] - Whether debugging is enabled.
+     */
+    constructor(lazyCanvas, opts) {
+        this.lazyCanvas = lazyCanvas;
+        this.debug = opts?.debug || false;
+    }
+    /**
+     * Renders a single layer or group of layers.
+     * @param {AnyLayer | Group} [layer] - The layer or group to render.
+     * @returns {Promise<SKRSContext2D>} The canvas rendering context after rendering.
+     */
+    async renderLayer(layer) {
+        if (this.debug)
+            LazyUtil_1.LazyLog.log("info", `Rendering ${layer.id}...\nData:`, layer.toJSON());
+        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);
+            this.lazyCanvas.ctx.shadowColor = "transparent";
+        }
+        return this.lazyCanvas.ctx;
+    }
+    /**
+     * Renders all layers statically and exports the result in the specified format.
+     * @param {AnyExport} [exportType] - The export format (e.g., buffer, SVG, or context).
+     * @returns {Promise<Buffer | SKRSContext2D | string>} The rendered output in the specified format.
+     */
+    async renderStatic(exportType) {
+        if (this.debug)
+            LazyUtil_1.LazyLog.log("info", `Rendering static...`);
+        for (const layer of this.lazyCanvas.manager.layers.toArray()) {
+            await this.renderLayer(layer);
+        }
+        switch (exportType) {
+            case types_1.Export.BUFFER:
+            case "buffer":
+            case types_1.Export.SVG:
+            case "svg":
+                if ("getContent" in this.lazyCanvas.canvas) {
+                    return this.lazyCanvas.canvas.getContent().toString("utf8");
+                }
+                return this.lazyCanvas.canvas.toBuffer("image/png");
+            case types_1.Export.CTX:
+            case "ctx":
+                return this.lazyCanvas.ctx;
+            default:
+                if ("getContent" in this.lazyCanvas.canvas) {
+                    return this.lazyCanvas.canvas.getContent().toString("utf8");
+                }
+                return this.lazyCanvas.canvas.toBuffer("image/png");
+        }
+    }
+    /**
+     * Renders all layers and exports the result in the specified format.
+     * @param {AnyExport} [format] - The export format (e.g., buffer, context, SVG, or canvas).
+     * @returns {Promise<Buffer | SKRSContext2D | Canvas | SvgCanvas | string>} The rendered output in the specified format.
+     */
+    async render(format) {
+        switch (format) {
+            case types_1.Export.BUFFER:
+            case "buffer":
+                return await this.renderStatic(types_1.Export.BUFFER);
+            case types_1.Export.CTX:
+            case "ctx":
+                return await this.renderStatic(types_1.Export.CTX);
+            case types_1.Export.SVG:
+            case "svg":
+                return await this.renderStatic(types_1.Export.SVG);
+            case types_1.Export.CANVAS:
+            case "canvas":
+                await this.renderStatic(this.lazyCanvas.options.exportType === "svg" ? types_1.Export.SVG : types_1.Export.BUFFER);
+                return this.lazyCanvas.canvas;
+            default:
+                return await this.renderStatic(types_1.Export.BUFFER);
+        }
+    }
+}
+exports.ClassicRenderPipeline = ClassicRenderPipeline;

package/dist/structures/managers/piplines/ModernRenderPipeline.d.ts

@@ -0,0 +1,44 @@
+import { AnyExport } from "../../../types";
+import { LazyCanvas } from "../../LazyCanvas";
+import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
+import { IRenderManager } from "./index";
+/**
+ * Class responsible for managing rendering operations, including static and animated exports.
+ */
+export declare class ModernRenderPipeline implements IRenderManager {
+    /**
+     * The LazyCanvas instance used for rendering.
+     */
+    lazyCanvas: LazyCanvas;
+    /**
+     * Whether debugging is enabled.
+     */
+    debug: boolean;
+    /**
+     * Constructs a new RenderManager instance.
+     * @param {LazyCanvas} [lazyCanvas] - The LazyCanvas instance to use for rendering.
+     * @param {Object} [opts] - Optional settings for the RenderManager.
+     * @param {boolean} [opts.debug] - Whether debugging is enabled.
+     */
+    constructor(lazyCanvas: LazyCanvas, opts?: {
+        debug?: boolean;
+    });
+    /**
+     * Renders a single layer or group of layers.
+     * @param {AnyLayer | Div} [layer] - The layer or group to render.
+     * @returns {Promise<SKRSContext2D>} The canvas rendering context after rendering.
+     */
+    private renderLayer;
+    /**
+     * Renders all layers statically and exports the result in the specified format.
+     * @param {AnyExport} [exportType] - The export format (e.g., buffer, SVG, or context).
+     * @returns {Promise<Buffer | SKRSContext2D | string>} The rendered output in the specified format.
+     */
+    private renderStatic;
+    /**
+     * Renders all layers and exports the result in the specified format.
+     * @param {AnyExport} [format] - The export format (e.g., buffer, context, SVG, or canvas).
+     * @returns {Promise<Buffer | SKRSContext2D | Canvas | SvgCanvas | string>} The rendered output in the specified format.
+     */
+    render(format: AnyExport): Promise<Buffer | SKRSContext2D | Canvas | SvgCanvas | string>;
+}