@nmmty/lazycanvas 0.6.5 → 1.0.0-dev.10

package/dist/structures/components/BaseLayer.js

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BaseLayer = void 0;
 const types_1 = require("../../types");
-const utils_1 = require("../../utils/utils");
-const LazyUtil_1 = require("../../utils/LazyUtil");
+const utils_1 = require("../../utils");
+const Signal_1 = require("../../core/Signal");
+const helpers_1 = require("../helpers");
 /**
  * Represents a base layer with generic properties and methods for managing
  * its position, visibility, transformations, and other attributes.
@@ -11,44 +12,115 @@ const LazyUtil_1 = require("../../utils/LazyUtil");
  * @template T - A type extending `IBaseLayerProps` that defines the properties of the layer.
  */
 class BaseLayer {
+    constructor(type, props, misc) {
+        this.children = [];
+        this._signals = new Map();
+        // Extract id, visible, zIndex from props if provided (for JSX support)
+        const propsId = props.id;
+        const propsVisible = props.visible;
+        const propsZIndex = props.zIndex;
+        this.id = misc?.id || propsId || (0, utils_1.generateID)(type);
+        this.type = type;
+        this.zIndex = misc?.zIndex ?? propsZIndex ?? 1;
+        this.visible = misc?.visible ?? propsVisible ?? true;
+        this.props = props;
+        this.parent = null;
+        this.children = [];
+        this.extractSignals(this.props, "");
+    }
     /**
-     * The unique identifier of the layer.
-     * @type {string}
+     * Adds components to the layer.
+     * @param {AnyLayer[] | Div[]} [components] - The components to add to the layer.
+     * @returns {this} The current instance for chaining.
      */
-    id;
+    add(...components) {
+        let layersArray = components.filter((l) => l !== undefined);
+        layersArray = layersArray.sort((a, b) => a.zIndex - b.zIndex);
+        for (const layer of layersArray) {
+            layer.parent = this;
+        }
+        this.children.push(...layersArray);
+        return this;
+    }
     /**
-     * The type of the layer.
-     * @type {LayerType}
+     * Removes a component from the layer by its ID.
+     * @param {string} [id] - The unique identifier of the component to remove.
+     * @returns {this} The current instance for chaining.
      */
-    type;
+    remove(id) {
+        this.children = this.children.filter((c) => c.id !== id);
+        return this;
+    }
     /**
-     * The z-index of the layer, determining its stacking order.
-     * @type {number}
+     * Retrieves a component from the layer by its ID.
+     * @param {string} [id] - The unique identifier of the component to retrieve.
+     * @returns {AnyLayer | Div | undefined} The component with the specified ID, or undefined if not found.
      */
-    zIndex;
+    get(id) {
+        return this.children.find((c) => c.id === id);
+    }
     /**
-     * The visibility of the layer.
-     * @type {boolean}
+     * Retrieves all components from the layer.
+     * @returns {AnyLayer[] | Div[]} An array of all components in the layer.
      */
-    visible;
+    getAll() {
+        return this.children;
+    }
     /**
-     * The properties of the layer, defined by the generic type `T`.
-     * @type {T}
+     * Recursively extract signals from props and nested objects
+     * @param obj - Object to extract signals from
+     * @param path - Current property path (e.g., "size.width")
      */
-    props;
+    extractSignals(obj, path) {
+        if (!obj || typeof obj !== "object")
+            return;
+        for (const key in obj) {
+            const value = obj[key];
+            const currentPath = path ? `${path}.${key}` : key;
+            if (value instanceof Signal_1.Signal) {
+                // Store signal with its path
+                this._signals.set(currentPath, value);
+                // Replace signal with its initial value (at time 0)
+                obj[key] = value.get(0);
+            }
+            else if (value &&
+                typeof value === "object" &&
+                !Array.isArray(value) &&
+                !(value instanceof helpers_1.Gradient) &&
+                !(value instanceof helpers_1.Pattern) &&
+                !(value instanceof helpers_1.Link)) {
+                // Recursively process nested objects (but not arrays or special types)
+                this.extractSignals(value, currentPath);
+            }
+        }
+    }
     /**
-     * Constructs a new `BaseLayer` instance.
-     * @param {LayerType} [type] - The type of the layer.
-     * @param {T} [props] - The properties of the layer.
-     * @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
+     * Update layer properties from signals at given time
+     * @param time - Current time in seconds
      */
-    constructor(type, props, misc) {
-        this.id = misc?.id || (0, utils_1.generateID)(type ? type : types_1.LayerType.Base);
-        this.type = type ? type : types_1.LayerType.Base;
-        this.zIndex = misc?.zIndex || 1;
-        this.visible = misc?.visible || true;
-        this.props = props ? props : {};
-        this.props = this.validateProps(this.props);
+    updateState(time) {
+        this._signals.forEach((signal, path) => {
+            // Just read the current value - signals are updated by the scheduler
+            const value = signal.value ? signal.value() : signal.get(time);
+            this.setNestedProperty(this.props, path, value);
+        });
+    }
+    /**
+     * Set a nested property value using dot notation path
+     * @param obj - Object to set property on
+     * @param path - Property path (e.g., "size.width")
+     * @param value - Value to set
+     */
+    setNestedProperty(obj, path, value) {
+        const keys = path.split(".");
+        let current = obj;
+        for (let i = 0; i < keys.length - 1; i++) {
+            if (!current[keys[i]] || typeof current[keys[i]] !== "object") {
+                current[keys[i]] = {};
+            }
+            current = current[keys[i]];
+        }
+        current[keys[keys.length - 1]] = value;
     }
     /**
      * Sets the position of the layer in the 2D plane.
@@ -57,8 +129,7 @@ class BaseLayer {
      * @returns {this} The current instance for chaining.
      */
     setPosition(x, y) {
-        this.props.x = x;
-        this.props.y = y;
+        this.props.position = { x, y };
         return this;
     }
     /**
@@ -91,9 +162,9 @@ class BaseLayer {
      */
     setShadow(color, blur, offsetX, offsetY) {
         if (!color)
-            throw new LazyUtil_1.LazyError('The color of the shadow must be provided');
+            throw new utils_1.LazyError("The color of the shadow must be provided");
         if (!(0, utils_1.isColor)(color))
-            throw new LazyUtil_1.LazyError('The color of the shadow must be a valid color');
+            throw new utils_1.LazyError("The color of the shadow must be a valid color");
         this.props.shadow = {
             color: color,
             blur: blur || 0,
@@ -146,7 +217,7 @@ class BaseLayer {
      * @returns {this} The current instance for chaining.
      */
     setFilters(...filter) {
-        this.props.filter = filter.join(' ');
+        this.props.filter = filter.join(" ");
         return this;
     }
     /**
@@ -201,13 +272,11 @@ class BaseLayer {
     validateProps(data) {
         return {
             ...data,
-            x: data.x || 0,
-            y: data.y || 0,
             centring: data.centring || types_1.Centring.Center,
-            filter: data.filter || '',
+            filter: data.filter || "",
             opacity: data.opacity || 1,
             transform: data.transform || {},
-            globalComposite: data.globalComposite || 'source-over',
+            globalComposite: data.globalComposite || "source-over",
         };
     }
 }

package/dist/structures/components/BezierLayer.d.ts

@@ -1,5 +1,5 @@
 import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
-import { ColorType, Point, ScaleType, LayerType } from "../../types";
+import { ColorType, Point, ScaleType, LayerType, StrokeOptions } from "../../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers";
 /**
@@ -19,51 +19,36 @@ export interface IBezierLayer extends IBaseLayer {
  * Interface representing the properties of a Bezier layer.
  */
 export interface IBezierLayerProps extends IBaseLayerProps {
+    position: {
+        /**
+         * The start x of the Bézier curve.
+         */
+        x: ScaleType;
+        /**
+         * The start y of the Bézier curve.
+         */
+        y: ScaleType;
+        /**
+         * The end x of the Bézier curve.
+         */
+        endX: ScaleType;
+        /**
+         * The end y of the Bézier curve.
+         */
+        endY: ScaleType;
+    };
     /**
      * The control points of the Bézier curve.
      */
     controlPoints: Array<Point>;
-    /**
-     * The end point of the Bézier curve.
-     */
-    endPoint: Point;
-    /**
-     * Whether the layer is filled.
-     */
-    filled: boolean;
     /**
      * The fill style (color or pattern) of the layer.
      */
-    fillStyle: ColorType;
+    color: ColorType;
     /**
      * The stroke properties of the Bézier curve.
      */
-    stroke: {
-        /**
-         * The width of the stroke.
-         */
-        width: number;
-        /**
-         * The cap style of the stroke.
-         */
-        cap: CanvasLineCap;
-        /**
-         * The join style of the stroke.
-         */
-        join: CanvasLineJoin;
-        /**
-         * The dash offset of the stroke.
-         */
-        dashOffset: number;
-        /**
-         * The dash pattern of the stroke.
-         */
-        dash: number[];
-        /**
-         * The miter limit of the stroke.
-         */
-        miterLimit: number;
-    };
+    stroke: StrokeOptions;
 }
 /**
  * Class representing a Bezier layer, extending the BaseLayer class.
@@ -90,12 +75,14 @@ export declare class BezierLayer extends BaseLayer<IBezierLayerProps> {
         y: ScaleType;
     }[]): this;
     /**
-     * Sets the end position of the Bezier layer.
+     * Sets the position of the Bezier layer.
      * @param {ScaleType} [x] - The x-coordinate of the end point.
      * @param {ScaleType} [y] - The y-coordinate of the end point.
+     * @param {ScaleType} [endX] - The x-coordinate of the end point.
+     * @param {ScaleType} [endY] - The y-coordinate of the end point.
      * @returns {this} The current instance for chaining.
      */
-    setEndPosition(x: ScaleType, y: ScaleType): this;
+    setPosition(x: ScaleType, y: ScaleType, endX?: ScaleType, endY?: ScaleType): this;
     /**
      * Sets the color of the Bezier layer.
      * @param {ColorType} [color] - The color of the layer.

package/dist/structures/components/BezierLayer.js

@@ -3,16 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BezierLayer = void 0;
 const BaseLayer_1 = require("./BaseLayer");
 const types_1 = require("../../types");
-const utils_1 = require("../../utils/utils");
-const LazyUtil_1 = require("../../utils/LazyUtil");
+const utils_1 = require("../../utils");
 /**
  * Class representing a Bezier layer, extending the BaseLayer class.
  */
 class BezierLayer extends BaseLayer_1.BaseLayer {
-    /**
-     * The properties of the Bezier layer.
-     */
-    props;
     /**
      * Constructs a new BezierLayer instance.
      * @param {IBezierLayerProps} [props] - The properties of the Bezier layer.
@@ -31,18 +26,20 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
      */
     setControlPoints(...controlPoints) {
         if (controlPoints.length !== 2)
-            throw new LazyUtil_1.LazyError('The control points of the layer must be provided');
+            throw new utils_1.LazyError("The control points of the layer must be provided");
         this.props.controlPoints = controlPoints.flat();
         return this;
     }
     /**
-     * Sets the end position of the Bezier layer.
+     * Sets the position of the Bezier layer.
      * @param {ScaleType} [x] - The x-coordinate of the end point.
      * @param {ScaleType} [y] - The y-coordinate of the end point.
+     * @param {ScaleType} [endX] - The x-coordinate of the end point.
+     * @param {ScaleType} [endY] - The y-coordinate of the end point.
      * @returns {this} The current instance for chaining.
      */
-    setEndPosition(x, y) {
-        this.props.endPoint = { x, y };
+    setPosition(x, y, endX, endY) {
+        this.props.position = { x, y, endX: endX || 0, endY: endY || 0 };
         return this;
     }
     /**
@@ -53,10 +50,10 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
      */
     setColor(color) {
         if (!color)
-            throw new LazyUtil_1.LazyError('The color of the layer must be provided');
+            throw new utils_1.LazyError("The color of the layer must be provided");
         if (!(0, utils_1.isColor)(color))
-            throw new LazyUtil_1.LazyError('The color of the layer must be a valid color');
-        this.props.fillStyle = color;
+            throw new utils_1.LazyError("The color of the layer must be a valid color");
+        this.props.color = color;
         return this;
     }
     /**
@@ -72,8 +69,8 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
     setStroke(width, cap, join, dash, dashOffset, miterLimit) {
         this.props.stroke = {
             width,
-            cap: cap || 'butt',
-            join: join || 'miter',
+            cap: cap || "butt",
+            join: join || "miter",
             dash: dash || [],
             dashOffset: dashOffset || 0,
             miterLimit: miterLimit || 10,
@@ -90,16 +87,21 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
     getBoundingBox(ctx, canvas, manager) {
         const parcer = (0, utils_1.parser)(ctx, canvas, manager);
         const { xs, ys, cp1x, cp1y, cp2x, cp2y, xe, ye } = parcer.parseBatch({
-            xs: { v: this.props.x },
-            ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
+            xs: { v: this.props.position.x },
+            ys: { v: this.props.position.y, options: utils_1.defaultArg.vl(true) },
             cp1x: { v: this.props.controlPoints[0].x },
-            cp1y: { v: this.props.controlPoints[0].y, options: LazyUtil_1.defaultArg.vl(true) },
+            cp1y: { v: this.props.controlPoints[0].y, options: utils_1.defaultArg.vl(true) },
             cp2x: { v: this.props.controlPoints[1].x },
-            cp2y: { v: this.props.controlPoints[1].y, options: LazyUtil_1.defaultArg.vl(true) },
-            xe: { v: this.props.endPoint.x },
-            ye: { v: this.props.endPoint.y, options: LazyUtil_1.defaultArg.vl(true) }
+            cp2y: { v: this.props.controlPoints[1].y, options: utils_1.defaultArg.vl(true) },
+            xe: { v: this.props.position.endX },
+            ye: { v: this.props.position.endY, options: utils_1.defaultArg.vl(true) },
         });
-        const { max, min, center, width, height } = (0, utils_1.getBoundingBoxBezier)([{ x: xs, y: ys }, { x: cp1x, y: cp1y }, { x: cp2x, y: cp2y }, { x: xe, y: ye }]);
+        const { max, min, center, width, height } = (0, utils_1.getBoundingBoxBezier)([
+            { x: xs, y: ys },
+            { x: cp1x, y: cp1y },
+            { x: cp2x, y: cp2y },
+            { x: xe, y: ye },
+        ]);
         return { max, min, center, width, height };
     }
     /**
@@ -112,33 +114,59 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
     async draw(ctx, canvas, manager, debug) {
         const parcer = (0, utils_1.parser)(ctx, canvas, manager);
         const { xs, ys, cp1x, cp1y, cp2x, cp2y, xe, ye } = parcer.parseBatch({
-            xs: { v: this.props.x },
-            ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
+            xs: { v: this.props.position.x },
+            ys: { v: this.props.position.y, options: utils_1.defaultArg.vl(true) },
             cp1x: { v: this.props.controlPoints[0].x },
-            cp1y: { v: this.props.controlPoints[0].y, options: LazyUtil_1.defaultArg.vl(true) },
+            cp1y: { v: this.props.controlPoints[0].y, options: utils_1.defaultArg.vl(true) },
             cp2x: { v: this.props.controlPoints[1].x },
-            cp2y: { v: this.props.controlPoints[1].y, options: LazyUtil_1.defaultArg.vl(true) },
-            xe: { v: this.props.endPoint.x },
-            ye: { v: this.props.endPoint.y, options: LazyUtil_1.defaultArg.vl(true) }
+            cp2y: { v: this.props.controlPoints[1].y, options: utils_1.defaultArg.vl(true) },
+            xe: { v: this.props.position.endX },
+            ye: { v: this.props.position.endY, options: utils_1.defaultArg.vl(true) },
+        });
+        const { max, min, center, width, height } = (0, utils_1.getBoundingBoxBezier)([
+            { x: xs, y: ys },
+            { x: cp1x, y: cp1y },
+            { x: cp2x, y: cp2y },
+            { x: xe, y: ye },
+        ]);
+        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.color, {
+            debug,
+            layer: { width, height, x: min.x, y: min.y, align: "none" },
+            manager,
         });
-        const { max, min, center, width, height } = (0, utils_1.getBoundingBoxBezier)([{ x: xs, y: ys }, { x: cp1x, y: cp1y }, { x: cp2x, y: cp2y }, { x: xe, y: ye }]);
-        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle, { debug, layer: { width, height, x: min.x, y: min.y, align: 'none' }, manager });
         if (debug)
-            LazyUtil_1.LazyLog.log('none', `BezierLayer:`, { xs, ys, cp1x, cp1y, cp2x, cp2y, xe, ye, max, min, center, width, height, fillStyle });
+            utils_1.LazyLog.log("none", `BezierLayer:`, {
+                xs,
+                ys,
+                cp1x,
+                cp1y,
+                cp2x,
+                cp2y,
+                xe,
+                ye,
+                max,
+                min,
+                center,
+                width,
+                height,
+                fillStyle,
+            });
         ctx.save();
-        (0, utils_1.transform)(ctx, this.props.transform, { x: center.x, y: center.y, width, height, type: this.type });
-        (0, utils_1.drawShadow)(ctx, this.props.shadow);
-        (0, utils_1.opacity)(ctx, this.props.opacity);
-        (0, utils_1.filters)(ctx, this.props.filter);
+        if (this.props.transform) {
+            (0, utils_1.transform)(ctx, this.props.transform, {
+                x: center.x,
+                y: center.y,
+                width,
+                height,
+                type: this.type,
+            });
+        }
+        utils_1.DrawUtils.drawShadow(ctx, this.props.shadow);
+        utils_1.DrawUtils.opacity(ctx, this.props.opacity);
+        utils_1.DrawUtils.filters(ctx, this.props.filter);
+        utils_1.DrawUtils.fillStyle(ctx, fillStyle, this.props.stroke);
         ctx.beginPath();
         ctx.moveTo(xs, ys);
-        ctx.strokeStyle = fillStyle;
-        ctx.lineWidth = this.props.stroke?.width || 1;
-        ctx.lineCap = this.props.stroke?.cap || 'butt';
-        ctx.lineJoin = this.props.stroke?.join || 'miter';
-        ctx.miterLimit = this.props.stroke?.miterLimit || 10;
-        ctx.lineDashOffset = this.props.stroke?.dashOffset || 0;
-        ctx.setLineDash(this.props.stroke?.dash || []);
         ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, xe, ye);
         ctx.stroke();
         ctx.closePath();
@@ -151,18 +179,18 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
     toJSON() {
         let data = super.toJSON();
         let copy = { ...this.props };
-        for (const key of ['x', 'y', 'endPoint.x', 'endPoint.y', 'fillStyle']) {
-            if (copy[key] && typeof copy[key] === 'object' && 'toJSON' in copy[key]) {
+        for (const key of ["x", "y", "endPoint.x", "endPoint.y", "fillStyle"]) {
+            if (copy[key] && typeof copy[key] === "object" && "toJSON" in copy[key]) {
                 copy[key] = copy[key].toJSON();
             }
         }
         if (copy.controlPoints) {
             copy.controlPoints = copy.controlPoints.map((point) => {
-                if (point.x && typeof point.x === 'object' && 'toJSON' in point.x) {
+                if (point.x && typeof point.x === "object" && "toJSON" in point.x) {
                     // @ts-ignore
                     point.x = point.x.toJSON();
                 }
-                if (point.y && typeof point.y === 'object' && 'toJSON' in point.y) {
+                if (point.y && typeof point.y === "object" && "toJSON" in point.y) {
                     // @ts-ignore
                     point.y = point.y.toJSON();
                 }
@@ -179,19 +207,26 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
     validateProps(data) {
         return {
             ...super.validateProps(data),
-            filled: data.filled || false,
-            fillStyle: data.fillStyle || '#000000',
+            position: {
+                x: data.position?.x || 0,
+                y: data.position?.y || 0,
+                endX: data.position?.endX || 0,
+                endY: data.position?.endY || 0,
+            },
+            color: data.color || "#000000",
             centring: data.centring || types_1.Centring.None,
-            controlPoints: data.controlPoints || [{ x: 0, y: 0 }, { x: 0, y: 0 }],
-            endPoint: data.endPoint || { x: 0, y: 0 },
+            controlPoints: data.controlPoints || [
+                { x: 0, y: 0 },
+                { x: 0, y: 0 },
+            ],
             stroke: {
                 width: data.stroke?.width || 1,
-                cap: data.stroke?.cap || 'butt',
-                join: data.stroke?.join || 'miter',
+                cap: data.stroke?.cap || "butt",
+                join: data.stroke?.join || "miter",
                 dashOffset: data.stroke?.dashOffset || 0,
                 dash: data.stroke?.dash || [],
                 miterLimit: data.stroke?.miterLimit || 10,
-            }
+            },
         };
     }
 }

package/dist/structures/components/{Group.d.ts → Div.d.ts}

@@ -1,10 +1,11 @@
 import { AnyGlobalCompositeOperation, AnyLayer, LayerType } from "../../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers";
+import { BaseLayer, IBaseLayer, IBaseLayerProps } from "./BaseLayer";
 /**
  * Interface representing a group of layer's.
  */
-export interface IGroup {
+export interface IDiv extends IBaseLayer {
     /**
      * The unique identifier of the group.
      */
@@ -24,22 +25,23 @@ export interface IGroup {
     /**
      * The layer's contained within the group.
      */
-    layers: Array<AnyLayer>;
+    layers: Array<AnyLayer | Div>;
     /**
-     *
+     * The properties specific to the Div group.
      */
-    props?: IGroupProps;
+    props: IDivProps;
 }
-export interface IGroupProps {
+export interface IDivProps extends IBaseLayerProps {
     /**
      * Don't use, this is just for compatibility.
      */
-    globalComposite: AnyGlobalCompositeOperation;
+    globalComposite?: AnyGlobalCompositeOperation;
+    children?: Array<any>;
 }
 /**
  * Class representing a group of layer's.
  */
-export declare class Group implements IGroup {
+export declare class Div extends BaseLayer<IDivProps> implements IDiv {
     /**
      * The unique identifier of the group.
      */
@@ -59,15 +61,17 @@ export declare class Group implements IGroup {
     /**
      * The layer's contained within the group.
      */
-    layers: Array<any>;
-    props?: IGroupProps;
+    layers: Array<AnyLayer | Div>;
+    props: IDivProps;
+    parent?: IBaseLayer | any | null;
     /**
      * Constructs a new Group instance.
+     * @param {IDivProps} [props] - The properties of the Div.
      * @param {string} [opts.id] - The unique identifier of the group.
      * @param {boolean} [opts.visible] - The visibility of the group.
      * @param {number} [opts.zIndex] - The z-index of the group.
      */
-    constructor(opts?: {
+    constructor(props?: IDivProps, opts?: {
         id?: string;
         visible?: boolean;
         zIndex?: number;
@@ -92,10 +96,10 @@ export declare class Group implements IGroup {
     setZIndex(zIndex: number): this;
     /**
      * Adds components to the group.
-     * @param {AnyLayer[]} [components] - The components to add to the group.
+     * @param {AnyLayer[] | Div[]} [components] - The components to add to the group.
      * @returns {this} The current instance for chaining.
      */
-    add(...components: AnyLayer[]): this;
+    add(...components: Array<AnyLayer | Div>): this;
     /**
      * Removes a component from the group by its ID.
      * @param {string} [id] - The unique identifier of the component to remove.
@@ -110,23 +114,38 @@ export declare class Group implements IGroup {
     /**
      * Retrieves a component from the group by its ID.
      * @param {string} [id] - The unique identifier of the component to retrieve.
-     * @returns {AnyLayer | undefined} The component with the specified ID, or undefined if not found.
+     * @returns {AnyLayer | Div | undefined} The component with the specified ID, or undefined if not found.
      */
-    get(id: string): AnyLayer | undefined;
+    get(id: string): AnyLayer | Div | undefined;
     /**
      * Retrieves all components from the group.
-     * @returns {AnyLayer[]} An array of all components in the group.
+     * @returns {AnyLayer[] | Div[]} An array of all components in the group.
      */
-    getAll(): AnyLayer[];
+    getAll(): Array<AnyLayer | Div>;
     /**
      * Gets the number of components in the group.
      * @returns {number} The number of components in the group.
      */
     get length(): number;
+    /**
+     * Update state for all child layers (for animation support)
+     * @param {number} time - Current time in seconds
+     */
+    updateState(time: number): void;
+    /**
+     * Renders a single layer or group of layers.
+     * @param {AnyLayer | Div} [layer] - The layer or group to render.
+     * @param {SKRSContext2D} [ctx] - The canvas rendering context.
+     * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
+     * @param {LayersManager} [manager] - The layer's manager.
+     * @param {boolean} [debug] - Whether to enable debug logging.
+     * @returns {Promise<SKRSContext2D>} The canvas rendering context after rendering.
+     */
+    private renderLayer;
     draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;
     /**
      * Converts the group to a JSON representation.
-     * @returns {IGroup} The JSON representation of the group.
+     * @returns {IDiv} The JSON representation of the group.
      */
-    toJSON(): IGroup;
+    toJSON(): IDiv;
 }